From 705462f0cf3e43eb8bb29690b154a49d0169fceb Mon Sep 17 00:00:00 2001 From: NicolaeUnleash <103567375+NicolaeUnleash@users.noreply.github.com> Date: Wed, 22 Mar 2023 16:37:40 +0200 Subject: [PATCH] feat: dark theme v1 (#3298) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## About the changes Creating the first version of the Dark theme Refactor: colors variables Refactor: use theme variable instead - this change will help us to use MuiCssBaseline, and we can use classes directly for easy customization when we can't identify MUI classes Refactor: adjusting some files components - i’ve touched also the structure of some files, not only the colors variables (but only to adjust the style, not functionality) Fix: dark mode persistence on refresh (by Nuno) Feat: dark mode sees light logos, and light mode sees dark logos (by Nuno) --------- Co-authored-by: Nuno Góis --- .../pro-enterprise-feature-badge-light.svg | 1 + .../ConfirmToken/UserToken/UserToken.tsx | 19 +- .../apiToken/ProjectsList/ProjectsList.tsx | 3 +- .../admin/auth/GoogleAuth/GoogleAuth.tsx | 2 +- .../admin/groups/GroupForm/GroupForm.tsx | 4 + .../GroupsList/GroupEmpty/GroupEmpty.tsx | 2 +- .../component/admin/invoice/InvoiceList.tsx | 2 +- .../users/InviteLinkBar/InviteLinkBar.tsx | 12 +- .../ApplicationList/ApplicationList.tsx | 6 +- .../ReviewButton/ReviewButton.tsx | 2 +- .../common/ApiTokenTable/ApiTokenTable.tsx | 13 +- frontend/src/component/common/Badge/Badge.tsx | 2 +- .../BatchSelectionActionsBar.tsx | 2 +- .../common/CheckmarkBadge/CheckMarkBadge.tsx | 6 +- .../ConstraintAccordionEditBody.tsx | 1 - .../FreeTextInput/FreeTextInput.tsx | 2 +- .../CaseSensitiveButton.tsx | 1 + .../InvertedOperatorButton.tsx | 90 +- .../ConstraintAccordionList.tsx | 7 +- .../ConstraintAccordionView.tsx | 7 +- ...raintAccordionViewHeaderMultipleValues.tsx | 2 +- .../ConstraintAccordion/ConstraintIcon.tsx | 10 +- .../component/common/Dialogue/Dialogue.tsx | 2 +- .../EnvironmentIcon/EnvironmentIcon.tsx | 2 +- .../FavoriteIconButton/FavoriteIconButton.tsx | 1 + .../FeatureStatusChip/FeatureStatusChip.tsx | 2 +- .../GuidanceIndicator/GuidanceIndicator.tsx | 10 +- .../component/common/HelpIcon/HelpIcon.tsx | 2 +- .../InstanceStatusBar.test.tsx.snap | 10 +- .../common/Notifications/Notification.tsx | 25 +- .../common/Notifications/Notifications.tsx | 8 +- .../Notifications/NotificationsHeader.tsx | 10 +- .../Notifications/NotificationsList.tsx | 2 +- .../OperatorUpgradeAlert.tsx | 1 - .../common/PremiumFeature/PremiumFeature.tsx | 7 +- .../src/component/common/Search/Search.tsx | 5 +- .../SearchSuggestions/SearchSuggestions.tsx | 2 +- .../CellSortable/CellSortable.styles.ts | 3 +- .../CellSortable/SortArrow/SortArrow.tsx | 3 - .../TablePlaceholder/TablePlaceholder.tsx | 4 +- .../ToastRenderer/Toast/Toast.styles.ts | 2 +- .../VerticalTabs/VerticalTab/VerticalTab.tsx | 2 +- .../context/ContextForm/ContextForm.tsx | 5 +- .../component/events/EventCard/EventCard.tsx | 6 +- .../feature/CopyFeature/CopyFeature.tsx | 65 +- .../feature/FeatureForm/FeatureForm.tsx | 6 +- .../FeatureStrategyEmpty.tsx | 4 + .../FeatureStrategyEnabled.tsx | 4 +- .../FeatureStrategyForm.tsx | 2 +- .../FeatureToggleListTable.tsx | 3 +- .../FeatureMetricsChart/createChartOptions.ts | 4 +- .../FeatureMetricsChips.tsx | 2 +- .../FeatureOverviewEnvironment.tsx | 16 +- .../FeatureOverviewEnvironmentMetrics.tsx | 2 +- .../SectionSeparator/SectionSeparator.tsx | 2 +- .../FeatureOverviewMetaData.tsx | 2 +- ...atureOverviewSidePanelEnvironmentHider.tsx | 6 +- .../EnvironmentVariantsCard.tsx | 6 +- .../EnvironmentVariantsModal.tsx | 6 +- .../feature/FeatureView/FeatureView.tsx | 2 +- .../RolloutSlider/RolloutSlider.tsx | 2 +- .../feedback/FeedbackCES/FeedbackCES.tsx | 4 +- .../feedback/FeedbackNPS/FeedbackNPS.tsx | 10 +- .../MainLayout/DraftBanner/DraftBanner.tsx | 2 +- .../layout/MainLayout/MainLayout.tsx | 17 +- .../maintenance/MaintenanceBanner.tsx | 3 +- frontend/src/component/menu/Footer/Footer.tsx | 5 + .../Footer/__snapshots__/Footer.test.tsx.snap | 72 +- frontend/src/component/menu/Header/Header.tsx | 1 + .../Header/NavigationLink/NavigationLink.tsx | 2 +- .../PlaygroundEditor/PlaygroundEditor.tsx | 24 +- .../Project/Import/ImportLayoutContainer.tsx | 2 +- .../project/Project/Import/ImportModal.tsx | 9 +- .../project/Project/Import/ImportTimeline.tsx | 58 +- .../project/Project/Import/PulsingAvatar.tsx | 1 + .../project/Project/Project.styles.ts | 2 +- .../Project/ProjectStats/StatusBox.tsx | 2 +- .../ProjectAccess/ProjectAccess.styles.ts | 4 +- .../project/ProjectList/ProjectList.tsx | 9 +- .../component/splash/SplashPageOperators.tsx | 2 +- .../StrategyParameter/StrategyParameter.tsx | 5 +- .../__snapshots__/TagTypeList.test.tsx.snap | 10 +- .../user/Profile/ProfileTab/ProfileTab.tsx | 2 +- .../src/component/user/StandaloneBanner.tsx | 23 +- .../UserProfileContent/UserProfileContent.tsx | 4 +- .../user/common/AuthOptions/AuthOptions.tsx | 4 +- .../ResetPasswordForm/PasswordChecker.tsx | 9 +- .../user/common/StandaloneLayout.tsx | 11 +- frontend/src/hooks/useThemeMode.ts | 4 +- frontend/src/themes/app.css | 7 +- frontend/src/themes/colors.ts | 6 +- frontend/src/themes/dark-theme.ts | 772 ++++++------------ frontend/src/themes/theme.ts | 150 +++- frontend/src/themes/themeStyles.ts | 1 + frontend/src/themes/themeTypes.ts | 35 +- 95 files changed, 827 insertions(+), 889 deletions(-) create mode 100644 frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg diff --git a/frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg b/frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg new file mode 100644 index 0000000000..0ff76c4709 --- /dev/null +++ b/frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx index 2fba97c4d3..4a048cf84d 100644 --- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx +++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx @@ -1,4 +1,4 @@ -import { IconButton, Tooltip } from '@mui/material'; +import { Box, IconButton, Tooltip } from '@mui/material'; import CopyIcon from '@mui/icons-material/FileCopy'; import copy from 'copy-to-clipboard'; import useToast from 'hooks/useToast'; @@ -24,18 +24,17 @@ export const UserToken = ({ token }: IUserTokenProps) => { }; return ( -
({ + backgroundColor: theme.palette.background.elevation2, + padding: theme.spacing(4), + borderRadius: `${theme.shape.borderRadius}px`, + marginTop: theme.spacing(2), display: 'flex', justifyContent: 'space-between', alignItems: 'center', wordBreak: 'break-all', - }} + })} > {token} @@ -43,6 +42,6 @@ export const UserToken = ({ token }: IUserTokenProps) => { -
+ ); }; diff --git a/frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx b/frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx index 9b7d595ec5..16351698e5 100644 --- a/frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx +++ b/frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx @@ -5,8 +5,9 @@ import { useSearchHighlightContext } from 'component/common/Table/SearchHighligh import { Fragment, VFC } from 'react'; import { Link } from 'react-router-dom'; -const StyledLink = styled(Link)(() => ({ +const StyledLink = styled(Link)(({ theme }) => ({ textDecoration: 'none', + color: theme.palette.links, '&:hover, &:focus': { textDecoration: 'underline', }, diff --git a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx index af87408c46..6c7d7a8a18 100644 --- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx +++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx @@ -240,7 +240,7 @@ export const GoogleAuth = () => { Save {' '}

- + {errors?.message}

diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx index ea7898431c..e2b6267fc1 100644 --- a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx +++ b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx @@ -57,6 +57,10 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({ fontSize: theme.fontSizes.smallBody, borderRadius: theme.shape.borderRadiusMedium, marginBottom: theme.spacing(2), + + a: { + color: theme.palette.links, + }, })); interface IGroupForm { diff --git a/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx b/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx index 768127474d..31a3612621 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx @@ -26,7 +26,7 @@ export const GroupEmpty = () => { to="/admin/groups/create-group" component={Link} variant="outlined" - color="secondary" + color="primary" > Create your first group diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index 136706ca32..5e14509599 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -69,7 +69,7 @@ const InvoiceList = () => { style={{ backgroundColor: item.status === 'past-due' - ? '#ff9194' + ? 'error.dark' : 'inherit', }} > diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx index 0ed961fba2..e3d782c13c 100644 --- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx +++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx @@ -35,7 +35,7 @@ export const InviteLinkBar: VFC = () => { {expiresIn} @@ -56,17 +56,17 @@ export const InviteLinkBar: VFC = () => { return ( ({ + backgroundColor: theme.palette.background.paper, py: 2, px: 4, mb: 2, - borderRadius: theme => `${theme.shape.borderRadiusLarge}px`, + borderRadius: `${theme.shape.borderRadiusLarge}px`, display: 'flex', flexDirection: { xs: 'column', md: 'row' }, border: '2px solid', - borderColor: 'primary.main', - }} + borderColor: theme.palette.background.alternative, + })} ref={ref} > {
You can read more about how to use Unleash in your application in the{' '} - + documentation. - + ); diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx index 97db20f4a8..7fe6892779 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx @@ -108,7 +108,7 @@ export const ReviewButton: FC<{ disabled: boolean }> = ({ disabled }) => { : 'center bottom', }} > - + {'No tokens available. Read '} - API How-to guides - {' '} + {' '} {' to learn more.'} diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx index 5a850f7e1d..8d330362b2 100644 --- a/frontend/src/component/common/Badge/Badge.tsx +++ b/frontend/src/component/common/Badge/Badge.tsx @@ -37,7 +37,7 @@ const StyledBadge = styled('div')( fontWeight: theme.fontWeight.bold, lineHeight: 1, backgroundColor: theme.palette[color].light, - color: theme.palette[color].dark, + color: theme.palette[color].contrastText, border: `1px solid ${theme.palette[color].border}`, }) ); diff --git a/frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx b/frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx index 69fe7e1fbe..4f9a9e84ee 100644 --- a/frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx +++ b/frontend/src/component/common/BatchSelectionActionsBar/BatchSelectionActionsBar.tsx @@ -36,7 +36,7 @@ const StyledBar = styled(Paper)(({ theme }) => ({ const StyledCount = styled('span')(({ theme }) => ({ background: theme.palette.secondary.main, - color: theme.palette.background.paper, + color: theme.palette.common.white, padding: theme.spacing(0.5, 1), borderRadius: theme.shape.borderRadius, })); diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx index 45717db0ca..510a518d43 100644 --- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx +++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx @@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps { } const StyledBatch = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.background.alternative, width: '75px', height: '75px', borderRadius: '50px', @@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({ })); const StyledClose = styled(Close)(({ theme }) => ({ - color: theme.palette.background.paper, + color: theme.palette.common.white, width: '35px', height: '35px', })); const StyledCheck = styled(Check)(({ theme }) => ({ - color: theme.palette.background.paper, + color: theme.palette.common.white, width: '35px', height: '35px', })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx index 5b7148f221..d2543e7fe2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx @@ -19,7 +19,6 @@ interface IConstraintAccordionBody { const StyledInputContainer = styled('div')(({ theme }) => ({ padding: theme.spacing(2), - backgroundColor: theme.palette.neutral.light, })); const StyledButtonContainer = styled('div')(({ theme }) => ({ diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx index 91c9e2b190..03c3005422 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx @@ -111,7 +111,7 @@ export const FreeTextInput = ({ diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 1069863fed..0c2426021b 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -32,11 +32,8 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, boxShadow: 'none', margin: 0, - - '& .root': { - '&:before': { - opacity: '0 !important', - }, + '&:before': { + opacity: '0', }, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx index 0bde738e02..32e25f36a6 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -44,7 +44,7 @@ const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({ const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({ fontSize: theme.fontSizes.smallBody, marginTop: theme.spacing(0.5), - color: theme.palette.primary.dark, + color: theme.palette.links, [theme.breakpoints.down('sm')]: { textAlign: 'center', }, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx index b941342d4c..452b26a04a 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx @@ -18,12 +18,12 @@ export const ConstraintIcon: VFC = ({ compact }) => ( }} > ({ + fill: theme.palette.common.white, display: 'block', - width: compact ? '16px' : '20px', - height: compact ? '16px' : '20px', - }} + width: compact ? theme.spacing(2) : theme.spacing(2.5), + height: compact ? theme.spacing(2) : theme.spacing(2.5), + })} /> ); diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx index b05fa35069..14c4dea020 100644 --- a/frontend/src/component/common/Dialogue/Dialogue.tsx +++ b/frontend/src/component/common/Dialogue/Dialogue.tsx @@ -20,7 +20,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({ })); const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({ - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.background.alternative, color: theme.palette.primary.contrastText, padding: theme.spacing(3.5, 6), fontWeight: theme.fontWeight.medium, diff --git a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx index 1d7e251b48..6363631b1d 100644 --- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx +++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx @@ -26,7 +26,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => { }; const icon = { - fill: '#fff', + fill: theme.palette.common.white, width: '16px', height: '16px', }; diff --git a/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx b/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx index ba007312bb..b0fd7d7689 100644 --- a/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx +++ b/frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx @@ -37,6 +37,7 @@ export const FavoriteIconButton: VFC = ({ } elseShow={ size === 'medium' diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx index 50d09785a2..8657f3de52 100644 --- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx +++ b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx @@ -20,7 +20,7 @@ export const FeatureStatusChip = ({ return (
- + {value}
diff --git a/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx b/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx index 6c20b1b9b5..76164aa7c5 100644 --- a/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx +++ b/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx @@ -5,7 +5,7 @@ const StyledIndicator = styled('div')(({ style, theme }) => ({ width: '25px', height: '25px', borderRadius: '50%', - color: theme.palette.primary.contrastText, + color: theme.palette.common.white, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -27,9 +27,13 @@ export const GuidanceIndicator: FC = ({ }) => { const theme = useTheme(); - const defaults = { backgroundColor: theme.palette.primary.main }; + const defaults = { + backgroundColor: theme.palette.background.alternative, + color: theme.palette.common.white, + }; if (type === 'secondary') { - defaults.backgroundColor = theme.palette.text.disabled; + defaults.backgroundColor = theme.palette.background.paper; + defaults.color = theme.palette.text.secondary; } return ( diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx index 80be16871e..1791bffdee 100644 --- a/frontend/src/component/common/HelpIcon/HelpIcon.tsx +++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx @@ -16,7 +16,7 @@ const StyledContainer = styled('span')(({ theme }) => ({ }, '& svg': { fontSize: theme.fontSizes.mainHeader, - color: theme.palette.neutral.main, + color: theme.palette.action.active, marginLeft: theme.spacing(0.5), }, })); diff --git a/frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap b/frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap index c50e6f1259..46c6041bcf 100644 --- a/frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap +++ b/frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap @@ -2,7 +2,7 @@ exports[`InstanceStatusBar should warn when the trial has churned 1`] = `