From 7be69bf4f0ace5484d662e741b95bb031dda1ba0 Mon Sep 17 00:00:00 2001
From: natyusha <985941+natyusha@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:09:13 -0400
Subject: [PATCH] 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
---
 .../Layout/ExternalLinkMenuItem.tsx           |  2 +-
 src/components/Layout/LinkMenuItem.tsx        |  6 +++++-
 src/components/Layout/MenuItem.tsx            |  5 ++++-
 src/components/Layout/TopNav.tsx              | 19 +++++++++++++++----
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/Layout/ExternalLinkMenuItem.tsx b/src/components/Layout/ExternalLinkMenuItem.tsx
index 80e69fe89..3b7fb3d5e 100644
--- 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
index c33a1a543..23c72e39c 100644
--- 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
index 0e9a95cbd..40ce08f07 100644
--- 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
index ee999ee3b..990be2451 100644
--- 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>