add dark mode to popup

interface/src/App.tsx

@@ -37,7 +37,6 @@ const App: React.FC = () => {
     }
   ];
 
-  {/* <div className="flex justify-center w-screen h-screen pt-4 overflow-hidden" style={{ background: settingsState.customThemeColor }}> */}
   return (
     <div className="flex flex-col w-[384px] shadow-2xl gap-2 bg-white rounded-xl h-[590px] dark:bg-zinc-800 dark:text-white">
       <div className="grid border-b border-b-zinc-200/40 place-items-center">

interface/src/components/Switch.css

@@ -1,3 +1,4 @@
+.dark .switch[data-ison="true"],
 .switch[data-ison="true"] {
   background-color: #30D259;
 }

interface/src/components/TabbedContainer.tsx

@@ -35,30 +35,31 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) =
   };
 
   return (
-    <div className="h-full px-4 overflow-y-scroll overflow-x-clip">
+    <>
-      <div ref={containerRef} className="sticky top-0 z-10 text-[0.875rem] mb-2 pb-2 bg-white">
+    <div ref={containerRef} className="top-0 z-10 text-[0.875rem] mb-2 pb-2 mx-4">
-        <div className="relative flex">          
+      <div className="relative flex">          
-          <motion.div
+        <motion.div
-            className="absolute top-0 left-0 z-0 h-full rounded-full opacity-40"
+          className="absolute top-0 left-0 z-0 h-full rounded-full opacity-40"
-            style={{ width: `${tabWidth}px`, background: themeColor }}
+          style={{ width: `${tabWidth}px`, background: themeColor }}
-            initial={false}
+          initial={false}
-            animate={{ x: calcXPos(hoveredTab) }}
+          animate={{ x: calcXPos(hoveredTab) }}
-            transition={springTransition}
+          transition={springTransition}
-          />
+        />
-          {tabs.map((tab, index) => (
+        {tabs.map((tab, index) => (
-            <button
+          <button
-              key={index}
+            key={index}
-              className="relative z-10 flex-1 px-4 py-2"
+            className="relative z-10 flex-1 px-4 py-2"
-              onClick={() => setActiveTab(index)}
+            onClick={() => setActiveTab(index)}
-              onMouseEnter={() => setHoveredTab(index)}
+            onMouseEnter={() => setHoveredTab(index)}
-              onMouseLeave={() => setHoveredTab(null)}
+            onMouseLeave={() => setHoveredTab(null)}
-            >
+          >
-              {tab.title}
+            {tab.title}
-            </button>
+          </button>
-          ))}
+        ))}
-        </div>
       </div>
-      <div className="relative">
+    </div>
+    <div className="h-full px-4 overflow-y-scroll overflow-x-clip">
+      <div className="-mt-4">
         <motion.div
           initial={false}
           animate={{ x: `${position}%` }}
@@ -77,6 +78,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) =
         </motion.div>
       </div>
     </div>
+    </>
   );
 };
 

interface/src/hooks/settingsState.ts

@@ -4,9 +4,6 @@ import { SettingsProps } from "../types/SettingsProps";
 import { MainConfig, SettingsState } from "../types/AppProps";
 
 let RanOnce = false;
-type StorageKeyToStateKeyMap = {
-  [key in keyof MainConfig]?: keyof SettingsState;
-};
 let previousSettingsState: SettingsState
 
 const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => {
@@ -25,6 +22,10 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
         customThemeColor: result.selectedColor,
         betterSEQTAPlus: result.onoff
       });
+
+      if (result.DarkMode) {
+        document.body.classList.add('dark');
+      }
     });
   });
   
@@ -38,13 +39,24 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
   }), []);
   
   const storageChangeListener = (changes: chrome.storage.StorageChange) => {
+    console.log(changes);
     for (const [key, { newValue }] of Object.entries(changes)) {
+      if (key === "DarkMode") {
+        if (key === "DarkMode" && newValue) {
+          document.body.classList.add('dark');
+        } else {
+          document.body.classList.remove('dark');
+        }
+      }
+
+      // @ts-expect-error - TODO: Fix this
       const stateKey = keyToStateMap[key as keyof MainConfig];
       if (stateKey) {
         setSettingsState((prevState: SettingsState) => ({
           ...prevState,
           [stateKey]: newValue
         }));
+
       }
     }
   };
@@ -63,7 +75,9 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
   useEffect(() => {
     if (previousSettingsState) {
       for (const [key, value] of Object.entries(settingsState)) {
+        // @ts-expect-error - TODO: Fix this
         const storageKey = Object.keys(keyToStateMap).find(k => keyToStateMap[k] === key);
+        // @ts-expect-error - TODO: Fix this
         if (storageKey && value !== previousSettingsState[key]) {
           setStorage(storageKey as keyof MainConfig, value);
         }