From 3e793a598509b9b25d95573e7cd071eec33cc924 Mon Sep 17 00:00:00 2001
From: Nick Bland <nisky38@hotmail.com>
Date: Sat, 14 May 2022 16:48:48 +1000
Subject: [PATCH] Update to use dark for dark theme, light for light theme

Feel like overall, using a white navbar & footer with black hero image was a little too clashing. Decided black for black, white for white looks better.
---
 components/navbar.tsx      | 16 ++++++++--------
 components/themeSwitch.tsx |  8 ++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 501f0ad..2445a28 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -25,11 +25,11 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <header>
-                <Disclosure as="nav" className="dark:bg-white bg-black">
+                <Disclosure as="nav" className="dark:bg-black bg-white">
                     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                         <div className="flex items-center justify-between h-16">
                             <div className="flex items-center">
-                                <div className="flex-shrink-0 dark:hidden block">
+                                <div className="flex-shrink-0 hidden dark:block">
                                     <Image
                                         className=""
                                         src="/logo-white.svg"
@@ -38,7 +38,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
                                         width={100}
                                     />
                                 </div>
-                                <div className="flex-shrink-0 hidden dark:block">
+                                <div className="flex-shrink-0 dark:hidden block">
                                     <Image
                                         className=""
                                         src="/logo-black.svg"
@@ -49,8 +49,8 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
                                 </div>
                                 <div className="hidden md:block">
                                     <div className="ml-10 flex items-baseline space-x-4">
-                                        <Link href="/"><a className="dark:text-black text-white">Home</a></Link>
-                                        <Link href="/"><a className="dark:text-black text-white">Home 2</a></Link>
+                                        <Link href="/"><a className="dark:text-white text-black">Home</a></Link>
+                                        <Link href="/"><a className="dark:text-white text-black">About</a></Link>
                                     </div>
                                     <div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
                                         <ThemeSwitch></ThemeSwitch>
@@ -86,9 +86,9 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
                     >
                         <div id="mobile-menu">
                             <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-                                <Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
-                                <Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home 2</a></Link>
-                                <ThemeSwitch></ThemeSwitch>
+                                <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
+                                <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
+                                <div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
                             </div>
                         </div>
                     </Transition.Child>
diff --git a/components/themeSwitch.tsx b/components/themeSwitch.tsx
index 1ac7bb1..76e15a4 100644
--- a/components/themeSwitch.tsx
+++ b/components/themeSwitch.tsx
@@ -14,17 +14,17 @@ export const ThemeSwitch = () => {
     }
 
     return (
-        <div className="flex justify-end items-center space-x-2 mx-auto relative">
+        <div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
             <Switch.Group>
                 <div className="flex items-center">
-                    <Switch.Label className="mr-3 dark:text-black text-white">Dark Mode</Switch.Label>
+                    <Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
                     <Switch
                         checked={enabled}
                         onChange={setEnabled}
-                        className={`${enabled ? 'bg-gray-200' : 'bg-gray-400'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-black ring-white dark:focus:bg-gray-200 focus:bg-gray-400`}
+                        className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
                     >
                         <span
-                            className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-white dark:bg-black rounded-full transition-transform`} />
+                            className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
                     </Switch>
                 </div>
             </Switch.Group>