From cc531705b4abb4fa97e52fad43dcc52a9fe0ffb7 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Wed, 29 Dec 2021 00:18:00 +0000
Subject: [PATCH] feat(theme): add transparency effects toggle

---
 external/lang                               |  2 +-
 src/components/settings/AppearanceShims.tsx | 36 +++++++++++++++++++--
 src/mobx/State.ts                           |  2 +-
 src/mobx/stores/Settings.ts                 |  3 ++
 src/mobx/stores/helpers/STheme.ts           |  4 ++-
 src/pages/settings/panes/Appearance.tsx     |  9 ++++--
 6 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/external/lang b/external/lang
index b955e406..1bf1a75b 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit b955e40611bc317851fe80fafdc3a26b9665d77e
+Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39
diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx
index aacfbc38..b35bcb11 100644
--- a/src/components/settings/AppearanceShims.tsx
+++ b/src/components/settings/AppearanceShims.tsx
@@ -214,14 +214,44 @@ export const DisplayLigaturesShim = observer(() => {
 /**
  * Component providing a way to toggle seasonal themes.
  */
+export const DisplaySeasonalShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            checked={settings.get("appearance:seasonal") ?? true}
+            onChange={(v) => settings.set("appearance:seasonal", v)}
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
+            }>
+            <Text id="app.settings.pages.appearance.theme_options.seasonal" />
+        </Checkbox>
+    );
+});
+
+/**
+ * Component providing a way to toggle transparency effects.
+ */
+export const DisplayTransparencyShim = observer(() => {
+    const settings = useApplicationState().settings;
+
+    return (
+        <Checkbox
+            checked={settings.get("appearance:transparency") ?? true}
+            onChange={(v) => settings.set("appearance:transparency", v)}
+            description={
+                <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
+            }>
+            <Text id="app.settings.pages.appearance.theme_options.transparency" />
+        </Checkbox>
+    );
+});
+
 export const ThemeOptionsShim = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
         <>
-            <h3>
-                <Text id="app.settings.pages.appearance.theme_options.title" />
-            </h3>
             {/* TOFIX: WIP feature - follows system theme */}
             {/*<Checkbox
                 checked={settings.get("appearance:seasonal") ?? true}
diff --git a/src/mobx/State.ts b/src/mobx/State.ts
index 66516793..61856486 100644
--- a/src/mobx/State.ts
+++ b/src/mobx/State.ts
@@ -212,7 +212,7 @@ export default class State {
                 return;
             }
         } catch (err) {
-            reportError(err, "redux_migration");
+            reportError(err as any, "redux_migration");
         }
 
         // Load MobX store.
diff --git a/src/mobx/stores/Settings.ts b/src/mobx/stores/Settings.ts
index 1a90dbe4..8fed5083 100644
--- a/src/mobx/stores/Settings.ts
+++ b/src/mobx/stores/Settings.ts
@@ -29,6 +29,7 @@ export interface ISettings {
     "appearance:emoji": EmojiPack;
     "appearance:ligatures": boolean;
     "appearance:seasonal": boolean;
+    "appearance:transparency": boolean;
 
     "appearance:theme:base": "dark" | "light";
     "appearance:theme:overrides": Partial<Overrides>;
@@ -140,6 +141,7 @@ export default class Settings
         if (key === "appearance") {
             this.remove("appearance:emoji");
             this.remove("appearance:seasonal");
+            this.remove("appearance:transparency");
         } else {
             this.remove("appearance:ligatures");
             this.remove("appearance:theme:base");
@@ -169,6 +171,7 @@ export default class Settings
             appearance: this.pullKeys([
                 "appearance:emoji",
                 "appearance:seasonal",
+                "appearance:transparency",
             ]),
             theme: this.pullKeys([
                 "appearance:ligatures",
diff --git a/src/mobx/stores/helpers/STheme.ts b/src/mobx/stores/helpers/STheme.ts
index 1d85ad36..394a8ee0 100644
--- a/src/mobx/stores/helpers/STheme.ts
+++ b/src/mobx/stores/helpers/STheme.ts
@@ -95,7 +95,9 @@ export default class STheme {
             ...this.settings.get("appearance:theme:overrides"),
             light: this.isLight(),
 
-            "min-opacity": 0,
+            "min-opacity": this.settings.get("appearance:transparency", true)
+                ? 0
+                : 1,
         };
     }
 
diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index 66dd34bf..748daa4d 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -14,7 +14,8 @@ import {
     DisplayLigaturesShim,
     DisplayEmojiShim,
     ThemeCustomCSSShim,
-    ThemeOptionsShim,
+    DisplaySeasonalShim,
+    DisplayTransparencyShim,
 } from "../../../components/settings/AppearanceShims";
 import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides";
 import ThemeTools from "../../../components/settings/appearance/ThemeTools";
@@ -27,7 +28,11 @@ export const Appearance = observer(() => {
             <hr />
             <ThemeAccentShim />
             <hr />
-            <ThemeOptionsShim />
+            <h3>
+                <Text id="app.settings.pages.appearance.theme_options.title" />
+            </h3>
+            <DisplaySeasonalShim />
+            <DisplayTransparencyShim />
             <hr />
             <DisplayFontShim />
             <DisplayLigaturesShim />