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