update theme

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) {

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(),

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),
+          },
         },
       },
 

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;