fix settings

interface/.eslintrc.cjs

@@ -15,4 +15,12 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
 }

interface/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/chrome": "^0.0.246",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^2.2.22",

interface/src/App.tsx

@@ -7,45 +7,25 @@ import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
 import About from './pages/About';
 
-export interface SettingsState {
-  notificationCollector: boolean;
-  lessonAlerts: boolean;
-  animatedBackground: boolean;
-  animatedBackgroundSpeed: boolean;
-  customThemeColor: string;
-  betterSEQTAPlus: boolean;
-}
+import type { SettingsState } from './types/AppProps';
+import useSettingsState from './hooks/settingsState';
 
 const App: React.FC = () => {
   const [settingsState, setSettingsState] = useState<SettingsState>({
     notificationCollector: false,
     lessonAlerts: false,
     animatedBackground: false,
-    animatedBackgroundSpeed: false,
+    animatedBackgroundSpeed: "0",
     customThemeColor: "#db6969",
     betterSEQTAPlus: true
   });
 
-  // Handler for Switches
-  const switchChange = (key: string, isOn: boolean) => {
-    setSettingsState({
-      ...settingsState,
-      [key]: isOn,
-    });
-  };
-
-  // Handler for ColorPicker
-  const colorChange = (color: string) => {
-    setSettingsState({
-      ...settingsState,
-      customThemeColor: color,
-    });
-  };
+  useSettingsState({ settingsState, setSettingsState });
 
   const tabs = [
     {
       title: 'Settings',
-      content: <Settings settingsState={settingsState} switchChange={switchChange} colorChange={colorChange} />
+      content: <Settings settingsState={settingsState} setSettingsState={setSettingsState} />
     },
     {
       title: 'Shortcuts',
@@ -59,7 +39,7 @@ 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-[24rem] shadow-2xl gap-2 bg-white rounded-xl h-[590px] dark:bg-zinc-800 dark:text-white">
+    <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">
         <img src={logo} className="w-4/5 dark:hidden" />
         <img src={logoDark} className="hidden w-4/5 dark:block" />

interface/src/components/ColorPicker.d.ts

@@ -1,6 +0,0 @@
-interface ColorPickerProps {
-    color: string;
-    onChange: (color: string) => void;
-}
-declare const Picker: ({ color, onChange }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
-export default Picker;

interface/src/components/ColorPicker.tsx

@@ -1,10 +1,7 @@
+// @ts-expect-error There aren't any types for the below library
 import ColorPicker from 'react-best-gradient-color-picker';
-import React, { useState, useRef, useEffect } from 'react';
-
-interface ColorPickerProps {
-  color: string;
-  onChange: (color: string) => void;
-}
+import { useState, useRef, useEffect } from 'react';
+import type { ColorPickerProps } from '../types/ColorPicker';
 
 const Picker = ({ color, onChange }: ColorPickerProps) => {
   const [showPicker, setShowPicker] = useState<boolean>(false);

interface/src/components/Slider.tsx

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 import "./Slider.css";
-
-interface Slider {
-  onValueChange: (value: number) => void;
-}
+import type { Slider } from '../types/Slider';
 
 const Slider: React.FC<Slider> = ({ onValueChange }) => {
   const [sliderValue, setSliderValue] = useState(0);

interface/src/components/Switch.d.ts

@@ -1,7 +0,0 @@
-import "./Switch.css";
-interface SwitchProps {
-    onChange: (isOn: boolean) => void;
-    state: boolean;
-}
-export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
-export {};

interface/src/components/Switch.tsx

@@ -1,10 +1,6 @@
 import { motion } from "framer-motion";
 import "./Switch.css";
-
-interface SwitchProps {
-  onChange: (isOn: boolean) => void;
-  state: boolean;
-}
+import type { SwitchProps } from "../types/Switch";
 
 export default function Switch(props: SwitchProps) {
   const toggleSwitch = () => {

interface/src/components/TabbedContainer.tsx

@@ -1,15 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
-
-interface Tab {
-  title: string;
-  content: JSX.Element;
-}
-
-interface TabbedContainerProps {
-  tabs: Tab[];
-  themeColor: string;
-}
+import type { TabbedContainerProps } from '../types/TabbedContainer';
 
 const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) => {
   const [activeTab, setActiveTab] = useState(0);

interface/src/hooks/settingsState.ts

@@ -0,0 +1,79 @@
+/*global chrome*/
+import { useEffect, useMemo } from "react";
+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) => {
+  // run the following code once
+  useEffect(() => {
+    if (RanOnce) return;
+    RanOnce = true;
+
+    // get the current settings state
+    chrome.storage.local.get(function(result: MainConfig) {
+      setSettingsState({
+        notificationCollector: result.notificationcollector,
+        lessonAlerts: result.lessonalert,
+        animatedBackground: result.animatedbk,
+        animatedBackgroundSpeed: result.bksliderinput,
+        customThemeColor: result.selectedColor,
+        betterSEQTAPlus: result.onoff
+      });
+    });
+  });
+  
+  const keyToStateMap = useMemo(() => ({
+    "notificationcollector": "notificationCollector",
+    "lessonalert": "lessonAlerts",
+    "animatedbk": "animatedBackground",
+    "bksliderinput": "animatedBackgroundSpeed",
+    "selectedColor": "customThemeColor",
+    "onoff": "betterSEQTAPlus",
+  }), []);
+  
+  const storageChangeListener = (changes: chrome.storage.StorageChange) => {
+    for (const [key, { newValue }] of Object.entries(changes)) {
+      const stateKey = keyToStateMap[key as keyof MainConfig];
+      if (stateKey) {
+        setSettingsState((prevState: SettingsState) => ({
+          ...prevState,
+          [stateKey]: newValue
+        }));
+      }
+    }
+  };
+
+  useEffect(() => {
+    chrome.storage.onChanged.addListener(storageChangeListener);
+    return () => {
+      chrome.storage.onChanged.removeListener(storageChangeListener);
+    };
+  });
+
+  const setStorage = (key: keyof MainConfig, value: any) => {
+    console.log(chrome.storage.local.set({ [key]: value }));
+  }
+
+  useEffect(() => {
+    console.log("settingsState", settingsState)
+    console.log("previousSettingsState", previousSettingsState)
+    if (previousSettingsState) {
+      for (const [key, value] of Object.entries(settingsState)) {
+        const storageKey = Object.keys(keyToStateMap).find(k => keyToStateMap[k] === key);
+        if (storageKey && value !== previousSettingsState[key]) {
+          console.log("key", storageKey)
+          setStorage(storageKey as keyof MainConfig, value);
+        }
+      }
+    }
+    previousSettingsState = settingsState;
+  }, [settingsState, keyToStateMap])
+}
+
+export default useSettingsState;

interface/src/pages/Settings.tsx

@@ -1,21 +1,24 @@
 import Switch from '../components/Switch';
 import ColorPicker from '../components/ColorPicker';
-import { SettingsState } from '../../../src/popup/App';
+import { SettingsProps, SettingsList } from '../types/SettingsProps';
 
-interface ISetting {
-  title: string;
-  description: string;
-  modifyElement: JSX.Element;
-}
+const Settings: React.FC<SettingsProps> = ({ settingsState, setSettingsState }) => {
 
-interface SettingsProps {
-  settingsState: SettingsState;
-  switchChange: (key: string, isOn: boolean) => void;
-  colorChange: (color: string) => void;
-}
+  const switchChange = (key: string, isOn: boolean) => {
+    setSettingsState({
+      ...settingsState,
+      [key]: isOn,
+    });
+  };
 
-const Settings: React.FC<SettingsProps> = ({ settingsState, switchChange, colorChange }) => {
-  const settings: ISetting[] = [
+  const colorChange = (color: string) => {
+    setSettingsState({
+      ...settingsState,
+      customThemeColor: color,
+    });
+  };
+
+  const settings: SettingsList[] = [
     {
       title: "Notification Collector",
       description: "Uncaps the 9+ limit for notifications, showing the real number.",
@@ -34,7 +37,7 @@ const Settings: React.FC<SettingsProps> = ({ settingsState, switchChange, colorC
     {
       title: "Animated Background Speed",
       description: "Controls the speed of the animated background.",
-      modifyElement: <Switch state={settingsState.animatedBackgroundSpeed} onChange={(isOn: boolean) => switchChange('animatedBackgroundSpeed', isOn)} />
+      modifyElement: <div>Insert Slider Please</div>
     },
     {
       title: "Custom Theme Colour",
@@ -43,7 +46,7 @@ const Settings: React.FC<SettingsProps> = ({ settingsState, switchChange, colorC
     },
     {
       title: "BetterSEQTA+",
-      description: "Unlocks premium features.",
+      description: "Enables BetterSEQTA+ features",
       modifyElement: <Switch state={settingsState.betterSEQTAPlus} onChange={(isOn: boolean) => switchChange('betterSEQTAPlus', isOn)} />
     }
   ];

interface/src/types/AppProps.ts

@@ -0,0 +1,53 @@
+export interface SettingsState {
+  notificationCollector: boolean;
+  lessonAlerts: boolean;
+  animatedBackground: boolean;
+  animatedBackgroundSpeed: string;
+  customThemeColor: string;
+  betterSEQTAPlus: boolean;
+}
+
+// Define the ToggleItem interface for the nested objects in menuitems
+interface ToggleItem {
+  toggle: boolean;
+}
+
+// Define the Shortcut interface for the objects in the shortcuts array
+interface Shortcut {
+  enabled: boolean;
+  name: string;
+}
+
+// Define the MainConfig interface for the top-level object
+export interface MainConfig {
+  DarkMode: boolean;
+  animatedbk: boolean;
+  bksliderinput: string;
+  customshortcuts: any[];
+  defaultmenuorder: any[];
+  lessonalert: boolean;
+  menuitems: {
+    assessments: ToggleItem;
+    courses: ToggleItem;
+    dashboard: ToggleItem;
+    documents: ToggleItem;
+    forums: ToggleItem;
+    goals: ToggleItem;
+    home: ToggleItem;
+    messages: ToggleItem;
+    myed: ToggleItem;
+    news: ToggleItem;
+    notices: ToggleItem;
+    portals: ToggleItem;
+    reports: ToggleItem;
+    settings: ToggleItem;
+    timetable: ToggleItem;
+    welcome: ToggleItem;
+  };
+  menuorder: any[];
+  notificationcollector: boolean;
+  onoff: boolean;
+  selectedColor: string;
+  shortcuts: Shortcut[];
+  subjectfilters: Record<string, any>; // Could be more specific based on what types are allowed
+}

interface/src/types/ColorPickerProps.ts

@@ -0,0 +1,4 @@
+export interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+}

interface/src/types/SettingsProps.ts

@@ -0,0 +1,11 @@
+import type { SettingsState } from './AppProps';
+
+export interface SettingsList {
+  title: string;
+  description: string;
+  modifyElement: JSX.Element;
+}
+export interface SettingsProps {
+  settingsState: SettingsState;
+  setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
+}

interface/src/types/SliderProps.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import "./Slider.css";
-interface Slider {
+export interface Slider {
     onValueChange: (value: number) => void;
 }
 declare const Slider: React.FC<Slider>;

interface/src/types/SwitchProps.ts

@@ -0,0 +1,6 @@
+import "./Switch.css";
+
+export interface SwitchProps {
+    onChange: (isOn: boolean) => void;
+    state: boolean;
+}

interface/src/types/TabbedContainerProps.ts

@@ -1,9 +1,9 @@
 import React, { JSX } from 'react';
-interface Tab {
+export interface Tab {
     title: string;
     content: JSX.Element;
 }
-interface TabbedContainerProps {
+export interface TabbedContainerProps {
     tabs: Tab[];
     themeColor: string;
 }

public/manifest.json

@@ -58,6 +58,14 @@
     {
       "resources": ["index.css"],
       "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["interface/*"],
+      "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["client/*"],
+      "matches": ["*://*/*"]
     }
   ]
 }

public/popup/info.css

@@ -14,13 +14,12 @@
 @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
 
 .outside-container {
-  width: 350px;
   margin: 0;
-  background-color: #131313;
   overflow: hidden;
   position: absolute;
   right: 10px;
   top: 80px;
+  height: 590px;
   z-index: 20;
 }
 

src/SEQTA.js

@@ -13,7 +13,7 @@ let SettingsClicked = false;
 let MenuOptionsOpen = false;
 let UserInitalCode = "";
 let currentSelectedDate = new Date();
-let WhatsNewOpen = false;
+//let WhatsNewOpen = false;
 let LessonInterval;
 let DarkMode;
 
@@ -25,7 +25,7 @@ function SetDisplayNone(ElementName) {
   return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`;
 }
 
-function animbkEnable (item) {
+function animbkEnable(item) {
   if (item.animatedbk) {
     CreateBackground();
   } else {
@@ -38,7 +38,9 @@ function bkValues (item) {
   const bg = document.getElementsByClassName("bg");
   const bg2 = document.getElementsByClassName("bg2");
   const bg3 = document.getElementsByClassName("bg3");
-  const value = 200 - item.bksliderinput;
+  const value = 200 - item.bksliderinput; // reverse the slider direction to match the animation direction
+
+  if (bg.length == 0 || bg2.length == 0 || bg3.length == 0) return;
 
   const minDuration = 1; // minimum duration in seconds
   const maxDuration = 10; // maximum duration in seconds
@@ -172,12 +174,12 @@ function OpenWhatsNewPopup() {
   var bkelement = document.getElementById("whatsnewbk");
   bkelement.addEventListener("click", function () {
     DeleteWhatsNew();
-    WhatsNewOpen = false;
+    //WhatsNewOpen = false;
   });
   var closeelement = document.getElementById("whatsnewclosebutton");
   closeelement.addEventListener("click", function () {
     DeleteWhatsNew();
-    WhatsNewOpen = false;
+    //WhatsNewOpen = false;
   });
 }
 
@@ -193,7 +195,7 @@ async function finishLoad() {
 
   chrome.storage.local.get(["justupdated"], function (result) {
     if (result.justupdated) {
-      WhatsNewOpen = true;
+      //WhatsNewOpen = true;
       OpenWhatsNewPopup();
     }
   });
@@ -233,6 +235,9 @@ function RemoveBackground() {
   var bk = document.getElementsByClassName("bg");
   var bk2 = document.getElementsByClassName("bg2");
   var bk3 = document.getElementsByClassName("bg3");
+
+  if (bk.length == 0 || bk2.length == 0 || bk3.length == 0) return;
+
   bk[0].remove();
   bk2[0].remove();
   bk3[0].remove();
@@ -760,7 +765,6 @@ chrome.storage.onChanged.addListener(function (changes) {
       "--better-main",
       changes.selectedColor.newValue,
     );
-    // document.documentElement.style.setProperty('--better-sub', ColorLuminance(changes.selectedColor.newValue, -0.15));
 
     if (changes.selectedColor.newValue == "#ffffff") {
       document.documentElement.style.setProperty("--better-light", "#b7b7b7");
@@ -801,7 +805,7 @@ async function CheckLoadOnPeriods() {
   }
 }
 
-function RunFunctionOnTrue(storedSetting) {
+function main(storedSetting) {
   DarkMode = storedSetting.DarkMode;
   // If the option is 'on', open BetterSEQTA
   if (typeof storedSetting.onoff == "undefined") {
@@ -891,7 +895,6 @@ function RunFunctionOnTrue(storedSetting) {
       "--better-main",
       storedSetting.selectedColor,
     );
-    // document.documentElement.style.setProperty('--better-sub', ColorLuminance(storedSetting.selectedColor, -0.15));
 
     if (storedSetting.selectedColor == "#ffffff") {
       document.documentElement.style.setProperty("--better-light", "#b7b7b7");
@@ -966,7 +969,7 @@ document.addEventListener(
       document.getElementsByTagName("html")[0].appendChild(link);
 
       chrome.storage.local.get(null, function (items) {
-        RunFunctionOnTrue(items);
+        main(items);
       });
     }
     if (
@@ -978,7 +981,7 @@ document.addEventListener(
   },
   true,
 );
-
+/*
 function RunExtensionSettingsJS() {
   const whatsnewsettings = document.getElementById("whatsnewsettings");
   whatsnewsettings.addEventListener("click", function () {
@@ -1043,9 +1046,9 @@ function RunExtensionSettingsJS() {
   function FindSEQTATab() {
     chrome.runtime.sendMessage({ type: "reloadTabs" });
   }
-  /*
-  Store the currently selected settings using chrome.storage.local.
-  */
+  
+  // Store the currently selected settings using chrome.storage.local.
+
   function storeSettings() {
     chrome.storage.local.set({ onoff: onoffselection.checked }, function () {
       FindSEQTATab();
@@ -1072,10 +1075,10 @@ function RunExtensionSettingsJS() {
 
     FindSEQTATab();
   }
-  /*
-  Update the options UI with the settings values retrieved from storage,
-  or the default settings if the stored settings are empty.
-  */
+  
+  // Update the options UI with the settings values retrieved from storage,
+  // or the default settings if the stored settings are empty.
+  
   function updateUI(restoredSettings) {
     if (typeof restoredSettings.onoff == "undefined") {
       chrome.runtime.sendMessage({ type: "setDefaultStorage" });
@@ -1310,7 +1313,7 @@ function RunExtensionSettingsJS() {
       chrome.storage.local.set({ selectedColor: b });
     }
   });
-}
+}*/
 
 function CallExtensionSettings() {
   // Injecting CSS File to the webpage to overwrite iFrame default CSS
@@ -1333,7 +1336,7 @@ function CallExtensionSettings() {
   fileref.setAttribute("href", cssFile);
   document.head.append(fileref);
 
-  let Settings =
+  /*let Settings =
     stringToHTML(
       String.raw`
       <div class="outside-container hidden" id="ExtensionPopup"><div class="logo-container"><img src=${chrome.runtime.getURL(
@@ -1580,20 +1583,31 @@ function CallExtensionSettings() {
       <p style="margin: 0; flex: 1; padding-left: 24px; margin-right: 5px; color: white;">By SethBurkart123</p>
       <button style="margin: 0; margin-right: 20px; cursor:pointer; padding: 8px 10px; background: #ff5f5f; color:#1a1a1a;font-weight: 500; border-radius: 10px;" id="whatsnewsettings">Changelog v${chrome.runtime.getManifest().version}</button>
     </div>
-  </div></div>`);
-  document.body.append(Settings.firstChild);
+  </div></div>`);*/
+  let Settings2 =
+  stringToHTML(
+    String.raw`
+    <div class="outside-container hide" id="ExtensionPopup">
+    </div>
+    `);
+  document.body.append(Settings2.firstChild);
 
-  // override old popup with new (experimental)
-  const script = document.createElement("script");
-  script.type = "module"; 
-  script.src = chrome.runtime.getURL("client.js");
-  (document.head||document.documentElement).appendChild(script);
+  // add an iframe to the div: <iframe src="interface/index.html"></iframe>
+  let iframe = document.createElement("iframe");
+  iframe.src = chrome.runtime.getURL("interface/index.html");
+  iframe.allowTransparency = "true";
+  iframe.style.width = "384px";
+  iframe.style.height = "590px";
+  iframe.style.border = "none";
+  iframe.setAttribute("excludeDarkCheck", "true");
+  
+  document.getElementById("ExtensionPopup").append(iframe);
 
   var container = document.getElementById("container");
   var extensionsettings = document.getElementById("ExtensionPopup");
   container.onclick = function () {
     if (!SettingsClicked) {
-      extensionsettings.classList.add("hidden");
+      extensionsettings.classList.add("hide");
     }
     SettingsClicked = false;
   };
@@ -2056,8 +2070,9 @@ function AddBetterSEQTAElements(toggle) {
       }
 
       CallExtensionSettings();
-      RunExtensionSettingsJS();
+      //RunExtensionSettingsJS();
 
+      // If betterSEQTA+ is enabled, run the code
       if (toggle) {
         // Creates settings and dashboard buttons next to alerts
         var SettingsButton = stringToHTML(
@@ -2118,6 +2133,11 @@ function AddBetterSEQTAElements(toggle) {
 
                 for (let i = 0; i < alliframes.length; i++) {
                   const element = alliframes[i];
+
+                  if (element.getAttribute("excludeDarkCheck") == "true") {
+                    continue;
+                  }
+                  
                   element.contentDocument.documentElement.childNodes[1].style.color =
                     "white";
                   element.contentDocument.documentElement.firstChild.appendChild(
@@ -2151,6 +2171,11 @@ function AddBetterSEQTAElements(toggle) {
 
                 for (let i = 0; i < alliframes.length; i++) {
                   const element = alliframes[i];
+
+                  if (element.getAttribute("excludeDarkCheck") == "true") {
+                    continue;
+                  }
+
                   element.contentDocument.documentElement.childNodes[1].style.color =
                     "black";
                   element.contentDocument.documentElement.firstChild.lastChild.remove();
@@ -2174,7 +2199,7 @@ function AddBetterSEQTAElements(toggle) {
       var AddedSettings = document.getElementById("AddedSettings");
       var extensionsettings = document.getElementById("ExtensionPopup");
       AddedSettings.addEventListener("click", function () {
-        extensionsettings.classList.toggle("hidden");
+        extensionsettings.classList.toggle("hide");
         SettingsClicked = true;
       });
     }

src/inject/injected.css

@@ -1,6 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
 @import "./injected/popup.css";
-@import "./popup.css";
 
 :root {
   background-color: var(--better-main) !important;
@@ -24,11 +23,6 @@ html {
   --theme-fg-parts: white;
 }
 
-#title {
-  color: var(--text-primary);
-  font-weight: 500 !important;
-}
-
 @media (min-width: 900px) {
   #title > span {
     transform: translateY(2px);
@@ -611,10 +605,12 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 #title {
   background: var(--background-primary);
+  color: var(--text-primary);
   height: 4rem;
-  box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px;
   min-height: 48px;
+  box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-weight: 500 !important;
   z-index: 1;
 }
 
@@ -1085,7 +1081,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 #ExtensionPopup {
   border-radius: 1rem;
-  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 0px 20px -2px rgba(0,0,0,0.6)  
 }
 
 #menu li.active {
@@ -1676,7 +1672,7 @@ body {
 }
 
 .MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO {
-  box-shadow: inset 3px 0 rgb(255, 255, 255);
+  box-shadow: inset 3px 0 var(--better-main);
 }
 
 .connectedNotificationsWrapper > div > button {

src/inject/injected/popup.css

@@ -5,3 +5,8 @@
 .topmenu {
   margin-top: 0;
 }
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
+}

webpack.config.js

@@ -64,6 +64,7 @@ export default {
         { from: "public", to: "." },
         { from: "src/inject/preview", to: "inject/preview" },
         { from: "node_modules/webextension-polyfill/dist/browser-polyfill.js", to: "."},
+        { from: "interface/dist/client", to: "client" }
       ],
     }),
   ],