Merge pull request #990 from lfglabs-dev/fix/mui-theme

fix: mui theme
lfglabs-dev · Dec 20, 2024 · f6ccbf5 · f6ccbf5
2 parents b12eaf8 + b308f36
commit f6ccbf5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 77 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,8 +6,6 @@ import { Providers } from "./provider";
 import "@styles/globals.css";
 import Navbar from "@components/UI/navbar";
 import Footer from "@components/UI/footer";
-import { ThemeProvider } from "@mui/material";
-import { theme } from "@components/UI/theme";
 
 export default function RootLayout({
   children,
@@ -20,11 +18,9 @@ export default function RootLayout({
     <html lang="en">
       <body className="default_background_color">
         <Providers>
-          <ThemeProvider theme={theme}>
-            <Navbar />
-            <main className="mt-[48px]">{children}</main>
-            {pathname !== "/" && <Footer />}
-          </ThemeProvider>
+          <Navbar />
+          <main className="mt-[48px]">{children}</main>
+          {pathname !== "/" && <Footer />}
         </Providers>
       </body>
     </html>

diff --git a/app/provider.tsx b/app/provider.tsx
@@ -21,6 +21,7 @@ import { NotificationProvider } from "@context/NotificationProvider";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { getConnectors } from "@utils/walletConfig";
+import theme from "@styles/theme";
 
 // Traffic measures
 if (typeof window !== "undefined") {
@@ -47,58 +48,6 @@ export function Providers({ children }: { children: React.ReactNode }) {
     }),
   });
 
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: "#6affaf",
-        light: "#5ce3fe",
-      },
-      secondary: {
-        main: "#f4faff",
-        dark: "#eae0d5",
-      },
-      background: {
-        default: "#29282b",
-      },
-    },
-    components: {
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            "& .MuiTabs-flexContainer": {
-              display: "flex",
-              flexDirection: "column", // For mobile versions
-              alignItems: "center",
-              ["@media (min-width:768px)"]: {
-                flexDirection: "row", // For desktop versions
-              },
-            },
-          },
-          // Overrides the styles for the selected tab indicator
-          indicator: {
-            backgroundColor: "transparent",
-          },
-        },
-      },
-      MuiTab: {
-        styleOverrides: {
-          // Overrides the styles for unselected tabs
-          root: {
-            color: "#E1DCEA", // Text color for unselected tabs
-            width: "100%",
-            ["@media (min-width:768px)"]: {
-              width: "fit-content",
-            },
-            "&.Mui-selected": {
-              color: "#000", // Text color for the selected tab
-              backgroundColor: "#fff", // Background of the selected tab
-            },
-          },
-        },
-      },
-    },
-  });
-
   return (
     <StarknetConfig
       chains={chains}

diff --git a/components/UI/theme.tsx b/components/UI/theme.tsx
diff --git a/styles/theme.ts b/styles/theme.ts
@@ -3,17 +3,56 @@ import { createTheme } from "@mui/material/styles";
 const theme = createTheme({
   palette: {
     primary: {
-      light: "#6affaf",
       main: "#6affaf",
-      dark: "#6affaf",
+      light: "#5ce3fe",
     },
     secondary: {
-      light: "#f4faff",
       main: "#f4faff",
-      dark: "#e1dcea",
+      dark: "#eae0d5",
     },
     background: {
-      default: "#101012",
+      default: "#29282b",
+    },
+  },
+  components: {
+    MuiModal: {
+      defaultProps: {
+        disableScrollLock: true,
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          "& .MuiTabs-flexContainer": {
+            display: "flex",
+            flexDirection: "column", // For mobile versions
+            alignItems: "center",
+            ["@media (min-width:768px)"]: {
+              flexDirection: "row", // For desktop versions
+            },
+          },
+        },
+        // Overrides the styles for the selected tab indicator
+        indicator: {
+          backgroundColor: "transparent",
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        // Overrides the styles for unselected tabs
+        root: {
+          color: "#E1DCEA", // Text color for unselected tabs
+          width: "100%",
+          ["@media (min-width:768px)"]: {
+            width: "fit-content",
+          },
+          "&.Mui-selected": {
+            color: "#000", // Text color for the selected tab
+            backgroundColor: "#fff", // Background of the selected tab
+          },
+        },
+      },
     },
   },
 });