fixed some bugs, and updated dev dashboard useffect"

src/debug/index.tsx

@@ -93,18 +93,42 @@ function DevDashboard() {
         chrome.storage.session.get(null, result => {
             setSessionStorage(result);
         });
-
-        chrome.storage.onChanged.addListener((changes, areaName) => {
-            if (areaName === 'local') {
-                setLocalStorage({ ...localStorage, ...changes });
-            } else if (areaName === 'sync') {
-                setSyncStorage({ ...syncStorage, ...changes });
-            } else if (areaName === 'session') {
-                setSessionStorage({ ...sessionStorage, ...changes });
-            }
-        });
     }, []);
 
+    // listen for changes to the chrome storage to update the local storage state displayed in the dashboard
+    useEffect(() => {
+        const onChanged = (changes: chrome.storage.StorageChange, areaName: chrome.storage.AreaName) => {
+            let copy = {};
+            if (areaName === 'local') {
+                copy = { ...localStorage };
+            } else if (areaName === 'sync') {
+                copy = { ...syncStorage };
+            } else if (areaName === 'session') {
+                copy = { ...sessionStorage };
+            }
+
+            Object.keys(changes).forEach(key => {
+                copy[key] = changes[key].newValue;
+            });
+
+            if (areaName === 'local') {
+                setLocalStorage(copy);
+            }
+            if (areaName === 'sync') {
+                setSyncStorage(copy);
+            }
+            if (areaName === 'session') {
+                setSessionStorage(copy);
+            }
+        };
+
+        chrome.storage.onChanged.addListener(onChanged);
+
+        return () => {
+            chrome.storage.onChanged.removeListener(onChanged);
+        };
+    }, [localStorage, syncStorage, sessionStorage]);
+
     const handleEditStorage = (areaName: string) => (changes: Record<string, any>) => {
         chrome.storage[areaName].set(changes);
     };

src/views/content/content.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { render } from 'react-dom';
 import { ContextInvalidated, createShadowDOM, onContextInvalidated } from 'chrome-extension-toolkit';
 import ContentMain from './ContentMain';
+import colors from '../styles/colors.module.scss';
+
+console.log('colors:', colors);
 
 injectReact();
 
@@ -16,6 +19,6 @@ if (process.env.NODE_ENV === 'development') {
         const div = document.createElement('div');
         div.id = 'context-invalidated-container';
         document.body.appendChild(div);
-        render(<ContextInvalidated color='black' backgroundColor='#f8971f' />, div);
+        render(<ContextInvalidated color={colors.$CHARCOAL} backgroundColor={colors.$BURNT_ORANGE} />, div);
     });
 }

src/views/styles/base.module.scss

@@ -1,2 +1,3 @@
 @import './colors.module.scss';
 @import './fonts.module.scss';
+@import './elevation.module.scss';

src/views/styles/colors.module.scss

@@ -9,3 +9,17 @@ $TURQUOISE: #00a9b7;
 $BLUEBONNET: #005f86;
 $SHADE: #9cadb7;
 $LIMESTONE: #d6d2c4;
+
+:export {
+    $BURNT_ORANGE: $BURNT_ORANGE;
+    $CHARCOAL: $CHARCOAL;
+    $WHITE: $WHITE;
+    $TANGERINE: $TANGERINE;
+    $SUNSHINE: $SUNSHINE;
+    $CACTUS: $CACTUS;
+    $TURTLE_POND: $TURTLE_POND;
+    $TURQUOISE: $TURQUOISE;
+    $BLUEBONNET: $BLUEBONNET;
+    $SHADE: $SHADE;
+    $LIMESTONE: $LIMESTONE;
+}

src/views/styles/colors.module.scss.d.ts

@@ -0,0 +1,16 @@
+export interface ISassColors {
+    $BURNT_ORANGE: string;
+    $CHARCOAL: string;
+    $WHITE: string;
+    $TANGERINE: string;
+    $SUNSHINE: string;
+    $CACTUS: string;
+    $TURTLE_POND: string;
+    $TURQUOISE: string;
+    $BLUEBONNET: string;
+    $SHADE: string;
+    $LIMESTONE: string;
+}
+
+declare const colors: ISassColors;
+export default colors;