add light/dark theme to solutions tab

Author: zubyj

src/content-script/common.js

@@ -1,6 +1,12 @@
 function applyButtonTheme(button, isDarkTheme) {
-    button.style.backgroundColor = isDarkTheme ? '#333' : '#f9f9f9';
+    button.style.backgroundColor = isDarkTheme ? '#333' : '#efefef';
     button.style.color = isDarkTheme ? '#fff' : '#333';
+    button.onmouseover = () => {
+        button.style.color = isDarkTheme ? 'orange' : 'green';
+    };
+    button.onmouseout = () => {
+        button.style.color = isDarkTheme ? '#fff' : '#333';
+    };
 
 }
 

src/content-script/update-description-tab.ts

@@ -173,13 +173,6 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
                 chrome.storage.local.get(['isDarkTheme'], (result) => {
                     const isDark = result.isDarkTheme;
                     applyButtonTheme(button, isDark);
-                    button.onmouseover = () => {
-                        button.style.color = isDark ? 'orange' : 'blue';
-                    };
-                    button.onmouseout = () => {
-                        button.style.color = isDark ? '#fff' : '#333';
-                    };
-
                 });
 
                 const companyName = document.createTextNode(`${company.name}`);

src/content-script/update-solutions-tab.ts

@@ -15,21 +15,19 @@ function createStyledElement(tagName: string, styles: { [key: string]: string })
 function createStyledButton(text: string, isActive: boolean = false): HTMLButtonElement {
     const button = document.createElement('button');
     button.textContent = text;
-    button.style.border = '1px solid grey';
-    button.style.borderColor = isActive ? 'lightgreen' : 'grey';
-    button.style.backgroundColor = '#222';
+    button.style.border = '2px solid grey';
     button.style.width = '100px';
     button.style.padding = '3px';
     button.style.margin = '0px 20px';
     button.style.borderRadius = '5px';
+    if (isActive) button.style.borderColor = 'lightgreen';
     button.style.fontSize = '12px';
-    button.addEventListener('mouseover', () => {
-        button.style.color = 'lightgreen';
-    });
-    button.addEventListener('mouseout', () => {
-        button.style.backgroundColor = '#222';
-        button.style.color = 'white';
-    });
+    chrome.storage.local.get(['isDarkTheme'], (result) => {
+        const isDark = result.isDarkTheme;
+        applyButtonTheme(button, isDark);
+
+    })
+
     return button;
 }
 
@@ -150,6 +148,7 @@ function hideContent() {
     }
 }
 
+
 function createNavContainer(problem: any) {
 
     const navContainer = createStyledElement('div', {