mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
705462f0cf
## About the changes Creating the first version of the Dark theme Refactor: colors variables Refactor: use theme variable instead - this change will help us to use MuiCssBaseline, and we can use classes directly for easy customization when we can't identify MUI classes Refactor: adjusting some files components - i’ve touched also the structure of some files, not only the colors variables (but only to adjust the style, not functionality) Fix: dark mode persistence on refresh (by Nuno) Feat: dark mode sees light logos, and light mode sees dark logos (by Nuno) --------- Co-authored-by: Nuno Góis <github@nunogois.com>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { Button, styled } from '@mui/material';
|
|
|
|
const StyledTab = styled(Button)<{ selected: boolean }>(
|
|
({ theme, selected }) => ({
|
|
'&.MuiButton-root': {
|
|
cursor: 'pointer',
|
|
height: theme.spacing(6.5),
|
|
border: 0,
|
|
backgroundColor: selected
|
|
? theme.palette.background.paper
|
|
: 'transparent',
|
|
borderLeft: `${theme.spacing(1)} solid ${
|
|
selected ? theme.palette.background.alternative : 'transparent'
|
|
}`,
|
|
borderRadius: theme.shape.borderRadiusMedium,
|
|
justifyContent: 'start',
|
|
transition: 'background-color 0.2s ease',
|
|
color: theme.palette.text.primary,
|
|
textAlign: 'left',
|
|
padding: theme.spacing(2, 4),
|
|
fontSize: theme.fontSizes.bodySize,
|
|
fontWeight: selected
|
|
? theme.fontWeight.bold
|
|
: theme.fontWeight.medium,
|
|
lineHeight: 1.2,
|
|
},
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.neutral.light,
|
|
},
|
|
'&.Mui-disabled': {
|
|
pointerEvents: 'auto',
|
|
},
|
|
justifyContent: 'space-between',
|
|
})
|
|
);
|
|
|
|
interface IVerticalTabProps {
|
|
label: string;
|
|
selected?: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const VerticalTab = ({
|
|
label,
|
|
selected,
|
|
onClick,
|
|
}: IVerticalTabProps) => (
|
|
<StyledTab
|
|
selected={Boolean(selected)}
|
|
onClick={onClick}
|
|
disableRipple
|
|
disableElevation
|
|
disableFocusRipple
|
|
disableTouchRipple
|
|
fullWidth
|
|
>
|
|
{label}
|
|
</StyledTab>
|
|
);
|