Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-14 20:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove background property

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-12 12:34:28 +02:00
parent 8e6f7c0f39
commit 5452973773
1 changed files with 141 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
src/App-styles.ts
View File

@ -1,160 +1,157 @@
import { Typography, Box, TextField, InputLabel } from "@mui/material"; import { Typography, Box, TextField, InputLabel } from '@mui/material';
import { styled } from "@mui/system"; import { styled } from '@mui/system';
export const AppContainer = styled(Box)(({ theme }) => ({ export const AppContainer = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
width: "100vw", width: '100vw',
background: "rgba(39, 40, 44, 1)", height: '100vh',
height: "100vh", radius: '15px',
radius: "15px",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
overflow: 'hidden' overflow: 'hidden',
})); }));
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({ export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
width: "100%", width: '100%',
height: "100%", height: '100%',
justifyContent: "space-between", justifyContent: 'space-between',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
height: "100%", height: '100%',
width: "100%", width: '100%',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
width: "60px", width: '60px',
height: "100%", height: '100%',
background: "rgba(0, 0, 0, 0.1)",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
justifyContent: "flex-start", justifyContent: 'flex-start',
width: "100%px", width: '100%px',
height: "60px", height: '60px',
background: "rgba(0, 0, 0, 0.1)", padding: '20px',
padding: "20px",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const TextP = styled(Typography)(({ theme }) => ({ export const TextP = styled(Typography)(({ theme }) => ({
fontSize: "13px", fontSize: '13px',
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: 'Inter',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const TextItalic = styled("span")(({ theme }) => ({ export const TextItalic = styled('span')(({ theme }) => ({
fontSize: "13px", fontSize: '13px',
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: 'Inter',
fontStyle: "italic", fontStyle: 'italic',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const TextSpan = styled("span")(({ theme }) => ({ export const TextSpan = styled('span')(({ theme }) => ({
fontSize: "13px", fontSize: '13px',
fontFamily: "Inter", fontFamily: 'Inter',
fontWeight: 800, fontWeight: 800,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
})); }));
export const AddressBox = styled(Box)(({ theme }) => ({ export const AddressBox = styled(Box)(({ theme }) => ({
display: "flex", display: 'flex',
border: `1px solid ${ border: `1px solid ${
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(255, 255, 255, 0.5)" ? 'rgba(255, 255, 255, 0.5)'
: "rgba(0, 0, 0, 0.3)" : 'rgba(0, 0, 0, 0.3)'
}`, }`,
justifyContent: "space-between", justifyContent: 'space-between',
alignItems: "center", alignItems: 'center',
width: "auto", width: 'auto',
height: "25px", height: '25px',
padding: "5px 15px", padding: '5px 15px',
gap: "5px", gap: '5px',
borderRadius: "100px", borderRadius: '100px',
fontFamily: "Inter", fontFamily: 'Inter',
fontSize: "12px", fontSize: '12px',
fontWeight: 600, fontWeight: 600,
lineHeight: "14.52px", lineHeight: '14.52px',
textAlign: "left", textAlign: 'left',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
cursor: "pointer", cursor: 'pointer',
transition: "all 0.2s", transition: 'all 0.2s',
"&:hover": { '&:hover': {
backgroundColor: backgroundColor:
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(41, 41, 43, 1)" ? 'rgba(41, 41, 43, 1)'
: "rgba(240, 240, 240, 1)", : 'rgba(240, 240, 240, 1)',
color: theme.palette.mode === "dark" ? "#fff" : "#000", color: theme.palette.mode === 'dark' ? '#fff' : '#000',
"svg path": { 'svg path': {
fill: theme.palette.mode === "dark" ? "#fff" : "#000", fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
}, },
}, },
})); }));
export const CustomButton = styled(Box)(({ theme }) => ({ export const CustomButton = styled(Box)(({ theme }) => ({
boxSizing: "border-box", boxSizing: 'border-box',
padding: "15px 20px", padding: '15px 20px',
gap: "10px", gap: '10px',
border: `0.5px solid ${ border: `0.5px solid ${
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(255, 255, 255, 0.5)" ? 'rgba(255, 255, 255, 0.5)'
: "rgba(0, 0, 0, 0.3)" : 'rgba(0, 0, 0, 0.3)'
}`, }`,
filter: "drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))", filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
borderRadius: "5px", borderRadius: '5px',
display: "inline-flex", display: 'inline-flex',
justifyContent: "center", justifyContent: 'center',
alignItems: "center", alignItems: 'center',
width: "fit-content", width: 'fit-content',
minWidth: "160px", minWidth: '160px',
cursor: "pointer", cursor: 'pointer',
transition: "all 0.2s", transition: 'all 0.2s',
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: 'Inter',
textAlign: "center", textAlign: 'center',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
"&:hover": { '&:hover': {
backgroundColor: backgroundColor:
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(41, 41, 43, 1)" ? 'rgba(41, 41, 43, 1)'
: "rgba(230, 230, 230, 1)", : 'rgba(230, 230, 230, 1)',
color: "#fff", color: '#fff',
"svg path": { 'svg path': {
fill: "#fff", fill: '#fff',
}, },
}, },
})); }));
@ -166,39 +163,44 @@ interface CustomButtonProps {
export const CustomButtonAccept = styled(Box)<CustomButtonProps>( export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
({ bgColor, color, theme }) => ({ ({ bgColor, color, theme }) => ({
boxSizing: "border-box", boxSizing: 'border-box',
padding: "15px 20px", padding: '15px 20px',
gap: "10px", gap: '10px',
border: `0.5px solid ${ border: `0.5px solid ${
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(255, 255, 255, 0.5)" ? 'rgba(255, 255, 255, 0.5)'
: "rgba(0, 0, 0, 0.3)" : 'rgba(0, 0, 0, 0.3)'
}`, }`,
filter: "drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))", filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
borderRadius: 5, borderRadius: 5,
display: "inline-flex", display: 'inline-flex',
justifyContent: "center", justifyContent: 'center',
alignItems: "center", alignItems: 'center',
width: "fit-content", width: 'fit-content',
transition: "all 0.2s", transition: 'all 0.2s',
minWidth: 160, minWidth: 160,
cursor: "pointer", cursor: 'pointer',
fontWeight: 600, fontWeight: 600,
fontFamily: "Inter", fontFamily: 'Inter',
textAlign: "center", textAlign: 'center',
opacity: 0.7, opacity: 0.7,
// Color and backgroundColor with fallbacks // Color and backgroundColor with fallbacks
backgroundColor: bgColor || (theme.palette.mode === "dark" ? "#1d1d1d" : "#f5f5f5"), backgroundColor:
color: color || (theme.palette.mode === "dark" ? "#fff" : "#000"), bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
"&:hover": { '&:hover': {
opacity: 1, opacity: 1,
backgroundColor: bgColor || (theme.palette.mode === "dark" ? "rgba(41, 41, 43, 1)" : "rgba(230, 230, 230, 1)"), backgroundColor:
color: color || "#fff", bgColor ||
(theme.palette.mode === 'dark'
? 'rgba(41, 41, 43, 1)'
: 'rgba(230, 230, 230, 1)'),
color: color || '#fff',
svg: { svg: {
path: { path: {
fill: color || "#fff", fill: color || '#fff',
}, },
}, },
}, },
@ -206,53 +208,53 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
); );
export const CustomInput = styled(TextField)(({ theme }) => ({ export const CustomInput = styled(TextField)(({ theme }) => ({
width: "183px", // Adjust the width as needed width: '183px', // Adjust the width as needed
borderRadius: "5px", borderRadius: '5px',
// backgroundColor: "rgba(30, 30, 32, 1)", // backgroundColor: "rgba(30, 30, 32, 1)",
outline: "none", outline: 'none',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
input: { input: {
fontSize: 10, fontSize: 10,
fontFamily: "Inter", fontFamily: 'Inter',
fontWeight: 400, fontWeight: 400,
color: "white", color: 'white',
"&::placeholder": { '&::placeholder': {
fontSize: 16, fontSize: 16,
color: "rgba(255, 255, 255, 0.2)", color: 'rgba(255, 255, 255, 0.2)',
}, },
outline: "none", outline: 'none',
padding: "10px", padding: '10px',
}, },
"& .MuiOutlinedInput-root": { '& .MuiOutlinedInput-root': {
"& fieldset": { '& fieldset': {
border: "0.5px solid rgba(255, 255, 255, 0.5)", border: '0.5px solid rgba(255, 255, 255, 0.5)',
}, },
"&:hover fieldset": { '&:hover fieldset': {
border: "0.5px solid rgba(255, 255, 255, 0.5)", border: '0.5px solid rgba(255, 255, 255, 0.5)',
}, },
"&.Mui-focused fieldset": { '&.Mui-focused fieldset': {
border: "0.5px solid rgba(255, 255, 255, 0.5)", border: '0.5px solid rgba(255, 255, 255, 0.5)',
}, },
}, },
"& .MuiInput-underline:before": { '& .MuiInput-underline:before': {
borderBottom: "none", borderBottom: 'none',
}, },
"& .MuiInput-underline:hover:not(.Mui-disabled):before": { '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
borderBottom: "none", borderBottom: 'none',
}, },
"& .MuiInput-underline:after": { '& .MuiInput-underline:after': {
borderBottom: "none", borderBottom: 'none',
}, },
})); }));
export const CustomLabel = styled(InputLabel)(({ theme }) => ({ export const CustomLabel = styled(InputLabel)(({ theme }) => ({
fontWeight: 400, fontWeight: 400,
fontFamily: "Inter", fontFamily: 'Inter',
fontSize: "10px", fontSize: '10px',
lineHeight: "12px", lineHeight: '12px',
color: color:
theme.palette.mode === "dark" theme.palette.mode === 'dark'
? "rgba(255, 255, 255, 0.5)" ? 'rgba(255, 255, 255, 0.5)'
: "rgba(0, 0, 0, 0.5)", : 'rgba(0, 0, 0, 0.5)',
})); }));