fix: new colors adjustments and fix form styles [NU-1646]

src/components/root.tsx

@@ -1,23 +1,12 @@
-import { Box, CssBaseline, Theme, ThemeProvider } from "@mui/material";
+import { Box, CssBaseline, 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={(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 )
-
-        }}>
+        <ThemeProvider theme={theme}>
             <CssBaseline />
             <Box minHeight="100vh" display="flex" flex={1}>
                 <Router>

src/components/rootProviders.tsx

@@ -1,17 +1,36 @@
+import { Theme, ThemeProvider } from "@mui/material";
+import { deepmerge } from "@mui/utils";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { configure } from "mobx";
 import * as React from "react";
 import { PropsWithChildren } from "react";
 import { Options } from "../config";
 import { StoreProvider } from "../store/storeProvider";
+import { theme } from "./theme";
 
 configure({
     enforceActions: "observed",
 });
 
 export const RootProviders = ({ children }: PropsWithChildren<unknown>) => (
     <StoreProvider options={Options}>
-        <LocalizationProvider dateAdapter={AdapterMoment}>{children}</LocalizationProvider>
+        <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);
+            }}
+        >
+            <LocalizationProvider dateAdapter={AdapterMoment}>{children}</LocalizationProvider>
+        </ThemeProvider>
     </StoreProvider>
 );