mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01: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>
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { useTheme } from '@mui/material/styles';
|
|
import { Cloud } from '@mui/icons-material';
|
|
|
|
interface IEnvironmentIcon {
|
|
enabled: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
|
|
const theme = useTheme();
|
|
|
|
const title = enabled ? 'Environment enabled' : 'Environment disabled';
|
|
|
|
const container = {
|
|
backgroundColor: enabled
|
|
? theme.palette.primary.light
|
|
: theme.palette.neutral.border,
|
|
borderRadius: '50%',
|
|
width: '28px',
|
|
height: '28px',
|
|
minWidth: '28px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: theme.spacing(1),
|
|
};
|
|
|
|
const icon = {
|
|
fill: theme.palette.common.white,
|
|
width: '16px',
|
|
height: '16px',
|
|
};
|
|
|
|
return (
|
|
<div style={container} className={className}>
|
|
<Cloud style={icon} titleAccess={title} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EnvironmentIcon;
|