akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 15:17:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tooltips to all buttons and tweak hover colors

Browse Source
This commit is contained in:
Misode
2021-09-25 07:10:54 +02:00
parent 7db47938b8
commit 2cb14a2c10
13 changed files with 251 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/components/Header.tsx
View File

@@ -27,9 +27,9 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
return <header>
<div class="title">
<Link class="home-link" href="/">{Icons.home}</Link>
<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
<h2>{title}</h2>
{gen && <BtnMenu icon="chevron_down">
{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
{config.generators
.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))
.map(g =>
@@ -40,7 +40,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
<nav>
<ul>
<li>
<BtnMenu icon="globe">
<BtnMenu icon="globe" tooltip={loc('language')}>
{config.languages.map(({ code, name }) =>
<Btn label={name} active={code === language}
onClick={() => changeLanguage(code)} />
@@ -48,7 +48,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
</BtnMenu>
</li>
<li>
<BtnMenu icon={Themes[theme]}>
<BtnMenu icon={Themes[theme]} tooltip={loc('theme')}>
{Object.entries(Themes).map(([th, icon]) =>
<Btn icon={icon} label={loc(`theme.${th}`)} active={th === theme}
onClick={() => changeTheme(th)} />
@@ -56,7 +56,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
</BtnMenu>
</li>
<li class="dimmed">
<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" title={loc('github')}>
<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" class="tooltipped tip-sw" aria-label={loc('github')}>
{Octicon.mark_github}
</a>
</li>