Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

refactor: light theme colors (#3252)

Browse Source 
## 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>
This commit is contained in:
NicolaeUnleash 2023-03-06 12:58:36 +02:00 committed by GitHub
parent 62a1e20d83
commit 23af7a3474
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
113 changed files with 1160 additions and 785 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
View File

@ -8,7 +8,7 @@ const StyledInfoBox = styled('aside')(({ theme }) => ({
padding: theme.spacing(4),
height: '100%',
borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
}));
const StyledTitle = styled(Typography)(({ theme }) => ({
@ -26,7 +26,7 @@ const StyledInfoLabel = styled(Typography)(({ theme }) => ({
const StyledDivider = styled(Divider)(({ theme }) => ({
margin: `${theme.spacing(2.5)} 0`,
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
}));
interface IBillingInformationProps {
instanceStatus: IInstanceStatus;

2
frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
View File

@ -53,7 +53,7 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
maxWidth: theme.spacing(60),
padding: theme.spacing(3),
backgroundColor: theme.palette.neutral.light,
color: theme.palette.grey[900],
color: theme.palette.text.primary,
fontSize: theme.fontSizes.smallBody,
borderRadius: theme.shape.borderRadiusMedium,
marginBottom: theme.spacing(2),

2
frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
View File

@ -15,7 +15,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
const StyledGroupCard = styled('aside')(({ theme }) => ({
padding: theme.spacing(2.5),
height: '100%',
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusLarge,
boxShadow: theme.boxShadows.card,
display: 'flex',

2
frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
View File

@ -15,7 +15,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(3),
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusLarge,
}));

2
frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx
View File

@ -62,7 +62,7 @@ const createInstanceChartOptions = (
tooltip: {
backgroundColor: theme.palette.background.paper,
bodyColor: theme.palette.text.primary,
titleColor: theme.palette.grey[700],
titleColor: theme.palette.action.active,
borderColor: theme.palette.primary.main,
borderWidth: 1,
padding: 10,

2
frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx
View File

@ -71,7 +71,7 @@ const StyledRoleRadio = styled(Radio)(({ theme }) => ({
const StyledSecondaryContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(3),
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadiusMedium,
marginTop: theme.spacing(4),
marginBottom: theme.spacing(2),

2
frontend/src/component/admin/users/InviteLink/InviteLink.tsx
View File

@ -174,7 +174,7 @@ export const InviteLink: VFC<ICreateInviteLinkProps> = () => {
borderRadius: theme =>
`${theme.shape.borderRadiusMedium}px`,
backgroundColor: theme =>
theme.palette.secondaryContainer,
theme.palette.background.elevation2,
}}
>
<Typography variant="body2" fontWeight="bold">

2
frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
View File

@ -57,7 +57,7 @@ export const InviteLinkBar: VFC = () => {
return (
<Box
sx={{
backgroundColor: 'tertiary.background',
backgroundColor: 'background.paper',
py: 2,
px: 4,
mb: 2,

2
frontend/src/component/admin/users/LinkField/LinkField.tsx
View File

@ -37,7 +37,7 @@ export const LinkField = ({ inviteLink, small }: ILinkFieldProps) => {
return (
<Box
sx={{
backgroundColor: theme => theme.palette.secondaryContainer,
backgroundColor: theme => theme.palette.background.elevation2,
py: 4,
px: 4,
borderRadius: theme => `${theme.shape.borderRadius}px`,

4
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
View File

@ -48,11 +48,11 @@ const StyledSingleChangeBox = styled(Box, {
borderColor:
$hasConflict || $isInConflictFeature
? theme.palette.warning.border
: theme.palette.dividerAlternative,
: theme.palette.divider,
borderTopColor:
($hasConflict || $isAfterWarning) && !$isInConflictFeature
? theme.palette.warning.border
: theme.palette.dividerAlternative,
: theme.palette.divider,
})
);

2
frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
View File

@ -35,7 +35,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
borderColor: theme =>
conflict
? theme.palette.warning.border
: theme.palette.tertiary.main,
: theme.palette.divider,
borderBottom: 'none',
overflow: 'hidden',
})}

2
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
View File

@ -20,7 +20,7 @@ const CommentPaper = styled(Paper)(({ theme }) => ({
const CommentHeader = styled(Box)(({ theme }) => ({
display: 'flex',
borderBottom: '1px solid',
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
paddingBottom: theme.spacing(1.5),
}));

2
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
View File

@ -26,7 +26,7 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
export const StyledCard = styled(Card)(({ theme }) => ({
padding: theme.spacing(0.75, 1.5),
backgroundColor: theme.palette.tertiary.light,
backgroundColor: theme.palette.background.elevation2,
}));
export const StyledAvatar = styled(Avatar)(({ theme }) => ({

18
frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
View File

@ -29,26 +29,26 @@ const resolveBorder = (state: ChangeRequestState, theme: Theme) => {
return `2px solid ${theme.palette.primary.main}`;
}
return `1px solid ${theme.palette.tertiary.main}`;
return `1px solid ${theme.palette.divider}`;
};
const resolveIconColors = (state: ChangeRequestState, theme: Theme) => {
if (state === 'Approved') {
return {
bgColor: theme.palette.success.main!,
svgColor: theme.palette.tertiary.background,
svgColor: theme.palette.background.paper,
};
}
if (state === 'Applied') {
return {
bgColor: theme.palette.primary.main!,
svgColor: theme.palette.tertiary.background,
svgColor: theme.palette.background.paper,
};
}
return {
bgColor: theme.palette.tableHeaderBackground,
bgColor: theme.palette.background.elevation2,
svgColor: theme.palette.neutral.main!,
};
};
@ -117,8 +117,8 @@ const Approved = () => {
<StyledFlexAlignCenterBox>
<StyledSuccessIcon />
<Box>
<StyledReviewTitle color={theme.palette.success.main}>
Changed approved
<StyledReviewTitle color={theme.palette.success.dark}>
Changes approved
</StyledReviewTitle>
<Typography>
One approving review from requested approvers
@ -131,7 +131,7 @@ const Approved = () => {
<StyledFlexAlignCenterBox>
<StyledSuccessIcon />
<Box>
<StyledReviewTitle color={theme.palette.success.main}>
<StyledReviewTitle color={theme.palette.success.dark}>
Changes are ready to be applied
</StyledReviewTitle>
</Box>
@ -152,7 +152,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
<StyledFlexAlignCenterBox>
<StyledWarningIcon />
<Box>
<StyledReviewTitle color={theme.palette.warning.main}>
<StyledReviewTitle color={theme.palette.warning.dark}>
Review required
</StyledReviewTitle>
<Typography>
@ -166,7 +166,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
<StyledFlexAlignCenterBox>
<StyledWarningIcon />
<StyledReviewTitle color={theme.palette.warning.main}>
<StyledReviewTitle color={theme.palette.warning.dark}>
Apply changes is blocked
</StyledReviewTitle>
</StyledFlexAlignCenterBox>

2
frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
View File

@ -59,7 +59,7 @@ export const Separator = () => (
sx={{
marginLeft: 1.5,
marginRight: 1.5,
color: 'dividerAlternative',
color: 'divider',
}}
>
|

2
frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
View File

@ -38,7 +38,7 @@ export const EnvironmentChangeRequest: FC<{
padding: 3,
border: '2px solid',
mb: 5,
borderColor: theme => theme.palette.secondaryContainer,
borderColor: theme => theme.palette.divider,
borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
}}
>

2
frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
View File

@ -6,7 +6,7 @@ import { PageHeader } from '../../../common/PageHeader/PageHeader';
const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
marginLeft: '0.3rem',
color: theme.palette.grey[700],
color: theme.palette.action.active,
}));
const StyledHeaderHint = styled('div')(({ theme }) => ({

2
frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
View File

@ -8,7 +8,7 @@ export const useStyles = makeStyles()(theme => ({
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
'& fieldset': {
borderColor: theme.palette.grey[300],
borderColor: theme.palette.divider,
borderLeftColor: 'transparent',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {

4
frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
View File

@ -31,7 +31,7 @@ const StyledIcon = styled('div', {
})<{ $disabled: boolean }>(({ theme, $disabled }) => ({
background: $disabled
? theme.palette.primary.light
: theme.palette.featureSegmentSearchBackground,
: theme.palette.primary.main,
height: '48px',
width: '48px',
display: 'flex',
@ -40,7 +40,7 @@ const StyledIcon = styled('div', {
paddingLeft: 6,
borderTopLeftRadius: '40px',
borderBottomLeftRadius: '40px',
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
}));
const StyledAutocomplete = styled(Autocomplete)({

6
frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
View File

@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps {
}
const StyledBatch = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.checkmarkBadge,
backgroundColor: theme.palette.primary.main,
width: '75px',
height: '75px',
borderRadius: '50px',
@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({
}));
const StyledClose = styled(Close)(({ theme }) => ({
color: theme.palette.tertiary.background,
color: theme.palette.background.paper,
width: '35px',
height: '35px',
}));
const StyledCheck = styled(Check)(({ theme }) => ({
color: theme.palette.tertiary.background,
color: theme.palette.background.paper,
width: '35px',
height: '35px',
}));

2
frontend/src/component/common/Codebox/Codebox.tsx
View File

@ -17,7 +17,7 @@ const StyledCode = styled('pre')(({ theme }) => ({
margin: 0,
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
color: theme.palette.formSidebarTextColor,
color: theme.palette.common.white,
fontSize: theme.fontSizes.smallBody,
}));

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
View File

@ -50,9 +50,9 @@ const resolveContextDefinition = (
const StyledForm = styled('div')({ padding: 0, margin: 0, width: '100%' });
const StyledAccordion = styled(Accordion)(({ theme }) => ({
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
backgroundColor: theme.palette.constraintAccordion.editBackground,
backgroundColor: theme.palette.background.elevation1,
boxShadow: 'none',
margin: 0,
'& .expanded': {

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
View File

@ -3,7 +3,7 @@ import { styled } from '@mui/material';
const StyledHeader = styled('h3')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize,
fontWeight: theme.typography.fontWeightMedium,
fontWeight: theme.typography.fontWeightRegular,
marginTop: theme.spacing(2),
marginBottom: theme.spacing(0.5),
}));

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
View File

@ -12,6 +12,6 @@ export const useStyles = makeStyles()(theme => ({
description: {
lineHeight: 1.33,
fontSize: theme.fontSizes.smallerBody,
color: theme.palette.grey[700],
color: theme.palette.action.active,
},
}));

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
View File

@ -6,12 +6,12 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
minWidth: '28px',
maxWidth: '28px',
height: 'auto',
backgroundColor: theme.palette.tertiary.background,
backgroundColor: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
padding: '0 1px 0',
marginRight: '1rem',
'&:hover': {
background: theme.palette.tertiary.contrast[300],
background: theme.palette.background.application,
},
[theme.breakpoints.between(1101, 1365)]: {
marginRight: '0.5rem',

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
View File

@ -46,7 +46,7 @@ const StyledHelpWrapper = styled(Tooltip)(({ theme }) => ({
}));
const StyledHelp = styled(HelpOutline)(({ theme }) => ({
fill: theme.palette.tertiary.dark,
fill: theme.palette.action.active,
[theme.breakpoints.down(860)]: {
display: 'none',
},
@ -60,7 +60,7 @@ const StyledConstraintLabel = styled('p')(({ theme }) => ({
const StyledAddCustomLabel = styled('div')(({ theme }) => ({
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
color: theme.palette.text.secondary,
color: theme.palette.text.primary,
display: 'flex',
}));

4
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
View File

@ -27,9 +27,9 @@ interface IConstraintAccordionViewProps {
}
const StyledAccordion = styled(Accordion)(({ theme }) => ({
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
backgroundColor: theme.palette.constraintAccordion.background,
backgroundColor: theme.palette.background.paper,
boxShadow: 'none',
margin: 0,

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
View File

@ -5,7 +5,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
export const StyledIconWrapperBase = styled('div')<{
prefix?: boolean;
}>(({ theme }) => ({
backgroundColor: theme.palette.grey[200],
backgroundColor: theme.palette.background.elevation2,
width: 24,
display: 'flex',
alignItems: 'center',

2
frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
View File

@ -11,7 +11,7 @@ interface IConstraintOperatorProps {
const StyledContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(0.5, 1.5),
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.constraintAccordion.operatorBackground,
backgroundColor: theme.palette.background.elevation2,
lineHeight: 1.25,
}));

2
frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
View File

@ -64,7 +64,7 @@ const StyledMenuItem = styled(MenuItem, {
left: 0,
right: 0,
borderTop: '1px solid',
borderTopColor: theme.palette.tertiary.contrast,
borderTopColor: theme.palette.divider,
},
}
: {}

2
frontend/src/component/common/Dialogue/Dialogue.tsx
View File

@ -21,7 +21,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
padding: theme.spacing(3.5, 6),
fontWeight: theme.fontWeight.medium,
}));

17
frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
View File

@ -1,16 +1,10 @@
import { Chip, styled } from '@mui/material';
import { Badge } from 'component/common/Badge/Badge';
interface IStatusChip {
stale: boolean;
showActive?: boolean;
}
const StyledChip = styled(Chip)(({ theme }) => ({
background: 'transparent',
border: `1px solid ${theme.palette.primary.main}`,
color: theme.palette.primary.main,
}));
export const FeatureStatusChip = ({
stale,
showActive = true,
@ -26,12 +20,9 @@ export const FeatureStatusChip = ({
return (
<div data-loading style={{ marginLeft: '8px' }}>
<StyledChip
color="primary"
variant="outlined"
title={title}
label={value}
/>
<Badge color={stale ? 'neutral' : 'secondary'} title={title}>
{value}
</Badge>
</div>
);
};

16
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

@ -46,7 +46,7 @@ const StyledContainer = styled('section', {
const StyledRelativeDiv = styled('div')(({ theme }) => relative);
const StyledFormContent = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.formBackground,
backgroundColor: theme.palette.background.paper,
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(6),
@ -73,7 +73,7 @@ const StyledSidebarDivider = styled(Divider)(({ theme }) => ({
}));
const StyledSubtitle = styled('h2')(({ theme }) => ({
color: theme.palette.formSidebarTextColor,
color: theme.palette.common.white,
marginBottom: theme.spacing(2),
display: 'flex',
justifyContent: 'space-between',
@ -83,7 +83,7 @@ const StyledSubtitle = styled('h2')(({ theme }) => ({
}));
const StyledIcon = styled(FileCopy)(({ theme }) => ({
fill: theme.palette.text.tertiaryContrast,
fill: theme.palette.primary.contrastText,
}));
const StyledMobileGuidanceContainer = styled('div')(() => ({
@ -105,11 +105,11 @@ const StyledMobileGuidanceButton = styled(IconButton)(() => ({
}));
const StyledInfoIcon = styled(Info)(({ theme }) => ({
fill: theme.palette.text.tertiaryContrast,
fill: theme.palette.primary.contrastText,
}));
const StyledSidebar = styled('aside')(({ theme }) => ({
backgroundColor: theme.palette.formSidebar,
backgroundColor: theme.palette.background.sidebar,
padding: theme.spacing(4),
flexGrow: 0,
flexShrink: 0,
@ -124,7 +124,7 @@ const StyledSidebar = styled('aside')(({ theme }) => ({
}));
const StyledDescription = styled('p')(({ theme }) => ({
color: theme.palette.formSidebarTextColor,
color: theme.palette.common.white,
zIndex: 1,
position: 'relative',
}));
@ -137,11 +137,11 @@ const StyledLinkContainer = styled('div')(({ theme }) => ({
const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
marginRight: theme.spacing(1),
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
}));
const StyledDocumentationLink = styled('a')(({ theme }) => ({
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
display: 'block',
'&:hover': {
textDecoration: 'none',

4
frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx
View File

@ -5,7 +5,7 @@ const StyledIndicator = styled('div')(({ style, theme }) => ({
width: '25px',
height: '25px',
borderRadius: '50%',
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -29,7 +29,7 @@ export const GuidanceIndicator: FC<IGuidanceIndicatorProps> = ({
const defaults = { backgroundColor: theme.palette.primary.main };
if (type === 'secondary') {
defaults.backgroundColor = theme.palette.tertiary.dark;
defaults.backgroundColor = theme.palette.text.disabled;
}
return (

4
frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
View File

@ -46,13 +46,13 @@ const StyledHtmlTooltip = styled(
color: theme.palette.text.primary,
fontWeight: theme.fontWeight.medium,
maxWidth: 'inherit',
border: `1px solid ${theme.palette.lightBorder}`,
border: `1px solid ${theme.palette.divider}`,
maxHeight,
fontSize,
},
[`& .${tooltipClasses.arrow}`]: {
'&:before': {
border: `1px solid ${theme.palette.lightBorder}`,
border: `1px solid ${theme.palette.divider}`,
},
color: theme.palette.background.paper,
},

2
frontend/src/component/common/NotFound/NotFound.tsx
View File

@ -12,7 +12,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(4),
position: 'fixed',
inset: 0,
backgroundColor: theme.palette.text.tertiaryContrast,
backgroundColor: theme.palette.primary.contrastText,
width: '100%',
}));

2
frontend/src/component/common/Notifications/Notification.tsx
View File

@ -38,7 +38,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
cursor: 'pointer',
margin: theme.spacing(2, 0),
'&:not(:last-child)': {
borderBottom: `2px solid ${theme.palette.tertiary.contrast}`,
borderBottom: `2px solid ${theme.palette.divider}`,
},
width: '100%',
}));

2
frontend/src/component/common/PageHeader/PageHeader.tsx
View File

@ -15,7 +15,7 @@ import { usePageTitle } from 'hooks/usePageTitle';
const StyledDivider = styled(Divider)(({ theme }) => ({
height: '100%',
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
width: '1px',
display: 'inline-block',
marginLeft: theme.spacing(2),

2
frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
View File

@ -18,7 +18,7 @@ const PercentageCircle = ({
transform: 'rotate(-90deg)',
height: size,
width: size,
background: theme.palette.grey[200],
background: theme.palette.background.elevation2,
};
// The percentage circle used to be drawn by CSS with a conic-gradient,

4
frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
View File

@ -10,7 +10,9 @@ const PremiumFeatureWrapper = styled(Box, {
flexDirection: 'column',
alignItems: tooltip ? 'start' : 'center',
textAlign: tooltip ? 'left' : 'center',
backgroundColor: tooltip ? 'transparent' : theme.palette.secondaryContainer,
backgroundColor: tooltip
? 'transparent'
: theme.palette.background.elevation2,
borderRadius: tooltip ? 0 : theme.shape.borderRadiusLarge,
padding: tooltip ? theme.spacing(1, 0.5) : theme.spacing(7.5, 1),
}));

2
frontend/src/component/common/Search/Search.tsx
View File

@ -101,7 +101,7 @@ export const Search = ({
<SearchIcon
sx={{
mr: 1,
color: theme => theme.palette.inactiveIcon,
color: theme => theme.palette.action.disabled,
}}
/>
<StyledInputBase

2
frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
View File

@ -12,7 +12,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
}));
const StyledCode = styled('span')(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
color: theme.palette.text.primary,
padding: theme.spacing(0, 0.5),
borderRadius: theme.spacing(0.5),

2
frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
View File

@ -9,7 +9,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
}));
const StyledCode = styled('span')(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
color: theme.palette.text.primary,
padding: theme.spacing(0, 0.5),
borderRadius: theme.spacing(0.5),

4
frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
View File

@ -38,12 +38,12 @@ const StyledFilterList = styled(FilterList)(({ theme }) => ({
}));
const StyledDivider = styled(Divider)(({ theme }) => ({
border: `1px dashed ${theme.palette.dividerAlternative}`,
border: `1px dashed ${theme.palette.divider}`,
margin: theme.spacing(1.5, 0),
}));
const StyledCode = styled('span')(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
color: theme.palette.text.primary,
padding: theme.spacing(0, 0.5),
borderRadius: theme.spacing(0.5),

2
frontend/src/component/common/SegmentItem/SegmentItem.tsx
View File

@ -21,7 +21,7 @@ interface ISegmentItemProps {
}
const StyledAccordion = styled(Accordion)(({ theme }) => ({
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
backgroundColor: theme.palette.background.paper,
boxShadow: 'none',

2
frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
View File

@ -99,7 +99,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
/>
<Icon
sx={{
fill: theme => theme.palette.inactiveIcon,
fill: theme => theme.palette.action.disabled,
}}
/>
<StringTruncator

5
frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
View File

@ -9,7 +9,7 @@ const StyledContent = styled('div')(({ theme }) => ({
padding: theme.spacing(0.75, 1),
color: theme.palette.text.primary,
fontSize: theme.fontSizes.smallerBody,
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadius,
position: 'absolute',
zIndex: theme.zIndex.fab,
@ -23,8 +23,7 @@ const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: theme.palette.activityIndicators.primary,
border: `1px solid ${theme.palette.primary.border}`,
backgroundColor: theme.palette.seen.primary,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(0.75, 1.5),
}));

2
frontend/src/component/common/TabNav/TabNav/TabNav.tsx
View File

@ -51,7 +51,7 @@ export const TabNav = ({
sx={{
backgroundColor: theme => theme.palette.background.paper,
borderBottom: '1px solid',
borderBottomColor: theme => theme.palette.grey[300],
borderBottomColor: theme => theme.palette.divider,
borderRadius: 0,
}}
>

2
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
View File

@ -22,7 +22,7 @@ export const StyledTableCell = styled(TableCell, {
...(isSortable && {
padding: 0,
'&:hover, &:focus': {
backgroundColor: theme.palette.tableHeaderHover,
backgroundColor: theme.palette.table.headerHover,
'& svg': {
color: 'inherit',
},

4
frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
View File

@ -36,7 +36,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
<KeyboardArrowDown
sx={theme => ({
...iconStyle(theme),
color: theme.palette.tableHeaderColor,
color: theme.palette.table.headerColor,
})}
className={className}
fontSize="inherit"
@ -46,7 +46,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
<KeyboardArrowUp
sx={theme => ({
...iconStyle(theme),
color: theme.palette.tableHeaderColor,
color: theme.palette.table.headerColor,
})}
className={className}
fontSize="inherit"

23
frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
View File

@ -1,5 +1,5 @@
import { VFC } from 'react';
import { styled, TableHead, TableRow } from '@mui/material';
import { TableHead, TableRow } from '@mui/material';
import { HeaderGroup } from 'react-table';
import { CellSortable } from './CellSortable/CellSortable';
@ -9,23 +9,6 @@ interface ISortableTableHeaderProps {
flex?: boolean;
}
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'& > th': {
height: theme.shape.tableRowHeightCompact,
border: 0,
backgroundColor: theme.palette.tableHeaderBackground,
color: theme.palette.tableHeaderColor,
'&:first-of-type': {
borderTopLeftRadius: theme.shape.borderRadiusMedium,
borderBottomLeftRadius: theme.shape.borderRadiusMedium,
},
'&:last-of-type': {
borderTopRightRadius: theme.shape.borderRadiusMedium,
borderBottomRightRadius: theme.shape.borderRadiusMedium,
},
},
}));
export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
headerGroups,
className,
@ -33,7 +16,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
}) => (
<TableHead className={className}>
{headerGroups.map(headerGroup => (
<StyledTableRow {...headerGroup.getHeaderGroupProps()}>
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: HeaderGroup) => {
const content = column.render('Header');
@ -64,7 +47,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
</CellSortable>
);
})}
</StyledTableRow>
</TableRow>
))}
</TableHead>
);

2
frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx
View File

@ -9,7 +9,7 @@ const StyledContainer = styled(Box)(({ theme }) => ({
}));
const StyledDivider = styled(Divider)(({ theme }) => ({
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
height: theme.spacing(3),
margin: theme.spacing(0, 2),
}));

16
frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
View File

@ -30,21 +30,21 @@ const useFeatureColor = () => {
return (unit?: string): string => {
switch (unit) {
case 'second':
return theme.palette.activityIndicators.recent;
return theme.palette.seen.recent;
case 'minute':
return theme.palette.activityIndicators.recent;
return theme.palette.seen.recent;
case 'hour':
return theme.palette.activityIndicators.recent;
return theme.palette.seen.recent;
case 'day':
return theme.palette.activityIndicators.recent;
return theme.palette.seen.recent;
case 'week':
return theme.palette.activityIndicators.inactive;
return theme.palette.seen.inactive;
case 'month':
return theme.palette.activityIndicators.abandoned;
return theme.palette.seen.abandoned;
case 'year':
return theme.palette.activityIndicators.abandoned;
return theme.palette.seen.abandoned;
default:
return theme.palette.activityIndicators.unknown;
return theme.palette.seen.unknown;
}
};
};

2
frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
View File

@ -8,6 +8,6 @@ export const useStyles = makeStyles()(theme => ({
alignItems: 'center',
},
icon: {
color: theme.palette.inactiveIcon,
color: theme.palette.action.disabled,
},
}));

2
frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
View File

@ -16,7 +16,7 @@ const StyledContainer = styled('li')(({ theme }) => ({
alignItems: 'start',
gap: theme.spacing(1),
padding: theme.spacing(1),
background: theme.palette.secondaryContainer,
background: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadius,
wordBreak: 'break-word',
}));

2
frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
View File

@ -59,7 +59,7 @@ const StyledInput = styled(Input)(({ theme }) => ({
const StyledSecondaryContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(3),
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadiusMedium,
marginTop: theme.spacing(4),
}));

8
frontend/src/component/events/EventDiff/EventDiff.tsx
View File

@ -18,10 +18,10 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
const theme = useTheme();
const styles: Record<string, CSSProperties> = {
A: { color: theme.palette.code.edited }, // array edited
E: { color: theme.palette.code.edited }, // edited
D: { color: theme.palette.code.diffSub }, // deleted
N: { color: theme.palette.code.diffAdd }, // added
A: { color: theme.palette.eventLog.edited }, // array edited
E: { color: theme.palette.eventLog.edited }, // edited
D: { color: theme.palette.eventLog.diffSub }, // deleted
N: { color: theme.palette.eventLog.diffAdd }, // added
};
const diffs =

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
View File

@ -57,7 +57,7 @@ const StyledHr = styled('hr')(({ theme }) => ({
height: '1px',
margin: theme.spacing(2, 0),
border: 'none',
background: theme.palette.tertiary.light,
background: theme.palette.background.elevation2,
}));
const StyledButtons = styled('div')(({ theme }) => ({

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
View File

@ -26,7 +26,7 @@ const StyledIcon = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.palette.inactiveIcon,
color: theme.palette.action.disabled,
'& svg': {
width: theme.spacing(2.5),

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

@ -48,7 +48,7 @@ const StyledCard = styled(Link)(({ theme }) => ({
lineHeight: 1.25,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
borderRadius: theme.spacing(1),
'&:hover, &:focus': {
borderColor: theme.palette.primary.main,

4
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
View File

@ -22,8 +22,8 @@ const StyledChip = styled('span')(({ theme }) => ({
paddingBlockStart: theme.spacing(0.5),
paddingBlockEnd: theme.spacing(0.5),
borderRadius: '100rem',
background: theme.palette.featureStrategySegmentChipBackground,
color: theme.palette.text.tertiaryContrast,
background: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}));
const StyledButton = styled('button')(({ theme }) => ({

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
View File

@ -30,7 +30,7 @@ const StyledAnd = styled('p')(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
lineHeight: 1,
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
}));
export const FeatureStrategySegmentList = ({

2
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
View File

@ -22,7 +22,7 @@ export const createChartOptions = (
tooltip: {
backgroundColor: 'white',
bodyColor: theme.palette.text.primary,
titleColor: theme.palette.grey[700],
titleColor: theme.palette.action.active,
borderColor: theme.palette.primary.main,
borderWidth: 1,
padding: 10,

3
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
View File

@ -31,6 +31,9 @@ const StyledItem = styled('li')(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
'& > [aria-pressed=true]:hover': {
backgroundColor: theme.palette.primary.light,
},
}));
export const FeatureMetricsChips = ({

2
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
View File

@ -39,7 +39,7 @@ export const FeatureMetricsContent = ({
borderTop={1}
pt={2}
mt={3}
borderColor={theme.palette.grey[200]}
borderColor={theme.palette.divider}
>
<LazyFeatureMetricsChart
metrics={metrics}

2
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
View File

@ -37,7 +37,7 @@ const StyledText = styled('p')(({ theme }) => ({
padding: theme.spacing(2, 0, 0, 0),
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: theme.palette.dividerAlternative,
borderTopColor: theme.palette.divider,
fontSize: theme.fontSizes.smallerBody,
color: theme.palette.text.secondary,
}));

36
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
View File

@ -16,6 +16,7 @@ import {
parseParameterStrings,
} from 'utils/parseParameter';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Badge } from 'component/common/Badge/Badge';
interface IStrategyExecutionProps {
strategy: IFeatureStrategyPayload;
@ -29,7 +30,7 @@ const NoItems: VFC = () => (
const StyledValueContainer = styled(Box)(({ theme }) => ({
padding: theme.spacing(2, 3),
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
}));
@ -72,13 +73,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
/>
</Box>
<div>
<Chip
color="success"
variant="outlined"
size="small"
label={`${percentage}%`}
/>{' '}
of your base{' '}
<Badge color="success">{percentage}%</Badge> of
your base{' '}
{constraints.length > 0
? 'who match constraints'
: ''}{' '}
@ -167,12 +163,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
<div>
{nameItem}
{isSetTo}
<Chip
color="success"
variant="outlined"
size="small"
label={`${percentage}%`}
/>
<Badge color="success">{percentage}%</Badge>
</div>
</StyledValueContainer>
) : null;
@ -187,16 +178,15 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
text={name}
/>
{isSetTo}
<Chip
<Badge
color={
parameters[name] === 'true'
? 'success'
: 'error'
}
variant="outlined"
size="small"
label={parameters[name]}
/>
>
{parameters[name]}
</Badge>
</StyledValueContainer>
) : null;
@ -266,13 +256,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
strategy.name === 'default' && (
<>
<StyledValueContainer sx={{ width: '100%' }}>
The standard strategy is{' '}
<Chip
variant="outlined"
size="small"
color="success"
label="ON"
/>{' '}
The standard strategy is <Badge color="success">ON</Badge>{' '}
for all users.
</StyledValueContainer>
</>

14
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
View File

@ -3,7 +3,6 @@ import {
AccordionDetails,
AccordionSummary,
Box,
Chip,
styled,
} from '@mui/material';
import { ExpandMore } from '@mui/icons-material';
@ -22,6 +21,7 @@ import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
import { Badge } from 'component/common/Badge/Badge';
interface IFeatureOverviewEnvironmentProps {
env: IFeatureEnvironment;
@ -55,7 +55,7 @@ const StyledAccordionDetails = styled(AccordionDetails, {
shouldForwardProp: prop => prop !== 'enabled',
})<{ enabled: boolean }>(({ theme, enabled }) => ({
padding: theme.spacing(3),
background: theme.palette.secondaryContainer,
background: theme.palette.background.elevation2,
borderBottomLeftRadius: theme.shape.borderRadiusLarge,
borderBottomRightRadius: theme.shape.borderRadiusLarge,
borderBottom: `4px solid ${
@ -162,12 +162,12 @@ const FeatureOverviewEnvironment = ({
<ConditionallyRender
condition={!env.enabled}
show={
<Chip
size="small"
variant="outlined"
label="Disabled"
<Badge
color="neutral"
sx={{ ml: 1 }}
/>
>
Disabled
</Badge>
}
/>
</StyledHeaderTitle>

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
View File

@ -40,7 +40,7 @@ const StyledInfoParagraph = styled('p')(({ theme }) => ({
}));
const StyledIcon = styled(FiberManualRecord)(({ theme }) => ({
fill: theme.palette.standaloneBackground,
fill: theme.palette.background.application,
height: '75px',
width: '75px',
[theme.breakpoints.down(500)]: {

4
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
View File

@ -14,7 +14,7 @@ const SeparatorContainer = styled('div')(({ theme }) => ({
transform: 'translateY(-50%)',
height: 2,
width: '100%',
backgroundColor: theme.palette.dividerAlternative,
backgroundColor: theme.palette.divider,
},
}));
@ -22,7 +22,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize,
textAlign: 'center',
padding: '0 1rem',
background: theme.palette.secondaryContainer,
background: theme.palette.background.elevation2,
position: 'relative',
maxWidth: '80%',
color: theme.palette.text.primary,

16
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -10,8 +10,8 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
color: theme.palette.text.tertiaryContrast,
backgroundColor: theme.palette.featureMetaData,
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.background.sidebar,
display: 'flex',
flexDirection: 'column',
maxWidth: '350px',
@ -54,7 +54,7 @@ const StyledBodyItem = styled('span')(({ theme }) => ({
const StyledDescriptionContainer = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
}));
const FeatureOverviewMetaData = () => {
@ -74,7 +74,7 @@ const FeatureOverviewMetaData = () => {
marginRight: theme.spacing(2),
height: '40px',
width: '40px',
fill: theme.palette.text.tertiaryContrast,
fill: theme.palette.primary.contrastText,
})}
/>{' '}
<StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
@ -101,8 +101,8 @@ const FeatureOverviewMetaData = () => {
>
<Edit
sx={theme => ({
color: theme.palette.text
.tertiaryContrast,
color: theme.palette.primary
.contrastText,
})}
/>
</PermissionIconButton>
@ -124,8 +124,8 @@ const FeatureOverviewMetaData = () => {
>
<Edit
sx={theme => ({
color: theme.palette.text
.tertiaryContrast,
color: theme.palette.primary
.contrastText,
})}
/>
</PermissionIconButton>

4
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
View File

@ -8,9 +8,7 @@ const StyledVisibilityToggle = styled(IconButton, {
})<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
marginLeft: 'auto',
marginRight: theme.spacing(-1),
color: visibilityOff
? theme.palette.neutral.main
: theme.palette.tertiary.main,
color: visibilityOff ? theme.palette.neutral.main : theme.palette.divider,
'&:hover': {
color: theme.palette.neutral.main,
},

3
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx
View File

@ -27,9 +27,6 @@ const StyledTagContainer = styled('div')(({ theme }) => ({
const StyledChip = styled(Chip)(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
'.MuiChip-deleteIcon': {
color: theme.palette.neutral.main,
},
}));
const StyledDivider = styled(Divider)(({ theme }) => ({

2
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
View File

@ -8,7 +8,7 @@ import { Badge } from 'component/common/Badge/Badge';
const StyledCard = styled('div')(({ theme }) => ({
padding: theme.spacing(3),
borderRadius: theme.shape.borderRadiusLarge,
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
marginBottom: theme.spacing(3),
},

2
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -68,7 +68,7 @@ const StyledToolbarContainer = styled('div')({
const StyledSeparator = styled('div')(({ theme }) => ({
width: '100%',
backgroundColor: theme.palette.tertiary.light,
backgroundColor: theme.palette.background.elevation2,
height: '1px',
}));

2
frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
View File

@ -43,7 +43,7 @@ const StyledClose = styled('div')({
const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
fontSize: '1.5rem',
color: theme.palette.inactiveIcon,
color: theme.palette.action.disabled,
}));
export const FeedbackCES = ({ state }: IFeedbackCESProps) => {

4
frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
View File

@ -41,7 +41,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
display: 'grid',
justifyContent: 'center',
alignItems: 'center',
background: theme.palette.grey[300],
background: theme.palette.divider,
width: '3rem',
height: '3rem',
borderRadius: '10rem',
@ -53,7 +53,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
'& input:checked + span': {
fontWeight: theme.fontWeight.bold,
background: theme.palette.primary.main,
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
},
'& input:focus-visible + span': {
outline: '2px solid',

18
frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
View File

@ -29,7 +29,7 @@ exports[`FeedbackCESForm 1`] = `
Very difficult
</span>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -41,7 +41,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -53,7 +53,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -65,7 +65,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -77,7 +77,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -89,7 +89,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -101,7 +101,7 @@ exports[`FeedbackCESForm 1`] = `
</span>
</label>
<label
class="css-112g122"
class="css-ruqihc"
>
<input
name="score"
@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1qvtpcv-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1nhioic-MuiInputBase-root-MuiOutlinedInput-root"
>
<textarea
aria-invalid="false"
@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
hidden=""
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-w5plom-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1bqn98c-MuiButtonBase-root-MuiButton-root"
disabled=""
tabindex="-1"
type="submit"

2
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -28,7 +28,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
overflow: 'auto', // prevent margin collapsing
flex: 1,
width: '100%',
backgroundColor: theme.palette.contentWrapper,
backgroundColor: theme.palette.background.application,
position: 'relative',
}));

2
frontend/src/component/menu/Footer/Footer.tsx
View File

@ -11,7 +11,7 @@ const StyledFooter = styled('footer')(({ theme }) => ({
width: '100%',
flexGrow: 1,
zIndex: 100,
backgroundColor: theme.palette.footerBackground,
backgroundColor: theme.palette.background.paper,
}));
const StyledList = styled(List)({

72
frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
View File

@ -53,7 +53,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -224,7 +224,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -334,7 +334,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -498,7 +498,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -669,7 +669,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -779,7 +779,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div
@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
disabled={false}
>
<div

2
frontend/src/component/menu/Header/Header.tsx
View File

@ -42,7 +42,7 @@ import { useThemeMode } from 'hooks/useThemeMode';
import { Notifications } from 'component/common/Notifications/Notifications';
const StyledHeader = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.headerBackground,
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(1),
boxShadow: 'none',
position: 'relative',

4
frontend/src/component/playground/Playground/Playground.tsx
View File

@ -159,7 +159,7 @@ export const Playground: VFC<{}> = () => {
>
<Box
sx={{
background: theme.palette.playgroundBackground,
background: theme.palette.background.elevation2,
borderBottomLeftRadius: theme.shape.borderRadiusMedium,
}}
>
@ -170,7 +170,7 @@ export const Playground: VFC<{}> = () => {
py: 3,
mb: 4,
mt: 2,
background: theme.palette.playgroundBackground,
background: theme.palette.background.elevation2,
transition: 'width 0.4s ease',
minWidth: matches ? 'auto' : '500px',
width: formWidth,

8
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
View File

@ -25,7 +25,7 @@ const StyledEditorHeader = styled('aside')(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
border: `1px solid ${theme.palette.lightBorder}`,
border: `1px solid ${theme.palette.divider}`,
borderBottom: 'none',
}));
@ -52,7 +52,7 @@ const EditorStatusOk = () => {
return (
<StyledEditorStatusContainer
style={{
color: theme.palette.text.tertiaryContrast,
color: theme.palette.success.contrastText,
backgroundColor: theme.palette.success.main,
}}
>
@ -67,7 +67,7 @@ const EditorStatusError = () => {
return (
<StyledEditorStatusContainer
style={{
color: theme.palette.text.tertiaryContrast,
color: theme.palette.error.contrastText,
backgroundColor: theme.palette.error.main,
}}
>
@ -117,7 +117,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
extensions={[json()]}
onChange={onCodeFieldChange}
style={{
border: `1px solid ${theme.palette.lightBorder}`,
border: `1px solid ${theme.palette.divider}`,
borderTop: 'none',
borderBottomLeftRadius: theme.shape.borderRadiusMedium,
borderBottomRightRadius: theme.shape.borderRadiusMedium,

4
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx
View File

@ -49,7 +49,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
variant="fullWidth"
sx={{
mb: 2,
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
borderStyle: 'dashed',
}}
/>
@ -60,7 +60,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
sx={{
mt: 3,
mb: 2,
borderColor: theme.palette.dividerAlternative,
borderColor: theme.palette.divider,
}}
/>
<Box

2
frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
View File

@ -9,7 +9,7 @@ interface IContextBannerProps {
}
const StyledContextFieldList = styled('ul')(({ theme }) => ({
color: colors.black,
color: theme.palette.text.primary,
listStyleType: 'none',
padding: theme.spacing(2),
}));

4
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
View File

@ -12,7 +12,7 @@ interface FeatureResultInfoPopoverCellProps {
const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({
alignItems: 'flex-end',
color: theme.palette.tertiary.main,
color: theme.palette.divider,
}));
export const FeatureResultInfoPopoverCell = ({
@ -48,7 +48,7 @@ export const FeatureResultInfoPopoverCell = ({
maxWidth: '100%',
height: 'auto',
overflowY: 'auto',
backgroundColor: theme.palette.tertiary.light,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadius,
}),
}}

2
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
View File

@ -45,7 +45,7 @@ export const FeatureStrategyItem = ({
<StrategyExecution
strategyResult={strategy}
input={input}
percentageFill={theme.palette.tertiary.light}
percentageFill={theme.palette.background.elevation2}
/>
</StrategyItemContainer>
);

2
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
View File

@ -13,7 +13,7 @@ const StyledWrapper = styled(Box)(({ theme }) => ({
width: '100%',
padding: theme.spacing(2, 3),
borderRadius: theme.shape.borderRadiusMedium,
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',

2
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
View File

@ -16,7 +16,7 @@ const StyledDivContainer = styled('div', {
width: '100%',
padding: theme.spacing(2, 3),
borderRadius: theme.shape.borderRadiusMedium,
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',

2
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx
View File

@ -5,5 +5,5 @@ export const StyledBoxSummary = styled(Box)(({ theme }) => ({
height: 'auto',
padding: theme.spacing(2, 3),
borderRadius: theme.shape.borderRadiusMedium,
border: `1px solid ${theme.palette.dividerAlternative}`,
border: `1px solid ${theme.palette.divider}`,
}));

13
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
View File

@ -1,7 +1,7 @@
import { Fragment, VFC } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
import { Chip, styled } from '@mui/material';
import { styled } from '@mui/material';
import { PlaygroundRequestSchema, PlaygroundStrategySchema } from 'openapi';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
@ -10,6 +10,7 @@ import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecution
import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
import { formattedStrategyNames } from 'utils/strategyNames';
import { StyledBoxSummary } from './StrategyExecution.styles';
import { Badge } from 'component/common/Badge/Badge';
interface IStrategyExecutionProps {
strategyResult: PlaygroundStrategySchema;
@ -60,14 +61,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
),
name === 'default' && (
<StyledBoxSummary sx={{ width: '100%' }}>
The standard strategy is{' '}
<Chip
variant="outlined"
size="small"
color="success"
label="ON"
/>{' '}
for all users.
The standard strategy is <Badge color="success">ON</Badge> for
all users.
</StyledBoxSummary>
),
].filter(Boolean);

10
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
View File

@ -2,12 +2,13 @@ import {
parseParameterNumber,
parseParameterStrings,
} from 'utils/parseParameter';
import { Box, Chip } from '@mui/material';
import { Box } from '@mui/material';
import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
import { StyledBoxSummary } from '../StrategyExecution.styles';
import { PlaygroundConstraintSchema, PlaygroundRequestSchema } from 'openapi';
import { getMappedParam } from '../helpers';
import { Badge } from 'component/common/Badge/Badge';
export interface PlaygroundResultStrategyExecutionParametersProps {
parameters: { [key: string]: string };
@ -41,12 +42,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
/>
</Box>
<div>
<Chip
color="success"
variant="outlined"
size="small"
label={`${percentage}%`}
/>{' '}
<Badge color="success">{percentage}%</Badge>{' '}
of your base{' '}
{constraints.length > 0
? 'who match constraints'

2
frontend/src/component/project/Project/Import/ActionsContainer.tsx
View File

@ -2,7 +2,7 @@ import { Box, styled } from '@mui/material';
export const ActionsContainer = styled(Box)(({ theme }) => ({
width: '100%',
borderTop: `1px solid ${theme.palette.dividerAlternative}`,
borderTop: `1px solid ${theme.palette.divider}`,
marginTop: 'auto',
paddingTop: theme.spacing(3),
display: 'flex',

2
frontend/src/component/project/Project/Import/ImportModal.tsx
View File

@ -29,7 +29,7 @@ const TimelineContainer = styled('div')(({ theme }) => ({
const TimelineHeader = styled('div')(({ theme }) => ({
textTransform: 'uppercase',
fontSize: theme.fontSizes.smallBody,
color: theme.palette.text.tertiaryContrast,
color: theme.palette.primary.contrastText,
fontWeight: theme.typography.fontWeightBold,
paddingLeft: theme.spacing(2),
marginBottom: theme.spacing(4),

6
frontend/src/component/project/Project/Import/ImportTimeline.tsx
View File

@ -24,7 +24,7 @@ const StyledTimelineDot = styled(TimelineDot, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
color: active ? theme.palette.primary.main : theme.palette.neutral.border,
backgroundColor: active ? theme.palette.text.tertiaryContrast : 'initial',
backgroundColor: active ? theme.palette.primary.contrastText : 'initial',
fontWeight: active ? theme.fontWeight.bold : theme.fontWeight.medium,
borderColor: theme.palette.neutral.border,
width: '40px',
@ -39,9 +39,7 @@ const StyledTimelineContent = styled(TimelineContent, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
marginBottom: theme.spacing(6),
color: active
? theme.palette.text.tertiaryContrast
: theme.palette.neutral.border,
color: active ? theme.palette.common.white : theme.palette.neutral.border,
marginTop: theme.spacing(2),
}));

2
frontend/src/component/project/Project/Import/PulsingAvatar.tsx
View File

@ -6,7 +6,7 @@ export const PulsingAvatar = styled(Avatar, {
transition: 'background-color 0.5s ease',
backgroundColor: active
? theme.palette.primary.main
: theme.palette.tertiary.main,
: theme.palette.divider,
'@keyframes pulse': {
'0%': {
boxShadow: `0 0 0 0px ${alpha(theme.palette.primary.main, 0.7)}`,

2
frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx
View File

@ -2,7 +2,7 @@ import React, { FC } from 'react';
import { Box, styled, Typography } from '@mui/material';
const ImportExplanationContainer = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
}));

2
frontend/src/component/project/Project/Import/configure/ImportOptions.tsx
View File

@ -6,7 +6,7 @@ import { IMPORT_ENVIRONMENT } from 'utils/testIds';
import useProject from 'hooks/api/getters/useProject/useProject';
const ImportOptionsContainer = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
}));

2
frontend/src/component/project/Project/Import/validate/ValidationStage.tsx
View File

@ -15,7 +15,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const ImportInfoContainer = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.secondaryContainer,
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(3),
}));

Some files were not shown because too many files have changed in this diff Show More