From 7c46a67183db6123c7ce85241f3b9490c9a2b33b Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 5 Apr 2025 21:18:08 +0200 Subject: [PATCH] Refactor --- src/App-styles.ts | 171 ++++++++++++++++------------ src/components/Apps/Apps-styles.tsx | 2 - src/main.tsx | 117 ------------------- 3 files changed, 96 insertions(+), 194 deletions(-) diff --git a/src/App-styles.ts b/src/App-styles.ts index 3581347..d3f2903 100644 --- a/src/App-styles.ts +++ b/src/App-styles.ts @@ -1,9 +1,4 @@ -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 }) => ({ @@ -85,78 +80,99 @@ export const TextSpan = styled("span")(({ theme }) => ({ color: theme.palette.text.primary, })); -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 - } - } -`; +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 CustomButton = styled(Box)` - /* Authenticate */ + "&:hover": { + 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; - gap: 10px; +export const CustomButton = styled(Box)(({ theme }) => ({ + boxSizing: "border-box", + padding: "15px 20px", + gap: "10px", - 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; + 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; + display: "inline-flex", + justifyContent: "center", + alignItems: "center", - justify-content: center; - align-items: 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: + 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)( - ({ 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)( fontFamily: "Inter", textAlign: "center", opacity: 0.7, - // Use the passed-in props or fallback defaults - backgroundColor: bgColor || "transparent", - color: color || "white", + + // Color and backgroundColor with fallbacks + 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 - color: color || "white", + backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"), + 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)` - font-weight: 400; - font-family: Inter; - font-size: 10px; - line-height: 12px; - color: rgba(255, 255, 255, 0.5); -`; +export const CustomLabel = styled(InputLabel)(({ theme }) => ({ + fontWeight: 400, + fontFamily: "Inter", + fontSize: "10px", + lineHeight: "12px", + color: + theme.palette.mode === "dark" + ? "rgba(255, 255, 255, 0.5)" + : "rgba(0, 0, 0, 0.5)", +})); + diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 912c6d4..631186b 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/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, })); diff --git a/src/main.tsx b/src/main.tsx index b26cb01..881d4c1 100644 --- a/src/main.tsx +++ b/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( <>