update,

vinniesniper-54816/task1/project/frontend/config/StyledMaterialThemeProvider.js

@@ -0,0 +1,15 @@
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { StylesProvider } from "@mui/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+
+const MyThemeProvider = ({ theme, children }) => (
+  <StylesProvider injectFirst>
+    <CssBaseline />
+    <StyledThemeProvider theme={theme}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </StyledThemeProvider>
+  </StylesProvider>
+);
+
+export default MyThemeProvider;

vinniesniper-54816/task1/project/frontend/config/theme.js

@@ -0,0 +1,37 @@
+import { createTheme } from "@mui/material/styles";
+import { red } from "@mui/material/colors";
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#556cd6",
+    },
+    secondary: {
+      main: "#19857b",
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h2",
+          h2: "h2",
+          h3: "h2",
+          h4: "h2",
+          h5: "h2",
+          h6: "h2",
+          subtitle1: "h2",
+          subtitle2: "h2",
+          body1: "span",
+          body2: "span",
+        },
+      },
+    },
+  },
+});
+
+export default theme;