Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-05 16:06:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CustomButtonAccept

Browse Source
This commit is contained in:
Nicola Benaglia 2025-05-30 08:58:17 +02:00
parent 2c9eee8404
commit 0b0f5e0c07
3 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -3848,8 +3848,8 @@ function App() {
}} }}
> >
<CustomButtonAccept <CustomButtonAccept
color="black" customColor="black"
bgColor={theme.palette.other.positive} customBgColor={theme.palette.other.positive}
sx={{ sx={{
minWidth: '102px', minWidth: '102px',
opacity: opacity:
@ -3885,8 +3885,8 @@ function App() {
</CustomButtonAccept> </CustomButtonAccept>
<CustomButtonAccept <CustomButtonAccept
color="black" customColor="black"
bgColor={theme.palette.other.danger} customBgColor={theme.palette.other.danger}
sx={{ sx={{
minWidth: '102px', minWidth: '102px',
}} }}

8
src/components/GlobalActions/JoinGroup.tsx
View File

@ -276,8 +276,8 @@ export const JoinGroup = () => {
disabled={isInGroup} disabled={isInGroup}
> >
<CustomButtonAccept <CustomButtonAccept
color="black" customColor="black"
bgColor={theme.palette.other.positive} customBgColor={theme.palette.other.positive}
sx={{ sx={{
minWidth: '102px', minWidth: '102px',
height: '45px', height: '45px',
@ -292,8 +292,8 @@ export const JoinGroup = () => {
</ButtonBase> </ButtonBase>
<CustomButtonAccept <CustomButtonAccept
color="black" customColor="black"
bgColor={theme.palette.other.danger} customBgColor={theme.palette.other.danger}
sx={{ sx={{
minWidth: '102px', minWidth: '102px',
height: '45px', height: '45px',

23
src/styles/App-styles.ts
View File

@ -134,20 +134,21 @@ export const CustomButton = styled(Box)(({ theme }) => ({
})); }));
interface CustomButtonProps { interface CustomButtonProps {
bgColor?: string; customBgColor?: string;
color?: string; customColor?: string;
} }
export const CustomButtonAccept = styled(Box)<CustomButtonProps>( export const CustomButtonAccept = styled(Box)<CustomButtonProps>((props) => {
({ bgColor, color, theme }) => ({ const { customBgColor, customColor, theme } = props;
return {
alignItems: 'center', alignItems: 'center',
backgroundColor: bgColor || theme.palette.background.default, backgroundColor: customBgColor || theme.palette.background.default,
borderColor: theme.palette.background.paper, borderColor: theme.palette.background.paper,
borderRadius: 5, borderRadius: 5,
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: '0.5px', borderWidth: '0.5px',
boxSizing: 'border-box', boxSizing: 'border-box',
color: color || theme.palette.background.default, color: customColor || theme.palette.background.default,
cursor: 'pointer', cursor: 'pointer',
display: 'inline-flex', display: 'inline-flex',
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))',
@ -163,16 +164,16 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
width: 'fit-content', width: 'fit-content',
'&:hover': { '&:hover': {
opacity: 1, opacity: 1,
backgroundColor: bgColor || theme.palette.background.default, backgroundColor: customBgColor || theme.palette.background.default,
color: color || '#fff', color: customColor || '#fff',
svg: { svg: {
path: { path: {
fill: color || '#fff', fill: customColor || '#fff',
}, },
}, },
}, },
}) };
); });
export const CustomInput = styled(TextField)(({ theme }) => ({ export const CustomInput = styled(TextField)(({ theme }) => ({
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,