Bind color and background to selected theme

src/App-styles.ts

@@ -1,4 +1,9 @@
-import { Typography, Box, TextField, InputLabel } from "@mui/material";
+import {
+  Typography,
+  Box,
+  TextField,
+  InputLabel,
+} from "@mui/material";
 import { styled } from "@mui/system";
 
 export const AppContainer = styled(Box)(({ theme }) => ({
@@ -6,12 +11,11 @@ export const AppContainer = styled(Box)(({ theme }) => ({
   alignItems: "center",
   flexDirection: "column",
   width: "100vw",
-  background: "rgba(39, 40, 44, 1)",
   height: "100vh",
   radius: "15px",
+  overflow: 'hidden',
   backgroundColor: theme.palette.background.default,
   color: theme.palette.text.primary,
-  overflow: 'hidden'
 }));
 
 export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
@@ -81,70 +85,44 @@ export const TextSpan = styled("span")(({ theme }) => ({
   color: theme.palette.text.primary,
 }));
 
-export const AddressBox = styled(Box)(({ theme }) => ({
+export const AddressBox = styled(Box)`
-  display: "flex",
+  display: flex;
-  border: `1px solid ${
+  border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
-    theme.palette.mode === "dark"
+  justify-content: space-between;
-      ? "rgba(255, 255, 255, 0.5)"
+  align-items: center;
-      : "rgba(0, 0, 0, 0.3)"
+  width: auto;
-  }`,
+  height: 25px;
-  justifyContent: "space-between",
+  padding: 5px 15px 5px 15px;
-  alignItems: "center",
+  gap: 5px;
-  width: "auto",
+  border-radius: 100px;
-  height: "25px",
+  font-family: Inter;
-  padding: "5px 15px",
+  font-size: 12px;
-  gap: "5px",
+  font-weight: 600;
-  borderRadius: "100px",
+  line-height: 14.52px;
-  fontFamily: "Inter",
+  text-align: left;
-  fontSize: "12px",
+  color: var(--50-white, rgba(255, 255, 255, 0.5));
-  fontWeight: 600,
+  cursor: pointer;
-  lineHeight: "14.52px",
+  transition: all 0.2s;
-  textAlign: "left",
+  &:hover {
-  backgroundColor: theme.palette.background.default,
+    background-color: rgba(41, 41, 43, 1);
-  color: theme.palette.text.primary,
+    color: white;
-  cursor: "pointer",
+    svg path {
-  transition: "all 0.2s",
+      fill: white; // Fill color changes to white on hover
+    }
+  }
+`;
 
-  "&:hover": {
+export const CustomButton = styled(Box)`
-    backgroundColor:
+  /* Authenticate */
-      theme.palette.mode === "dark"
-        ? "rgba(41, 41, 43, 1)"
-        : "rgba(240, 240, 240, 1)",
-    color: theme.palette.mode === "dark" ? "#fff" : "#000",
 
-    "svg path": {
+  box-sizing: border-box;
-      fill: theme.palette.mode === "dark" ? "#fff" : "#000",
-    },
-  },
-}));
 
-export const CustomButton = styled(Box)(({ theme }) => ({
+  padding: 15px 20px;
-  boxSizing: "border-box",
+  gap: 10px;
-  padding: "15px 20px",
-  gap: "10px",
 
-  border: `0.5px solid ${
+  border: 0.5px solid rgba(255, 255, 255, 0.5);
-    theme.palette.mode === "dark"
+  filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
-      ? "rgba(255, 255, 255, 0.5)"
+  border-radius: 5px;
-      : "rgba(0, 0, 0, 0.3)"
-  }`,
-  filter: "drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))",
-  borderRadius: "5px",
-
-  display: "inline-flex",
-  justifyContent: "center",
-  alignItems: "center",
-
-  width: "fit-content",
-  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:
@@ -194,18 +172,30 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
 
     "&:hover": {
       opacity: 1,
+<<<<<<< HEAD
       backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"),
       color: color || "#fff",
       svg: {
         path: {
           fill: color || "#fff",
+=======
+      backgroundColor: bgColor ? bgColor : "rgba(41, 41, 43, 1)", // fallback hover bg
+      color: color || "white",
+      svg: {
+        path: {
+          fill: color || "white",
+>>>>>>> ffb39b3 (Bind color and background to selected theme)
         },
       },
     },
   })
 );
 
+<<<<<<< HEAD
 export const CustomInput = styled(TextField)(({ theme }) => ({
+=======
+export const CustomInput = styled(TextField)({
+>>>>>>> ffb39b3 (Bind color and background to selected theme)
   width: "183px", // Adjust the width as needed
   borderRadius: "5px",
   // backgroundColor: "rgba(30, 30, 32, 1)",
@@ -246,6 +236,7 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
   },
 }));
 
+<<<<<<< HEAD
 export const CustomLabel = styled(InputLabel)(({ theme }) => ({
   fontWeight: 400,
   fontFamily: "Inter",
@@ -257,3 +248,12 @@ export const CustomLabel = styled(InputLabel)(({ theme }) => ({
       : "rgba(0, 0, 0, 0.5)",
 }));
 
+=======
+export const CustomLabel = styled(InputLabel)`
+  font-weight: 400;
+  font-family: Inter;
+  font-size: 10px;
+  line-height: 12px;
+  color: rgba(255, 255, 255, 0.5);
+`;
+>>>>>>> ffb39b3 (Bind color and background to selected theme)

src/components/Apps/Apps-styles.tsx

@@ -358,6 +358,7 @@ 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,
 }));
@@ -366,6 +367,7 @@ 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,
 }));