mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-05-08 18:57:53 +00:00
Refactor
This commit is contained in:
Nicola Benaglia
parent
88fcbe8ad2
commit
7c46a67183
@ -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)<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: 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)",
|
||||
}));
|
||||
|
||||
|
||||
@ -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,
|
||||
}));
|
||||
|
||||
117
src/main.tsx
117
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user