From 74649d332543db2718dfabba28afe1b86e8540fe Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 5 Apr 2025 21:09:58 +0200 Subject: [PATCH] Bind color and background to selected theme --- src/App-styles.ts | 126 ++++++++++++++-------------- src/components/Apps/Apps-styles.tsx | 2 + 2 files changed, 65 insertions(+), 63 deletions(-) diff --git a/src/App-styles.ts b/src/App-styles.ts index 6100951..a5f387e 100644 --- a/src/App-styles.ts +++ b/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 }) => ({ - display: "flex", - border: `1px solid ${ - theme.palette.mode === "dark" - ? "rgba(255, 255, 255, 0.5)" - : "rgba(0, 0, 0, 0.3)" - }`, - justifyContent: "space-between", - alignItems: "center", - width: "auto", - height: "25px", - padding: "5px 15px", - gap: "5px", - borderRadius: "100px", - fontFamily: "Inter", - fontSize: "12px", - fontWeight: 600, - lineHeight: "14.52px", - textAlign: "left", - backgroundColor: theme.palette.background.default, - color: theme.palette.text.primary, - cursor: "pointer", - transition: "all 0.2s", +export const AddressBox = styled(Box)` + display: flex; + border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); + justify-content: space-between; + align-items: center; + width: auto; + height: 25px; + padding: 5px 15px 5px 15px; + gap: 5px; + border-radius: 100px; + font-family: Inter; + font-size: 12px; + font-weight: 600; + line-height: 14.52px; + text-align: left; + color: var(--50-white, rgba(255, 255, 255, 0.5)); + cursor: pointer; + transition: all 0.2s; + &:hover { + background-color: rgba(41, 41, 43, 1); + color: white; + svg path { + fill: white; // Fill color changes to white on hover + } + } +`; - "&:hover": { - backgroundColor: - theme.palette.mode === "dark" - ? "rgba(41, 41, 43, 1)" - : "rgba(240, 240, 240, 1)", - color: theme.palette.mode === "dark" ? "#fff" : "#000", +export const CustomButton = styled(Box)` + /* Authenticate */ - "svg path": { - fill: theme.palette.mode === "dark" ? "#fff" : "#000", - }, - }, -})); + box-sizing: border-box; -export const CustomButton = styled(Box)(({ theme }) => ({ - boxSizing: "border-box", - padding: "15px 20px", - gap: "10px", + padding: 15px 20px; + gap: 10px; - 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: "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, + border: 0.5px solid rgba(255, 255, 255, 0.5); + filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3)); + border-radius: 5px; "&:hover": { backgroundColor: @@ -194,18 +172,30 @@ export const CustomButtonAccept = styled(Box)( "&: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) diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 631186b..912c6d4 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/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, }));