From 5c2648a31785d92238c232e19edf6bb9a2fe9774 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Thu, 2 Sep 2021 23:56:17 +1000
Subject: [PATCH] update theme

---
 src/contexts/AppContext.tsx         | 10 +++++-----
 src/theme/colors.ts                 |  2 +-
 src/theme/components.tsx            |  6 ++++--
 src/{Themes.tsx => theme/index.tsx} |  4 ++--
 4 files changed, 12 insertions(+), 10 deletions(-)
 rename src/{Themes.tsx => theme/index.tsx} (96%)

diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 3dfd566e..4d113db3 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -10,7 +10,7 @@ import {
   ThemeOptions,
   CssBaseline,
 } from "@material-ui/core";
-import Themes from "Themes";
+import themes from "theme";
 
 import ErrorBoundary from "components/ErrorBoundary";
 import { name } from "@root/package.json";
@@ -24,9 +24,9 @@ const useThemeOverriddenState = createPersistedState(
 interface AppContextInterface {
   currentUser: firebase.User | null | undefined;
   userDoc: any;
-  theme: keyof typeof Themes;
+  theme: keyof typeof themes;
   themeOverridden: boolean;
-  setTheme: React.Dispatch<React.SetStateAction<keyof typeof Themes>>;
+  setTheme: React.Dispatch<React.SetStateAction<keyof typeof themes>>;
   setThemeOverridden: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -72,7 +72,7 @@ export const AppProvider: React.FC = ({ children }) => {
     noSsr: true,
   });
   // Store theme
-  const [theme, setTheme] = useThemeState<keyof typeof Themes>(
+  const [theme, setTheme] = useThemeState<keyof typeof themes>(
     prefersDarkTheme ? "dark" : "light"
   );
   // Store if theme was overridden
@@ -88,7 +88,7 @@ export const AppProvider: React.FC = ({ children }) => {
   const [themeCustomization, setThemeCustomization] = useState<ThemeOptions>(
     {}
   );
-  const generatedTheme = Themes[theme](themeCustomization);
+  const generatedTheme = themes[theme](themeCustomization);
 
   useEffect(() => {
     if (userDoc.doc) {
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 76be220c..5180d6c8 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -148,7 +148,7 @@ export const colorsDark = (
       },
       error: {
         main: colord({
-          l: 65,
+          l: 75,
           c: 72,
           h: colord(ERROR).toLch().h,
         }).toHslString(),
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index a7e7ca14..f0355e80 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -197,7 +197,7 @@ export const components = (theme: Theme): ThemeOptions => {
             "&, &.MuiInputLabel-shrink": { transform: "none" },
 
             position: "static",
-            padding: "2px 12px",
+            padding: theme.spacing(2 / 8, 2 / 8),
             pointerEvents: "auto",
 
             maxWidth: "none",
@@ -212,7 +212,9 @@ export const components = (theme: Theme): ThemeOptions => {
       },
       MuiFormHelperText: {
         styleOverrides: {
-          filled: { margin: theme.spacing(0.5, 1.5, 0) },
+          contained: {
+            margin: theme.spacing(0.5, 2 / 8, 0),
+          },
         },
       },
 
diff --git a/src/Themes.tsx b/src/theme/index.tsx
similarity index 96%
rename from src/Themes.tsx
rename to src/theme/index.tsx
index aa0c906e..a9aceb58 100644
--- a/src/Themes.tsx
+++ b/src/theme/index.tsx
@@ -43,8 +43,8 @@ export const customizableDarkTheme = (customization: ThemeOptions) => {
   );
 };
 
-const Themes = {
+const themes = {
   light: customizableLightTheme,
   dark: customizableDarkTheme,
 };
-export default Themes;
+export default themes;