Merge pull request #211 from TouK/NU-1646-new-colors-adjustements

NU-1646 new colors adjustments and fix form styles

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>

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