added colors and 2 main components for 2 different contexts

src/views/content/ContentMain.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ContentMain() {
+    return <div>content</div>;
+}

src/views/content/Main.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Main() {
-    return <div />;
-}

src/views/content/content.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { ContextInvalidated, createShadowDOM, onContextInvalidated } from 'chrome-extension-toolkit';
-import Main from './Main';
+import ContentMain from './ContentMain';
-
 
 injectReact();
 
-
 async function injectReact() {
     const shadowDom = createShadowDOM('ut-registration-plus-dom-container');
-    render(<Main />, shadowDom.shadowRoot);
+    render(<ContentMain />, shadowDom.shadowRoot);
     await shadowDom.addStyle('static/css/content.css');
 }
 
@@ -18,6 +16,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='orange' />, div);
+        render(<ContextInvalidated color='black' backgroundColor='#f8971f' />, div);
     });
 }

src/views/popup/PopupMain.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function PopupMain() {
+    return <div>popup</div>;
+}

src/views/popup/popup.tsx

@@ -1,17 +1,5 @@
 import React from 'react';
 import { render } from 'react-dom';
+import PopupMain from './PopupMain';
 
-console.log('test');
+render(<PopupMain />, document.getElementById('root'));
-
-console.log('test2');
-
-// Path: src/views/popup/popup.tsx
-
-console.log('test3');
-
-render(
-    <div>
-        <h1>Test</h1>
-    </div>,
-    document.getElementById('root')
-);

src/views/styles/colors.module.scss

@@ -0,0 +1,2 @@
+$BURNT_ORANGE: #bf5700;
+$WHITE: #ffffff;