Removing !important statements from theme variables (#1303)

* Removing !important statements from theme vars

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Wait for user store to load

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix this reference

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Aligning test with resetTheme() fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/__tests__/user-store.test.ts

@@ -57,11 +57,12 @@ describe("user store tests", () => {
       expect(us.preferences.colorTheme).toBe('light')
     })
 
-    it("correctly resets theme to default value", () => {
+    it("correctly resets theme to default value", async () => {
       const us = UserStore.getInstance<UserStore>();
+      us.isLoaded = true;
 
       us.preferences.colorTheme = "some other theme";
-      us.resetTheme();
+      await us.resetTheme();
       expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
     })
 

src/common/user-store.ts

@@ -88,7 +88,8 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   @action
-  resetTheme() {
+  async resetTheme() {
+    await this.whenLoaded;
     this.preferences.colorTheme = UserStore.defaultTheme;
   }
 

src/renderer/components/app.scss

@@ -23,7 +23,6 @@
   --font-weight-thin: 300;
   --font-weight-normal: 400;
   --font-weight-bold: 500;
-  --mainBackground: #1e2124;
   --main-layout-header: 40px;
   --drag-region-height: 22px
 }

src/renderer/theme.store.ts

@@ -48,6 +48,7 @@ export class ThemeStore {
         await this.loadTheme(themeId);
         this.applyTheme();
       } catch (err) {
+        logger.error(err);
         userStore.resetTheme();
       }
     }, {
@@ -79,7 +80,7 @@ export class ThemeStore {
       }
       return existingTheme;
     } catch (err) {
-      logger.error(`Can't load theme "${themeId}": ${err}`);
+      throw new Error(`Can't load theme "${themeId}": ${err}`);
     }
   }
 
@@ -90,7 +91,7 @@ export class ThemeStore {
       document.head.prepend(this.styles);
     }
     const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
-      return `--${cssName}: ${color} !important;`
+      return `--${cssName}: ${color};`;
     });
     this.styles.textContent = `:root {\n${cssVars.join("\n")}}`;
     // Adding universal theme flag which can be used in component styles