feat: header background and text colours

martapanc · Jul 5, 2023 · cc5deaf · cc5deaf
1 parent 961a5e6
commit cc5deaf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 25 deletions.
diff --git a/src/components/buttons/ModeToggleButton.tsx b/src/components/buttons/ModeToggleButton.tsx
@@ -21,11 +21,9 @@ export default function ModeToggleButton({
   return (
     <button
       className={clsx(
-        'rounded-md p-2 focus:outline-none md:p-2.5',
-        'border dark:border-gray-600',
-        'hover:border-primary-300 hover:text-primary-300 dark:hover:border-primary-300 dark:hover:text-primary-300',
-        'focus-visible:border-primary-300 focus-visible:text-primary-300 dark:focus-visible:border-primary-300 dark:focus-visible:text-primary-300',
-        'text-lg md:text-xl',
+        'flex items-center justify-center rounded-md border-2 ' +
+          'border-grey-300 ring-grey-300 bg-transparent p-2 transition-all hover:ring-2 hover:ring-offset-2 ' +
+          'dark:border-grey-700 dark:ring-grey-200 dark:bg-transparent dark:hover:ring-2 dark:hover:ring-offset-2',
         className
       )}
       {...rest}

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,36 +1,62 @@
+import { useTheme } from 'next-themes';
 import * as React from 'react';
 
 import ModeToggleButton from '@/components/buttons/ModeToggleButton';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 const links = [
+  { href: '/about', label: 'About' },
   { href: '/projects', label: 'Projects' },
   { href: '/cv', label: 'CV' },
-  { href: '/about', label: 'About' },
+  { href: '/uses', label: 'Uses' },
+  { href: '/contact', label: 'Contact' },
 ];
 
 export default function Header() {
+  const { theme } = useTheme();
+
   return (
-    <header className='sticky top-0 z-50'>
-      <div className='layout flex h-14 items-center justify-between'>
-        <nav>
-          <ul className='flex items-center justify-between space-x-4'>
-            <li>
-              <UnstyledLink href='/' className='font-bold hover:text-gray-600'>
-                Home
-              </UnstyledLink>
-            </li>
+    <header
+      className={`sticky top-0 z-50 py-6 ${
+        theme === 'dark'
+          ? 'bg-gradient-to-r from-sky-900 to-blue-950'
+          : 'bg-gradient-to-r from-sky-300 to-blue-400'
+      }`}
+    >
+      <div className='layout flex h-12 w-full items-center justify-between'>
+        <nav className='m-4 flex w-full items-center justify-between'>
+          <UnstyledLink
+            href='/'
+            className={`font-bold 
+            ${
+              theme === 'dark'
+                ? 'text-blue-50 hover:text-blue-200'
+                : 'text-slate-900 hover:text-slate-700'
+            } 
+          `}
+          >
+            Home
+          </UnstyledLink>
+
+          <ul className='flex items-center justify-between space-x-6 text-lg'>
             {links.map(({ href, label }) => (
               <li key={`${href}${label}`}>
-                <UnstyledLink href={href} className='hover:text-gray-600'>
+                <UnstyledLink
+                  href={href}
+                  className={`${
+                    theme === 'dark'
+                      ? 'text-blue-50 hover:text-blue-200'
+                      : 'text-slate-900 hover:text-slate-700'
+                  }`}
+                >
                   {label}
                 </UnstyledLink>
               </li>
             ))}
           </ul>
-        </nav>
 
-        <ModeToggleButton />
+          <ModeToggleButton />
+        </nav>
       </div>
     </header>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import Layout from '@/components/layout/Layout';
 import ArrowLink from '@/components/links/ArrowLink';
 import ButtonLink from '@/components/links/ButtonLink';
-import UnderlineLink from '@/components/links/UnderlineLink';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
 
@@ -59,12 +58,12 @@ export default function HomePage() {
               />
             </UnstyledLink>
 
-            <footer className='absolute bottom-2 text-gray-700'>
-              © {new Date().getFullYear()} By{' '}
-              <UnderlineLink href='https://theodorusclarence.com?ref=tsnextstarter'>
-                Theodorus Clarence
-              </UnderlineLink>
-            </footer>
+            {/*<footer className='absolute bottom-2 text-gray-700'>*/}
+            {/*  © {new Date().getFullYear()} By{' '}*/}
+            {/*  <UnderlineLink href='https://theodorusclarence.com?ref=tsnextstarter'>*/}
+            {/*    Theodorus Clarence*/}
+            {/*  </UnderlineLink>*/}
+            {/*</footer>*/}
           </div>
         </section>
       </main>