Minor Top Nav Tweaks (#1002)

* Minor Top Nav Tweaks - Slightly Increase "Shoko" text size to account for the larger logo - Change the "Log Out" tooltip direction to match the "Settings" one - Add hover colour to top nav links and icons * Add Transition Colours
ShokoAnime · Aug 20, 2024 · 7be69bf · 7be69bf
1 parent 401aa98
commit 7be69bf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/components/Layout/ExternalLinkMenuItem.tsx b/src/components/Layout/ExternalLinkMenuItem.tsx
@@ -20,7 +20,7 @@ const ExternalLinkMenuItem = React.memo(({
     data-tooltip-id="tooltip"
     data-tooltip-content={name}
   >
-    <Icon className="text-topnav-icon" path={icon} size={1} />
+    <Icon className="text-topnav-icon transition-colors hover:text-topnav-icon-primary" path={icon} size={1} />
   </a>
 ));
 

diff --git a/src/components/Layout/LinkMenuItem.tsx b/src/components/Layout/LinkMenuItem.tsx
@@ -22,7 +22,11 @@ const LinkMenuItem = React.memo((props: LinkMenuItemProps) => {
       to={path}
       key={path.split('/')
         .pop()}
-      className={({ isActive }) => cx('flex items-center gap-x-3', isActive && 'text-topnav-text-primary')}
+      className={({ isActive }) =>
+        cx(
+          'flex items-center gap-x-3 transition-colors hover:text-topnav-text-primary',
+          isActive && 'text-topnav-text-primary',
+        )}
       onClick={onClick}
     >
       <Icon path={icon} size={1} />

diff --git a/src/components/Layout/MenuItem.tsx b/src/components/Layout/MenuItem.tsx
@@ -13,7 +13,10 @@ export type MenuItemProps = {
 const MenuItem = React.memo(({ icon, id, isHighlighted, onClick, text }: MenuItemProps) => (
   <div
     key={id}
-    className={cx('flex items-center gap-x-3 cursor-pointer', isHighlighted && 'text-topnav-text-primary')}
+    className={cx(
+      'flex items-center gap-x-3 cursor-pointer transition-colors hover:text-topnav-text-primary',
+      isHighlighted && 'text-topnav-text-primary',
+    )}
     onClick={onClick}
   >
     <Icon path={icon} size={1} />

diff --git a/src/components/Layout/TopNav.tsx b/src/components/Layout/TopNav.tsx
@@ -170,7 +170,7 @@ function TopNav() {
         <div className="mx-auto flex w-full max-w-[120rem] items-center justify-between p-6">
           <Link to="/webui/dashboard" className="flex items-center gap-x-3">
             <ShokoIcon className="w-20" />
-            <span className="mt-1 text-xl font-semibold text-header-text">Shoko</span>
+            <span className="mt-1 text-2xl font-semibold text-header-text">Shoko</span>
           </Link>
           <div className="flex items-center gap-x-6">
             <QueueCount />
@@ -191,10 +191,21 @@ function TopNav() {
               data-tooltip-content="Settings"
               data-tooltip-place="bottom"
             >
-              <Icon path={mdiCogOutline} size={1} />
+              <Icon
+                className="transition-colors hover:text-header-icon-primary"
+                path={mdiCogOutline}
+                size={1}
+              />
             </NavLink>
-            <Button onClick={handleLogout} tooltip="Log out">
-              <Icon path={mdiLogout} size={1} />
+            <Button onClick={handleLogout}>
+              <Icon
+                className="transition-colors hover:text-header-icon-primary"
+                data-tooltip-id="tooltip"
+                data-tooltip-content="Log out"
+                data-tooltip-place="bottom"
+                path={mdiLogout}
+                size={1}
+              />
             </Button>
           </div>
         </div>