Refactor CustomButtonAccept

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

View File

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

View File

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

View File

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