From 111e211fa7153e73184897abe69e4968a695fcb8 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 5 Oct 2023 13:08:52 -0500
Subject: [PATCH] improved light/dark mode

---
 app/layout.tsx                   | 46 ++++++++++++++--------------
 app/links/page.tsx               | 16 +++++-----
 app/page.tsx                     | 52 +++++++++++++++++---------------
 app/projects/page.tsx            |  2 +-
 components/Links/SocialMedia.tsx | 11 +++++--
 components/Navbar/index.tsx      | 16 ++++++++--
 package.json                     |  2 +-
 7 files changed, 81 insertions(+), 64 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 833dbbc..e73aaf4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -21,25 +21,25 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   const [pageIsScrolled, setPageIsScrolled] = useState(false);
 
-  useEffect(() => {
-    if (pathname === '/contact') setOverlay(true);
+  // useEffect(() => {
+  //   if (pathname === '/contact') setOverlay(true);
 
-    switch (pathname) {
-      case '/contact':
-        setBg('bg-darkPlum');
-        break;
-      case '/about':
-        setBg("bg-blue-100 dark:bg-slate-900");
-        break;
-      case "/links":
-        setBg("bg-sky-100 dark:bg-slate-900");
-        break;
-      case '/':
-      default:
-        setBg('bg-slate-400 dark:bg-slate-900');
-        break;
-    }
-  }, [pathname])
+  //   switch (pathname) {
+  //     case '/contact':
+  //       setBg('bg-purple-300 dark:bg-darkPlum');
+  //       break;
+  //     case '/about':
+  //       setBg("bg-blue-100 dark:bg-slate-900");
+  //       break;
+  //     case "/links":
+  //       setBg("bg-sky-100 dark:bg-slate-900");
+  //       break;
+  //     case '/':
+  //     default:
+  //       setBg('bg-slate-400 dark:bg-slate-900');
+  //       break;
+  //   }
+  // }, [pathname])
 
   useEffect(() => {
     document.addEventListener('scroll', () => {
@@ -63,12 +63,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Navbar pageIsScrolled={pageIsScrolled} />
         <SiteTree />
         <IconContext.Provider value={{}}>
-          <main className={`${bg} min-h-screen`}>
-            <div>
-              <div id="navbar-spacer" className="h-[6rem] w-full bg-opacity-75 bg-slate-300 dark:bg-black " />
-              {children}
-            </div>
-          </main>
+          <div>
+            <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
+            {children}
+          </div>
         </IconContext.Provider>
       </body>
     </html>
diff --git a/app/links/page.tsx b/app/links/page.tsx
index e7c73f1..28e6737 100644
--- a/app/links/page.tsx
+++ b/app/links/page.tsx
@@ -6,8 +6,8 @@ import { RxArrowRight } from "react-icons/rx";
 
 export default function LinksPage() {
     return (
-        <div className="flex flex-col items-center bg-gradient-to-b from-slate-300 to-sky-100 dark:from-black dark:to-slate-900 bg-fixed">
-            <section className="flex flex-col flex-wrap w-11/12 m-12">
+        <div className="flex flex-col min-h-screen min-w-screen items-center bg-gradient-to-b from-slate-300 to-sky-100 dark:from-black dark:to-slate-900 bg-fixed">
+            {/* <section className="flex flex-col flex-wrap w-11/12 m-12">
                 <h1 className="text-3xl w-full my-8">Check out my work on...</h1>
                 <Panel width="1/2">
                     <div className="flex flex-col items-center p-8">
@@ -22,12 +22,12 @@ export default function LinksPage() {
                         <a href="https://subsequent.media" target="_blank">Subsequent Media</a>
                     </div>
                 </Panel>
-            </section>
+            </section> */}
 
-            <section id="social-media-gallery" className="w-3/5 my-12 flex flex-col items-center bg-black text-white rounded">
-                <h1 className="text-3xl w-full text-center my-8">...or on your favorite social media platform:</h1>
+            <h1 className="text-3xl w-full text-center mt-16 mb-8 text-indigo-600 dark:text-white">Find me on your favorite corner of the internet:</h1>
+            <section id="link-gallery" className="bg-indigo-600 dark:bg-stone-300 w-3/5 my-12 p-6 flex flex-col items-center text-white rounded">
 
-                <div className="flex justify-center w-full">
+                <div className="flex flex-wrap justify-center w-full">
                     <SocialMedia
                         label="LinkedIn"
                         href="https://www.linkedin.com/in/mikayla-dobson"
@@ -52,7 +52,7 @@ export default function LinksPage() {
                         logo={<FaBandcamp />}
                     />
 
-                    <SocialMedia
+                    {/* <SocialMedia
                         label="YouTube (coming soon)"
                         href="youtube.com"
                         logo={<FaYoutube />}
@@ -64,7 +64,7 @@ export default function LinksPage() {
                         href="patreon.com"
                         logo={<FaPatreon />}
                         disabled
-                    />
+                    /> */}
                 </div>
             </section>
         </div>
diff --git a/app/page.tsx b/app/page.tsx
index 5409352..f92f24b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,36 +4,38 @@ import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="flex flex-col w-full">
-      <div id="hero" className="bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900 p-4 flex flex-col items-end">
-        <ColorChangeName />
+    <main className="min-h-screen bg-fixed bg-gradient-to-b from-slate-300 to-slate-400 dark:from-black dark:to-slate-900">
+      <div className="flex flex-col w-full">
+        <div id="hero" className=" p-4 flex flex-col items-end">
+          <ColorChangeName />
 
-        {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
-          <Image fill src="/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg" alt="geometric pattern in wood and metal" />
-        </div> */}
-      </div>
+          {/* <div className="w-full h-[10vh] object-scale-down bg-no-repeat">
+            <Image fill src="/backdrops/jean-beller-peW5dg2-cLI-unsplash.jpg" alt="geometric pattern in wood and metal" />
+          </div> */}
+        </div>
 
-      <div className="flex flex-col items-start">
-        <div className="flex flex-col w-full sm:w-2/3 relative mt-6 sm:mt-0 sm:bottom-12 items-center text-center">
-          <Link passHref href="/about">
-            <Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
-          </Link>
-          <h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
-          <p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
+        <div className="flex flex-col items-start">
+          <div className="flex flex-col w-full sm:w-2/3 relative mt-6 sm:mt-0 sm:bottom-12 items-center text-center">
+            <Link passHref href="/about">
+              <Image className="rounded-full my-4" src="/img/profile.jpeg" alt="image of Mikayla Dobson" width={125} height={125} />
+            </Link>
+            <h2 className="text-slate-700 dark:text-blue-300 text-2xl mb-2">Hi! My name is Mikayla.</h2>
+            <p className="px-4 sm:px-12 dark:text-white">I build full-stack software solutions for the web, answer open-ended questions, and pet cats.</p>
 
-          <div id="actions" className="flex justify-around my-8">
-            <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
-              Tell me what I can do for you
-            </Link>
-            <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
-              And check out some of my work while you&apos;re at it
-            </Link>
-            <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
-              Check out my work
-            </Link>
+            <div id="actions" className="flex justify-around my-8">
+              <Link className="flex flex-col items-center justify-center text-center px-4 sm:px-8 border-slate-700 dark:border-white dark:text-white border-[1px] p-2 w-2/5 rounded-md" href="/contact">
+                Tell me what I can do for you
+              </Link>
+              <Link className="hidden sm:flex flex-col items-center justify-center text-center px-8 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
+                And check out some of my work while you&apos;re at it
+              </Link>
+              <Link className="sm:hidden flex flex-col items-center justify-center px-4 border-slate-700 dark:border-white dark:text-white border p-2 w-2/5 rounded-md" href="/projects">
+                Check out my work
+              </Link>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </main>
   )
 }
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 26d1e9d..637831b 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -1,7 +1,7 @@
 export default function ProjectsPage() {
     return (
         <div>
-            <h1>Projects Page</h1>
+            <h1>Learn more about my work</h1>
 
             <p>Contents of this page coming soon!</p>
         </div>
diff --git a/components/Links/SocialMedia.tsx b/components/Links/SocialMedia.tsx
index 8063bf8..4941ed6 100644
--- a/components/Links/SocialMedia.tsx
+++ b/components/Links/SocialMedia.tsx
@@ -3,10 +3,17 @@ import type { LinkProps } from ".";
 
 export default function SocialMedia({ href, label, logo, disabled = false }: LinkProps) {
     return (
-        <div title={label} className="flex flex-col items-center p-8">
-            <Link aria-disabled={disabled} passHref href={href}>
+        <div title={label} className="text-white dark:text-black w-1/4 p-8 m-8 rounded-lg border border-white dark:border-black dark:border-opacity-20">
+            <Link className="flex flex-col items-center md:hidden" aria-disabled={disabled} passHref href={href}>
                 {logo}
             </Link>
+
+            <Link aria-disabled={disabled} passHref href={href} className="hidden md:flex flex-col items-center justify-start">
+                <>
+                <span className="text-3xl">{ logo }</span>
+                <p className="text-xl font-bold mt-4">{label}</p>
+                </>
+            </Link>
         </div>
     )
 }
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx
index 4287d17..1696ac3 100644
--- a/components/Navbar/index.tsx
+++ b/components/Navbar/index.tsx
@@ -12,7 +12,17 @@ export default function Navbar({ pageIsScrolled = false }) {
 
     return (
         <>
-        <div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-slate-300 dark:bg-[#131313]  " : pageIsScrolled ? "bg-slate-300 dark:bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
+        <div
+            id="navbar"
+            className={`
+                w-full z-50 fixed flex flex-nowrap items-baseline justify-apart px-8 py-4
+                ${mobileMenuOpen
+                    ? "bg-slate-300 dark:bg-[#131313]  "
+                    : pageIsScrolled
+                    ? "bg-slate-300 dark:bg-black "
+                    : "bg-inherit "
+                }text-white transition-all duration-200`
+            }>
             <Link passHref href="/" className="w-1/4">
                 <InlineLogo customHookInstance={navbarColorShift} />
             </Link>
@@ -20,9 +30,9 @@ export default function Navbar({ pageIsScrolled = false }) {
             <div className="hidden md:inline-flex justify-end w-3/4">
                 <NavbarButton   href="/about"     label="About"       />
                 <NavbarButton   href="/projects"  label="Projects"    />
-                <NavbarButton   href="/links"     label="Links"       />
                 <NavbarButton   href="/read"      label="Read"        />
                 <NavbarButton   href="/listen"    label="Listen"      />
+                <NavbarButton   href="/links"     label="Links"       />
                 <NavbarButton   href="/contact"   label="Contact"     />
             </div>
 
@@ -33,7 +43,7 @@ export default function Navbar({ pageIsScrolled = false }) {
             </div>
         </div>
         <div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col z-50 rounded-bl-lg justify-end md:hidden fixed top-24 w-[35vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[65vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
-            {/* <div className="bg-black h-48" /> */}
+            <div className="bg-slate-300 dark:bg-black h-48" />
             <Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-auto px-2">
                 <p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Home</p>
             </Link>
diff --git a/package.json b/package.json
index 01c85b2..b0f1db6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mikayla-dobson-dev",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",