mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +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>
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { Cancel } from '@mui/icons-material';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { styled } from '@mui/material';
|
|
|
|
interface IContextFormChipProps {
|
|
label: string;
|
|
description?: string;
|
|
onRemove: () => void;
|
|
}
|
|
|
|
const StyledContainer = styled('li')(({ theme }) => ({
|
|
display: 'grid',
|
|
lineHeight: 1.25,
|
|
gridTemplateColumns: '1fr auto',
|
|
alignSelf: 'start',
|
|
alignItems: 'start',
|
|
gap: theme.spacing(1),
|
|
padding: theme.spacing(1),
|
|
background: theme.palette.background.elevation2,
|
|
borderRadius: theme.shape.borderRadius,
|
|
wordBreak: 'break-word',
|
|
}));
|
|
|
|
const StyledLabel = styled('div')(({ theme }) => ({
|
|
fontSize: theme.fontSizes.smallBody,
|
|
}));
|
|
|
|
const StyledDescription = styled('div')(({ theme }) => ({
|
|
fontSize: theme.fontSizes.smallerBody,
|
|
color: theme.palette.neutral.main,
|
|
}));
|
|
|
|
const StyledButton = styled('button')(({ theme }) => ({
|
|
all: 'unset',
|
|
lineHeight: 0.1,
|
|
paddingTop: '1px',
|
|
display: 'block',
|
|
cursor: 'pointer',
|
|
'& svg': {
|
|
fontSize: theme.fontSizes.bodySize,
|
|
opacity: 0.5,
|
|
},
|
|
'&:hover svg, &:focus-visible svg': {
|
|
opacity: 0.75,
|
|
},
|
|
}));
|
|
|
|
export const ContextFormChip = ({
|
|
label,
|
|
description,
|
|
onRemove,
|
|
}: IContextFormChipProps) => {
|
|
return (
|
|
<StyledContainer>
|
|
<div>
|
|
<StyledLabel>{label}</StyledLabel>
|
|
<ConditionallyRender
|
|
condition={Boolean(description)}
|
|
show={() => (
|
|
<StyledDescription>{description}</StyledDescription>
|
|
)}
|
|
/>
|
|
</div>
|
|
<StyledButton onClick={onRemove}>
|
|
<Cancel titleAccess="Remove" />
|
|
</StyledButton>
|
|
</StyledContainer>
|
|
);
|
|
};
|