New UI for header (#132)

Bowen7 · Aug 18, 2024 · 88705ff · 88705ff
1 parent 85c011c
commit 88705ff
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -2,25 +2,26 @@ import { memo } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
+import { GitHubLogoIcon } from '@radix-ui/react-icons'
 import { LanguageSelect } from '@/components/language-select'
 import { ModeToggle } from '@/components/mode-toggle'
 import { Logo } from '@/components/logo'
 
 function navLinkClassName({ isActive }: { isActive: boolean }) {
-  return clsx('transition-colors hover:text-foreground/80', isActive ? 'text-foreground' : 'text-foreground/60')
+  return clsx('transition-colors hover:text-foreground/80 text-sm', isActive ? 'text-foreground' : 'text-foreground/60')
 }
 
 const Header = memo(() => {
   const { t } = useTranslation()
   return (
     <header className="h-[64px] flex items-center justify-between border-b">
-      <Link to="/" className="ml-9">
-        <div className="flex items-end">
-          <Logo width={32} height={32} className="mr-4" />
-          <span className="font-bold">Regex Vis</span>
-        </div>
-      </Link>
-      <div className="flex space-x-8 items-center text-sm mr-9">
+      <div className="flex items-center space-x-6">
+        <Link to="/" className="ml-9 pr-2">
+          <div className="flex items-center">
+            <Logo width={32} height={32} className="mr-4" />
+            <span className="font-bold">Regex Vis</span>
+          </div>
+        </Link>
         <NavLink
           to="/"
           className={navLinkClassName}
@@ -33,15 +34,18 @@ const Header = memo(() => {
         >
           {t('Samples')}
         </NavLink>
+      </div>
+      <div className="flex items-center text-sm mr-9 space-x-2">
+        <LanguageSelect />
         <a
           href="https://github.com/Bowen7/regex-vis"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-foreground/60"
         >
-          Github
+          <div className="inline-flex items-center justify-center rounded-md hover:bg-accent py-2 h-8 w-8 ml-2">
+            <GitHubLogoIcon className="w-4 h-4" />
+          </div>
         </a>
-        <LanguageSelect />
         <ModeToggle />
       </div>
     </header>

diff --git a/src/components/language-select/index.tsx b/src/components/language-select/index.tsx
@@ -14,7 +14,7 @@ export function LanguageSelect() {
 
   return (
     <Select value={language} onValueChange={i18n.changeLanguage}>
-      <SelectTrigger className="w-[100px] px-2 text-xs h-8">
+      <SelectTrigger className="w-24 px-2 text-xs h-8">
         <SelectValue placeholder="Select a language" />
       </SelectTrigger>
       <SelectContent>

diff --git a/src/components/mode-toggle/index.tsx b/src/components/mode-toggle/index.tsx
@@ -1,5 +1,4 @@
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { Button } from '@/components/ui/button'
 import { useTheme } from '@/components/theme-provider'
 
 export function ModeToggle() {
@@ -10,8 +9,8 @@ export function ModeToggle() {
   }
 
   return (
-    <Button variant="outline" size="icon" className="h-8 w-8" onClick={onClick}>
-      {theme === 'dark' ? <MoonIcon className="absolute h-[1.2rem] w-[1.2rem]" /> : <SunIcon className="h-[1.2rem] w-[1.2rem]" />}
-    </Button>
+    <div className="inline-flex items-center justify-center rounded-md hover:bg-accent py-2 h-8 w-8 cursor-pointer" onClick={onClick}>
+      {theme === 'dark' ? <MoonIcon className="absolute h-4 w-4" /> : <SunIcon className="h-4 w-4" />}
+    </div>
   )
 }