mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-19 17:52:45 +02: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>
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Box, styled, useTheme } from '@mui/material';
|
|
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
|
|
|
|
interface IStrategySeparatorProps {
|
|
text: 'AND' | 'OR';
|
|
}
|
|
|
|
const StyledContent = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(0.75, 1),
|
|
color: theme.palette.text.primary,
|
|
fontSize: theme.fontSizes.smallerBody,
|
|
backgroundColor: theme.palette.background.elevation2,
|
|
borderRadius: theme.shape.borderRadius,
|
|
position: 'absolute',
|
|
zIndex: theme.zIndex.fab,
|
|
top: '50%',
|
|
left: theme.spacing(2),
|
|
transform: 'translateY(-50%)',
|
|
lineHeight: 1,
|
|
}));
|
|
|
|
const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundColor: theme.palette.seen.primary,
|
|
borderRadius: theme.shape.borderRadiusLarge,
|
|
padding: theme.spacing(0.75, 1.5),
|
|
}));
|
|
|
|
export const StrategySeparator = ({ text }: IStrategySeparatorProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: theme.spacing(text === 'AND' ? 1 : 1.5),
|
|
position: 'relative',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<ConditionallyRender
|
|
condition={text === 'AND'}
|
|
show={() => <StyledContent>{text}</StyledContent>}
|
|
elseShow={() => (
|
|
<StyledCenteredContent>{text}</StyledCenteredContent>
|
|
)}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|