From d6584386ff149c21143268e39c42d77a43d21ca6 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Sun, 26 Sep 2021 21:37:22 -0400
Subject: [PATCH] set disabled color

---
 src/Settings/Settings.ts          |  3 +++
 src/ui/React/Theme.tsx            |  5 +++++
 src/ui/React/ThemeEditorModal.tsx | 11 ++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/Settings/Settings.ts b/src/Settings/Settings.ts
index bf44cbd12..3ddf84abb 100644
--- a/src/Settings/Settings.ts
+++ b/src/Settings/Settings.ts
@@ -129,6 +129,7 @@ interface IDefaultSettings {
     cha: string;
     int: string;
     rep: string;
+    disabled: string;
   };
 }
 
@@ -199,6 +200,7 @@ export const defaultSettings: IDefaultSettings = {
     cha: "#a671d1",
     int: "#6495ed",
     rep: "#faffdf",
+    disabled: "#66cfbc",
   },
 };
 
@@ -258,6 +260,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     cha: defaultSettings.theme.cha,
     int: defaultSettings.theme.int,
     rep: defaultSettings.theme.rep,
+    disabled: defaultSettings.theme.disabled,
   },
   init() {
     Object.assign(Settings, defaultSettings);
diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx
index 156a2f39b..4355ff0ce 100644
--- a/src/ui/React/Theme.tsx
+++ b/src/ui/React/Theme.tsx
@@ -33,6 +33,7 @@ declare module "@mui/material/styles" {
 let theme: Theme;
 
 export function refreshTheme(): void {
+  console.log(Settings.theme.disabled);
   theme = createTheme({
     colors: {
       hp: Settings.theme.hp,
@@ -73,6 +74,10 @@ export function refreshTheme(): void {
         default: Settings.theme.black,
         paper: Settings.theme.well,
       },
+      action: {
+        disabledBackground: Settings.theme.disabled,
+        disabled: Settings.theme.disabled,
+      },
     },
     typography: {
       fontFamily: "monospace",
diff --git a/src/ui/React/ThemeEditorModal.tsx b/src/ui/React/ThemeEditorModal.tsx
index 6593a5e76..8d7650c73 100644
--- a/src/ui/React/ThemeEditorModal.tsx
+++ b/src/ui/React/ThemeEditorModal.tsx
@@ -22,7 +22,10 @@ interface IColorEditorProps {
 }
 
 function ColorEditor({ name, onColorChange, color, defaultColor }: IColorEditorProps): React.ReactElement {
-  if (color === undefined) throw new Error("should not happen");
+  if (color === undefined) {
+    console.error(`color ${name} was undefined, reverting to default`);
+    color = defaultColor;
+  }
 
   return (
     <>
@@ -264,6 +267,12 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
         color={customTheme["rep"]}
         defaultColor={defaultSettings.theme["rep"]}
       />
+      <ColorEditor
+        name="disabled"
+        onColorChange={onColorChange}
+        color={customTheme["disabled"]}
+        defaultColor={defaultSettings.theme["disabled"]}
+      />
       <br />
       <br />
       <TextField label={"import / export theme"} value={JSON.stringify(customTheme)} onChange={onThemeChange} />