Refactor

src/App-styles.ts

@@ -1,9 +1,4 @@
-import {
+import { Typography, Box, TextField, InputLabel } from "@mui/material";
-  Typography,
-  Box,
-  TextField,
-  InputLabel,
-} from "@mui/material";
 import { styled } from "@mui/system";
 
 export const AppContainer = styled(Box)(({ theme }) => ({
@@ -85,78 +80,99 @@ export const TextSpan = styled("span")(({ theme }) => ({
   color: theme.palette.text.primary,
 }));
 
-export const AddressBox = styled(Box)`
+export const AddressBox = styled(Box)(({ theme }) => ({
-  display: flex;
+  display: "flex",
-  border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
+  border: `1px solid ${
-  justify-content: space-between;
+    theme.palette.mode === "dark"
-  align-items: center;
+      ? "rgba(255, 255, 255, 0.5)"
-  width: auto;
+      : "rgba(0, 0, 0, 0.3)"
-  height: 25px;
+  }`,
-  padding: 5px 15px 5px 15px;
+  justifyContent: "space-between",
-  gap: 5px;
+  alignItems: "center",
-  border-radius: 100px;
+  width: "auto",
-  font-family: Inter;
+  height: "25px",
-  font-size: 12px;
+  padding: "5px 15px",
-  font-weight: 600;
+  gap: "5px",
-  line-height: 14.52px;
+  borderRadius: "100px",
-  text-align: left;
+  fontFamily: "Inter",
-  color: var(--50-white, rgba(255, 255, 255, 0.5));
+  fontSize: "12px",
-  cursor: pointer;
+  fontWeight: 600,
-  transition: all 0.2s;
+  lineHeight: "14.52px",
-  &:hover {
+  textAlign: "left",
-    background-color: rgba(41, 41, 43, 1);
+  backgroundColor: theme.palette.background.default,
-    color: white;
+  color: theme.palette.text.primary,
-    svg path {
+  cursor: "pointer",
-      fill: white; // Fill color changes to white on hover
+  transition: "all 0.2s",
-    }
-  }
-`;
 
-export const CustomButton = styled(Box)`
+  "&:hover": {
-  /* Authenticate */
+    backgroundColor:
+      theme.palette.mode === "dark"
+        ? "rgba(41, 41, 43, 1)"
+        : "rgba(240, 240, 240, 1)",
+    color: theme.palette.mode === "dark" ? "#fff" : "#000",
 
-  box-sizing: border-box;
+    "svg path": {
+      fill: theme.palette.mode === "dark" ? "#fff" : "#000",
+    },
+  },
+}));
 
-  padding: 15px 20px;
+export const CustomButton = styled(Box)(({ theme }) => ({
-  gap: 10px;
+  boxSizing: "border-box",
+  padding: "15px 20px",
+  gap: "10px",
 
-  border: 0.5px solid rgba(255, 255, 255, 0.5);
+  border: `0.5px solid ${
-  filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
+    theme.palette.mode === "dark"
-  border-radius: 5px;
+      ? "rgba(255, 255, 255, 0.5)"
+      : "rgba(0, 0, 0, 0.3)"
+  }`,
+  filter: "drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))",
+  borderRadius: "5px",
 
-  display: inline-flex;
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center",
 
-  justify-content: center;
+  width: "fit-content",
-  align-items: center;
+  minWidth: "160px",
+  cursor: "pointer",
+  transition: "all 0.2s",
+
+  fontWeight: 600,
+  fontFamily: "Inter",
+  textAlign: "center",
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+
+  "&:hover": {
+    backgroundColor:
+      theme.palette.mode === "dark"
+        ? "rgba(41, 41, 43, 1)"
+        : "rgba(230, 230, 230, 1)",
+    color: "#fff",
+
+    "svg path": {
+      fill: "#fff",
+    },
+  },
+}));
 
-  width: fit-content;
-  transition: all 0.2s;
-  color: black;
-  min-width: 160px;
-  cursor: pointer;
-  font-weight: 600;
-  font-family: Inter;
-  color: white;
-  text-align: center;
-  &:hover {
-    background-color: rgba(41, 41, 43, 1);
-    color: white;
-    svg path {
-      fill: white; // Fill color changes to white on hover
-    }
-  }
-`;
 interface CustomButtonProps {
   bgColor?: string;
   color?: string;
 }
 
 export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
-  ({ bgColor, color }) => ({
+  ({ bgColor, color, theme }) => ({
     boxSizing: "border-box",
     padding: "15px 20px",
     gap: "10px",
-    border: "0.5px solid rgba(255, 255, 255, 0.5)",
+    border: `0.5px solid ${
+      theme.palette.mode === "dark"
+        ? "rgba(255, 255, 255, 0.5)"
+        : "rgba(0, 0, 0, 0.3)"
+    }`,
     filter: "drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))",
     borderRadius: 5,
     display: "inline-flex",
@@ -170,17 +186,18 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
     fontFamily: "Inter",
     textAlign: "center",
     opacity: 0.7,
-    // Use the passed-in props or fallback defaults
+
-    backgroundColor: bgColor || "transparent",
+    // Color and backgroundColor with fallbacks
-    color: color || "white",
+    backgroundColor: bgColor || (theme.palette.mode === "dark" ? "#1d1d1d" : "#f5f5f5"),
+    color: color || (theme.palette.mode === "dark" ? "#fff" : "#000"),
 
     "&:hover": {
       opacity: 1,
-      backgroundColor: bgColor ? bgColor : "rgba(41, 41, 43, 1)", // fallback hover bg
+      backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"),
-      color: color || "white",
+      color: color || "#fff",
       svg: {
         path: {
-          fill: color || "white",
+          fill: color || "#fff",
         },
       },
     },
@@ -226,10 +243,14 @@ export const CustomInput = styled(TextField)({
   },
 });
 
-export const CustomLabel = styled(InputLabel)`
+export const CustomLabel = styled(InputLabel)(({ theme }) => ({
-  font-weight: 400;
+  fontWeight: 400,
-  font-family: Inter;
+  fontFamily: "Inter",
-  font-size: 10px;
+  fontSize: "10px",
-  line-height: 12px;
+  lineHeight: "12px",
-  color: rgba(255, 255, 255, 0.5);
+  color:
-`;
+    theme.palette.mode === "dark"
+      ? "rgba(255, 255, 255, 0.5)"
+      : "rgba(0, 0, 0, 0.5)",
+}));
+

src/components/Apps/Apps-styles.tsx

@@ -358,7 +358,6 @@ export const AppsCategoryInfoLabel = styled(Typography)(({ theme }) => ({
   fontSize: "12px",
   fontWeight: 700,
   lineHeight: 1.2,
-  color: "#8D8F93",
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));
@@ -367,7 +366,6 @@ export const AppsCategoryInfoValue = styled(Typography)(({ theme }) => ({
   fontSize: "12px",
   fontWeight: 500,
   lineHeight: 1.2,
-  color: "#8D8F93",
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
 }));

src/main.tsx

@@ -7,123 +7,6 @@ import { MessageQueueProvider } from "./MessageQueueContext.tsx";
 import { RecoilRoot } from "recoil";
 import { ThemeProvider } from "./components/Theme/ThemeContext.tsx";
 
-// const darkTheme: ThemeOptions = {
-//   palette: {
-//     primary: {
-//       main: "#232428", // Primary color (e.g., used for buttons, headers, etc.)
-//     },
-//     secondary: {
-//       main: "#232428", // Secondary color
-//     },
-//     background: {
-//       default: "#27282c", // Default background color
-//       paper: "#1d1d1d", // Paper component background (for dropdowns, dialogs, etc.)
-//     },
-//     text: {
-//       primary: "#ffffff", // White as the primary text color
-//       secondary: "#b0b0b0", // Light gray for secondary text
-//       disabled: "#808080", // Gray for disabled text
-//     },
-//     action: {
-//       // disabledBackground: 'set color of background here',
-//       disabled: "rgb(255 255 255 / 70%)",
-//     },
-//   },
-//   typography: {
-//     fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif', // Font family
-//     h1: {
-//       color: "#ffffff", // White color for h1 elements
-//     },
-//     h2: {
-//       color: "#ffffff", // White color for h2 elements
-//     },
-//     body1: {
-//       color: "#ffffff", // Default body text color
-//     },
-//     body2: {
-//       color: "#b0b0b0", // Lighter text for body2, often used for secondary text
-//     },
-//   },
-//   components: {
-//     MuiOutlinedInput: {
-//       styleOverrides: {
-//         root: {
-//           ".MuiOutlinedInput-notchedOutline": {
-//             borderColor: "white", // ⚪ Default outline color
-//           },
-//         },
-//       },
-//     },
-//     MuiSelect: {
-//       styleOverrides: {
-//         icon: {
-//           color: "white", // ✅ Caret (dropdown arrow) color
-//         },
-//       },
-//     },
-//   },
-// }
-
-// const lightTheme: ThemeOptions = {
-//   palette: {
-//     primary: {
-//       main: "#1976d2", // Primary color for buttons, headers, etc.
-//     },
-//     secondary: {
-//       main: "#ff4081", // Secondary color with a vibrant pink touch
-//     },
-//     background: {
-//       default: "#f5f5f5", // Light background color for the main UI
-//       paper: "#ffffff", // Background color for Paper components (dialogs, dropdowns, etc.)
-//     },
-//     text: {
-//       primary: "#212121", // Dark text for contrast and readability
-//       secondary: "#616161", // Medium gray for secondary text
-//       disabled: "#9e9e9e", // Light gray for disabled text
-//     },
-//     action: {
-//       disabled: "rgb(0 0 0 / 50%)", // Color for disabled actions
-//     },
-//   },
-//   typography: {
-//     fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif', // Font family for consistency
-//     h1: {
-//       color: "#ffffff", // Dark color for main headings (h1)
-//     },
-//     h2: {
-//       color: "#ffffff", // Dark color for subheadings (h2)
-//     },
-//     body1: {
-//       color: "#ffffff", // Default body text color
-//     },
-//     body2: {
-//       color: "#ffffff", // Lighter text for secondary content
-//     },
-//   },
-//   components: {
-//     MuiOutlinedInput: {
-//       styleOverrides: {
-//         root: {
-//           ".MuiOutlinedInput-notchedOutline": {
-//             borderColor: "#ffffff", // Darker outline for better input field visibility
-//           },
-//         },
-//       },
-//     },
-//     MuiSelect: {
-//       styleOverrides: {
-//         icon: {
-//           color: "#212121", // Dark dropdown arrow icon for contrast
-//         },
-//       },
-//     },
-//   },
-// };
-
-// const theme = createTheme(lightTheme);
-
-// export default theme;
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <>
     <ThemeProvider>