From 867cbf479d29c8f7e8855b770493e882c87ebeaf Mon Sep 17 00:00:00 2001
From: Dawid Poliszak <dawid@readonlyrest.com>
Date: Wed, 8 May 2024 08:48:31 +0200
Subject: [PATCH] NU-1646 new colors adjustments and fix form styles

---
 src/components/root.tsx  | 15 +++++++++++++--
 src/components/theme.tsx | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/root.tsx b/src/components/root.tsx
index 9acf611..ff6c44b 100644
--- a/src/components/root.tsx
+++ b/src/components/root.tsx
@@ -1,12 +1,23 @@
-import { Box, CssBaseline, ThemeProvider } from "@mui/material";
+import { Box, CssBaseline, Theme, ThemeProvider } from "@mui/material";
 import React from "react";
 import { BrowserRouter as Router } from "react-router-dom";
 import { RootRoutes } from "./routes";
 import { theme } from "./theme";
+import { deepmerge } from "@mui/utils";
 
 export const Root = () => {
     return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={(outerTheme: Theme) => {
+            if(!Object.keys(outerTheme).length) {
+                return theme
+            }
+
+            // Let's set aside the parent form style since we won't be using the same form style throughout the entire app.
+            const {components: {MuiFormControl, MuiFormHelperText, MuiFormLabel}, ...filteredOuterTheme} = outerTheme
+
+            return deepmerge(theme, filteredOuterTheme )
+
+        }}>
             <CssBaseline />
             <Box minHeight="100vh" display="flex" flex={1}>
                 <Router>
diff --git a/src/components/theme.tsx b/src/components/theme.tsx
index f8f9de3..1add26a 100644
--- a/src/components/theme.tsx
+++ b/src/components/theme.tsx
@@ -22,4 +22,20 @@ export const theme = createMuiTheme({
             paper: "#4D4D4D",
         },
     },
+    components: {
+        MuiListItemIcon: {
+            styleOverrides: {
+                root: {
+                    color: 'currentColor',
+                }
+            }
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    color: theme.palette.primary.main,
+                })
+            }
+        },
+    }
 });