chainswitcher styling

storyprotocol · Feb 1, 2024 · 1119f58 · 1119f58
1 parent 708baab
commit 1119f58
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/components/Navbar/ChainSwitcher.tsx b/components/Navbar/ChainSwitcher.tsx
@@ -19,7 +19,7 @@ export default function ChainSwitcher() {
           }
         }}
       >
-        <SelectTrigger className="text-sm text-white bg-transparent border-none outline-none focus:outline-none focus:ring-0 ring-0 ring-offset-0 bg-sp-purple-dark">
+        <SelectTrigger className="text-sm text-white bg-transparent border-none outline-none focus:outline-none focus:ring-0 ring-0 ring-offset-0 bg-indigo-400">
           <LinkIcon className="w-5 h-5 ml-0.5 shrink-0" />
           <SelectValue placeholder="Version" className="bg-transparent" />
         </SelectTrigger>

diff --git a/components/Navbar/Sidebar.tsx b/components/Navbar/Sidebar.tsx
@@ -127,9 +127,18 @@ const Sidebar = ({ collapsed, navItems = defaultNavItems, shown, onHide }: Props
               onHide();
             }}
           />
-          <Badge className={cn('text-xs capitalize', collapsed ? 'hidden' : '')}>{process.env.NEXT_PUBLIC_CHAIN}</Badge>
+          <Badge
+            className={cn(
+              'text-xs capitalize  bg-indigo-400 hover:bg-indigo-400',
+              collapsed ? 'transition-opacity opacity-0 delay-[150ms]' : '',
+            )}
+          >
+            {process.env.NEXT_PUBLIC_CHAIN}
+          </Badge>
         </div>
-        <Badge className={cn('text-xs capitalize', !collapsed ? 'hidden' : '')}>{process.env.NEXT_PUBLIC_CHAIN}</Badge>
+        <Badge className={cn('text-xs capitalize bg-indigo-400 my-1', !collapsed ? 'hidden' : '')}>
+          {process.env.NEXT_PUBLIC_CHAIN}
+        </Badge>
 
         {/* <button onClick={() => onHide()}>
           <span
@@ -218,8 +227,8 @@ const Sidebar = ({ collapsed, navItems = defaultNavItems, shown, onHide }: Props
           </div>
         </div>
 
-        <>
-          <Link href="/tos.pdf" target="_blank" className="flex flex-row my-auto pb-2">
+        <div className="py-2">
+          <Link href="/tos.pdf" target="_blank" className="flex flex-row my-auto">
             <div
               className={classNames({
                 'transition-colors duration-300': true, //animation
@@ -238,7 +247,7 @@ const Sidebar = ({ collapsed, navItems = defaultNavItems, shown, onHide }: Props
               </ClientOnly>
             </div>
           </Link>
-        </>
+        </div>
       </div>
     </div>
   );