mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-01 00:08:27 +01:00
23af7a3474
## About the changes Refactoring the colors for the light theme to be much easier to continue with dark mode This is the first step to finish dark mode https://linear.app/unleash/project/[low][s][alpha]-dark-mode-in-unleash-admin-ui-31b407d13c4b/1 This PR uses `main-theme` as a placeholder for `dark-theme` for now due to the new changes. Still need to set the correct values here. --------- Co-authored-by: Nuno Góis <github@nunogois.com>
33 lines
747 B
TypeScript
33 lines
747 B
TypeScript
import { styled } from '@mui/material';
|
|
|
|
interface ICodeboxProps {
|
|
text: string;
|
|
}
|
|
|
|
const StyledContainer = styled('div')(({ theme }) => ({
|
|
backgroundColor: theme.palette.codebox,
|
|
padding: theme.spacing(2),
|
|
borderRadius: theme.shape.borderRadiusMedium,
|
|
position: 'relative',
|
|
maxHeight: '500px',
|
|
overflow: 'auto',
|
|
}));
|
|
|
|
const StyledCode = styled('pre')(({ theme }) => ({
|
|
margin: 0,
|
|
wordBreak: 'break-all',
|
|
whiteSpace: 'pre-wrap',
|
|
color: theme.palette.common.white,
|
|
fontSize: theme.fontSizes.smallBody,
|
|
}));
|
|
|
|
const Codebox = ({ text }: ICodeboxProps) => {
|
|
return (
|
|
<StyledContainer>
|
|
<StyledCode>{text}</StyledCode>
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
export default Codebox;
|