From f5ef9bfe242c50997273137315a7f61d2a0b205b Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Thu, 19 Sep 2024 23:44:30 -0700
Subject: [PATCH] Update web header styles

---
 web/src/app/page.tsx               |  2 +-
 web/src/components/Header.tsx      | 15 ++++++++-------
 web/src/components/ThemeToggle.tsx |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 923ad5de..6ca70c08 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -207,7 +207,7 @@ export default function Home() {
         <div className='w-full divide-y divide-neutral-300 border-y border-neutral-300 dark:divide-neutral-900 dark:border-neutral-900'>
           {faqs.map((faq, index) => (
             <details key={index}>
-              <summary className='p-8 font-medium transition hover:cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-950'>
+              <summary className='p-8 font-medium transition hover:cursor-pointer hover:bg-neutral-200 dark:hover:bg-neutral-900'>
                 {faq.question}
               </summary>
               <p className='border-t border-neutral-300 px-12 py-8 text-neutral-600 dark:border-neutral-900 dark:text-neutral-300'>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 8bf7650f..f9e64e94 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -6,18 +6,19 @@ import { ThemeToggle } from './ThemeToggle';
 
 export function Header() {
   return (
-    <header className='sticky top-0 z-50 flex w-full max-w-screen-lg items-center justify-between gap-4 border-b border-inherit bg-inherit p-4 dark:from-black'>
-      <Link className='flex items-center gap-2' href='/'>
+    <header className='sticky top-0 z-50 flex w-full max-w-screen-lg justify-between gap-4 divide-x divide-neutral-300 border-b border-inherit bg-inherit dark:divide-neutral-900 dark:from-black'>
+      <Link
+        className='flex items-center gap-2 border-r border-inherit px-4 transition hover:bg-neutral-200 dark:hover:bg-neutral-900'
+        href='/'
+      >
         <div className='relative size-8'>
           <Image alt='Logo' src={`/logo.svg`} layout='fill' priority />
         </div>
-
-        <h1 className='text-xl font-semibold'>Frosty</h1>
       </Link>
 
-      <div className='flex items-center gap-4'>
+      <div className='flex items-center divide-x divide-inherit'>
         <a
-          className='transition-opacity hover:opacity-50'
+          className='p-4 transition hover:bg-neutral-200 dark:hover:bg-neutral-900'
           href={donateLink}
           target='_blank'
           rel='noreferrer'
@@ -26,7 +27,7 @@ export function Header() {
         </a>
 
         <a
-          className='transition-opacity hover:opacity-50'
+          className='p-4 transition hover:bg-neutral-200 dark:hover:bg-neutral-900'
           href={githubLink}
           target='_blank'
           rel='noreferrer'
diff --git a/web/src/components/ThemeToggle.tsx b/web/src/components/ThemeToggle.tsx
index 8bdf47b4..61f663a7 100644
--- a/web/src/components/ThemeToggle.tsx
+++ b/web/src/components/ThemeToggle.tsx
@@ -19,7 +19,7 @@ export function ThemeToggle() {
 
   return (
     <button
-      className='transition-opacity hover:opacity-50'
+      className='p-4 transition hover:bg-neutral-200 dark:hover:bg-neutral-900'
       aria-label={`Toggle ${isDarkMode ? 'light mode' : 'dark mode'}`}
       onClick={() => setTheme(isDarkMode ? 'light' : 'dark')}
     >