mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
f381718fd6
Based on this article: https://mui.com/material-ui/guides/minimizing-bundle-size/ importing from `'@mui/icons-material'` instead of specifying the actual path to the icon like `import Delete from '@mui/icons-material/Delete';` can be up to six time slower. This change changes all named imports in Unleash referencing the `@mui/icons-material` to default imports. This reduced the amount of modules we had to process when building the frontend from 15206 to 4746 Before: <img width="1016" alt="Skjermbilde 2024-03-11 kl 14 19 58" src="https://github.com/Unleash/unleash/assets/16081982/f137d24a-6557-4183-a40f-f62a33524520"> After: <img width="1237" alt="Skjermbilde 2024-03-11 kl 14 20 32" src="https://github.com/Unleash/unleash/assets/16081982/05a27d6a-2c3f-4409-9862-7188ab4b9c72"> Build time locally decreased by around 50% Before: <img width="1504" alt="Skjermbilde 2024-03-11 kl 14 31 45" src="https://github.com/Unleash/unleash/assets/16081982/bc931559-b022-47ed-9f8f-c87401578518"> After: <img width="1219" alt="Skjermbilde 2024-03-11 kl 14 27 00" src="https://github.com/Unleash/unleash/assets/16081982/3c3a8d6b-576d-45c3-aa40-cc5f95d9df2b">
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { styled } from '@mui/material';
|
|
import ErrorOutlineRounded from '@mui/icons-material/ErrorOutlineRounded';
|
|
import { Sticky } from 'component/common/Sticky/Sticky';
|
|
|
|
const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
|
|
color: theme.palette.error.main,
|
|
height: '20px',
|
|
width: '20px',
|
|
marginRight: theme.spacing(1),
|
|
}));
|
|
|
|
const StyledDiv = styled(Sticky)(({ theme }) => ({
|
|
display: 'flex',
|
|
fontSize: theme.fontSizes.smallBody,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
color: theme.palette.error.contrastText,
|
|
backgroundColor: theme.palette.error.light,
|
|
height: '65px',
|
|
borderBottom: `1px solid ${theme.palette.error.border}`,
|
|
whiteSpace: 'pre-wrap',
|
|
zIndex: theme.zIndex.sticky - 100,
|
|
}));
|
|
|
|
const MaintenanceBanner = () => {
|
|
return (
|
|
<StyledDiv>
|
|
<StyledErrorRoundedIcon />
|
|
<b>Maintenance Mode! </b>
|
|
<p>
|
|
During maintenance mode, any changes made will not be saved and
|
|
you may receive an error. We apologize for any inconvenience
|
|
this may cause.
|
|
</p>
|
|
</StyledDiv>
|
|
);
|
|
};
|
|
|
|
export default MaintenanceBanner;
|