fixed some bugs, and updated dev dashboard useffect"

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;