From 92221fcfec1254995aff25d3e484179892e2fff2 Mon Sep 17 00:00:00 2001
From: Alex Zhang <alexzhang1618@gmail.com>
Date: Sat, 20 Jan 2024 14:31:50 -0800
Subject: [PATCH] Fix theme meta toggle, fix navbar padding

---
 src/components/common/ThemeToggle/index.tsx         | 11 ++++++++++-
 src/components/layout/Navbar/index.tsx              |  2 +-
 src/components/layout/Navbar/style.module.scss      |  4 ++++
 src/components/layout/Navbar/style.module.scss.d.ts |  1 +
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/common/ThemeToggle/index.tsx b/src/components/common/ThemeToggle/index.tsx
index 732123b6..b9fe2ccf 100644
--- a/src/components/common/ThemeToggle/index.tsx
+++ b/src/components/common/ThemeToggle/index.tsx
@@ -6,7 +6,7 @@ import { useEffect, useId, useState } from 'react';
 import styles from './style.module.scss';
 
 const ThemeToggle = () => {
-  const { theme = 'system', setTheme } = useTheme();
+  const { theme = 'system', resolvedTheme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   const lightId = `light${useId()}`;
@@ -24,6 +24,15 @@ const ThemeToggle = () => {
   const switchPos = themeToSwitch[theme];
   const currAltText = `Icon representing ${theme} theme is on.`;
 
+  useEffect(() => {
+    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+    if (metaThemeColor && resolvedTheme === 'dark') {
+      metaThemeColor.setAttribute('content', '#37393e');
+    } else if (metaThemeColor) {
+      metaThemeColor.setAttribute('content', '#fff');
+    }
+  }, [resolvedTheme]);
+
   useEffect(() => {
     setMounted(true);
   }, []);
diff --git a/src/components/layout/Navbar/index.tsx b/src/components/layout/Navbar/index.tsx
index 10bb55f3..3a10245b 100644
--- a/src/components/layout/Navbar/index.tsx
+++ b/src/components/layout/Navbar/index.tsx
@@ -57,7 +57,7 @@ const Navbar = ({ accessType }: NavbarProps) => {
           </Link>
           <ThemeToggle />
         </div>
-        <hr className={styles.wainbow} />
+        <hr className={`${styles.wainbow} ${styles.loggedOut}`} />
       </header>
     );
   }
diff --git a/src/components/layout/Navbar/style.module.scss b/src/components/layout/Navbar/style.module.scss
index ac7fb7d5..0d252e55 100644
--- a/src/components/layout/Navbar/style.module.scss
+++ b/src/components/layout/Navbar/style.module.scss
@@ -165,6 +165,10 @@
     height: 0.25rem;
     margin: 0 -1rem;
     width: 100vw;
+
+    &.loggedOut {
+      margin: 0;
+    }
   }
 }
 
diff --git a/src/components/layout/Navbar/style.module.scss.d.ts b/src/components/layout/Navbar/style.module.scss.d.ts
index bcccb32f..c8e0ebd4 100644
--- a/src/components/layout/Navbar/style.module.scss.d.ts
+++ b/src/components/layout/Navbar/style.module.scss.d.ts
@@ -7,6 +7,7 @@ export type Styles = {
   icon: string;
   iconLink: string;
   iconLinks: string;
+  loggedOut: string;
   mobileNav: string;
   mobileNavItem: string;
   navLeft: string;