jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add hover highlight classes to Nav links and svgs

Browse Source
This commit is contained in:
Trillium Smith 2024-06-19 13:11:36 -07:00
parent 3044443bf1
commit 8665738d27
4 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Header.tsx
View File

@ -32,7 +32,8 @@ const Header = () => {
<Link
key={link.title}
href={link.href}
className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
sm:block"
>
{link.title}
</Link>

9
components/MobileNav.tsx
View File

@ -26,7 +26,8 @@ const MobileNav = () => {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="h-8 w-8 text-gray-900 dark:text-gray-100"
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100
dark:hover:text-primary-400"
>
<path
fillRule="evenodd"
@ -46,7 +47,8 @@ const MobileNav = () => {
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="text-gray-900 dark:text-gray-100"
className="text-gray-900 hover:text-primary-500 dark:text-gray-100
dark:hover:text-primary-400"
>
<path
fillRule="evenodd"
@ -61,7 +63,8 @@ const MobileNav = () => {
<div key={link.title} className="px-12 py-4">
<Link
href={link.href}
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100
dark:hover:text-primary-400"
onClick={onToggleNav}
>
{link.title}

3
components/SearchButton.tsx
View File

@ -18,7 +18,8 @@ const SearchButton = () => {
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 text-gray-900 dark:text-gray-100"
className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
dark:hover:text-primary-400"
>
<path
strokeLinecap="round"

2
components/ThemeSwitch.tsx
View File

@ -56,7 +56,7 @@ const ThemeSwitch = () => {
return (
<div className="mr-5">
<Menu as="div" className="relative inline-block text-left">
<div>
<div className="hover:text-primary-500 dark:hover:text-primary-400">
<Menu.Button>
{mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
</Menu.Button>