Fix theme meta toggle, fix navbar padding (#132)

* Fix theme meta toggle, fix navbar padding

* Add comment

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,17 @@ const ThemeToggle = () => {
   const switchPos = themeToSwitch[theme];
   const currAltText = `Icon representing ${theme} theme is on.`;
 
+  useEffect(() => {
+    // Adjusting the <meta name="theme-color"> tag.
+    // This affects the color of the safe zone on iPhone 15.
+    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);
   }, []);

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>
     );
   }

src/components/layout/Navbar/style.module.scss

@@ -165,6 +165,10 @@
     height: 0.25rem;
     margin: 0 -1rem;
     width: 100vw;
+
+    &.loggedOut {
+      margin: 0;
+    }
   }
 }
 

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;