Minor: style buttons in admin dashboard navbar w/o outline.

trailbaseio · Nov 3, 2024 · 1f033c3 · 1f033c3
1 parent 75c1e79
commit 1f033c3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/ui/admin/src/components/NavBar.tsx b/ui/admin/src/components/NavBar.tsx
@@ -21,6 +21,12 @@ const options = [
   [`${BASE}/settings`, TbSettings],
 ];
 
+export const navBarIconSize = 22;
+export const navBarIconStyle =
+  "rounded-full hover:bg-accent-200 hover:bg-opacity-50 transition-all p-[10px]";
+export const navBarIconActiveStyle =
+  "rounded-full transition-all p-[10px] bg-accent-600 text-white hover:bg-opacity-70";
+
 export function NavBar(props: { location: Location }) {
   return (
     <div class="grow flex flex-col justify-between items-center bg-gray-100 py-2 gap-4">
@@ -30,16 +36,12 @@ export function NavBar(props: { location: Location }) {
         </a>
 
         {options.map(([pathname, icon]) => {
-          const active = props.location.pathname === pathname;
-
-          const style =
-            "rounded-full hover:bg-accent-600 hover:text-white transition-all p-[10px]";
-          const activeStyle = `${style} outline outline-3 outline-accent-600 text-accent-600`;
+          const active = () => props.location.pathname === pathname;
 
           return (
             <a href={pathname as string}>
-              <div class={active ? activeStyle : style}>
-                {(icon as IconTypes)({ size: 22 })}
+              <div class={active() ? navBarIconActiveStyle : navBarIconStyle}>
+                {(icon as IconTypes)({ size: navBarIconSize })}
               </div>
             </a>
           );

diff --git a/ui/admin/src/components/auth/AuthButton.tsx b/ui/admin/src/components/auth/AuthButton.tsx
@@ -14,10 +14,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-
-const navBarIconSize = 22;
-const style =
-  "rounded-full hover:bg-accent-600 hover:text-white transition-all p-[10px]";
+import { navBarIconSize, navBarIconStyle } from "@/components/NavBar";
 
 function Profile(props: { user: User }) {
   const profile = props.user;
@@ -44,7 +41,7 @@ export function AuthButton() {
 
   return (
     <Dialog open={open()} onOpenChange={setOpen}>
-      <button class={style} onClick={() => setOpen(true)}>
+      <button class={navBarIconStyle} onClick={() => setOpen(true)}>
         <TbUser size={navBarIconSize} />
       </button>