From c87cf1fd599a801988dc2db803f800a30f1b936e Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Wed, 13 Jul 2022 08:50:26 +0200 Subject: [PATCH 01/24] feat: add dark mode theme --- src/component/App.styles.ts | 2 +- .../common/Codebox/Codebox.styles.ts | 4 +- .../FormTemplate/FormTemplate.styles.ts | 8 +- .../SortableTableHeader.styles.ts | 3 +- src/component/menu/Footer/Footer.styles.ts | 1 + src/component/menu/Header/Header.styles.ts | 4 +- .../NavigationLink/NavigationLink.styles.ts | 2 +- src/themes/ThemeProvider.tsx | 3 +- src/themes/app.css | 4 - src/themes/colors.ts | 8 + src/themes/dark-theme.ts | 344 ++++++++++++++++++ src/themes/theme.ts | 21 ++ src/themes/themeTypes.ts | 9 + 13 files changed, 396 insertions(+), 17 deletions(-) create mode 100644 src/themes/dark-theme.ts diff --git a/src/component/App.styles.ts b/src/component/App.styles.ts index 33bf6c6667..c6b04a0447 100644 --- a/src/component/App.styles.ts +++ b/src/component/App.styles.ts @@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({ margin: '0 auto', flex: 1, width: '100%', - backgroundColor: theme.palette.grey[300], + backgroundColor: theme.palette.contentWrapper, }, content: { width: '1250px', diff --git a/src/component/common/Codebox/Codebox.styles.ts b/src/component/common/Codebox/Codebox.styles.ts index c6fb507c68..e084173ac1 100644 --- a/src/component/common/Codebox/Codebox.styles.ts +++ b/src/component/common/Codebox/Codebox.styles.ts @@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { - backgroundColor: theme.palette.sidebarContainer, + backgroundColor: theme.palette.codebox, padding: '1rem', borderRadius: theme.shape.borderRadiusMedium, position: 'relative', @@ -13,7 +13,7 @@ export const useStyles = makeStyles()(theme => ({ margin: 0, wordBreak: 'break-all', whiteSpace: 'pre-wrap', - color: '#fff', + color: theme.palette.text.primary, fontSize: 14, }, icon: { diff --git a/src/component/common/FormTemplate/FormTemplate.styles.ts b/src/component/common/FormTemplate/FormTemplate.styles.ts index 474533e7bd..f19c902754 100644 --- a/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({ borderRadius: 0, }, sidebar: { - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.formSidebar, padding: '2rem', flexGrow: 0, flexShrink: 0, @@ -42,7 +42,7 @@ export const useStyles = makeStyles()(theme => ({ fontWeight: 'normal', }, subtitle: { - color: '#fff', + color: theme.palette.text.primary, marginBottom: '1rem', display: 'flex', justifyContent: 'space-between', @@ -51,7 +51,7 @@ export const useStyles = makeStyles()(theme => ({ fontSize: theme.fontSizes.bodySize, }, description: { - color: '#fff', + color: theme.palette.text.primary, zIndex: 1, position: 'relative', }, @@ -72,7 +72,7 @@ export const useStyles = makeStyles()(theme => ({ }, }, formContent: { - backgroundColor: '#fff', + backgroundColor: theme.palette.formBackground, display: 'flex', flexDirection: 'column', padding: '3rem', diff --git a/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts b/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts index fb11a9dd4b..e1904e1818 100644 --- a/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts +++ b/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts @@ -5,7 +5,8 @@ export const useStyles = makeStyles()(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, diff --git a/src/component/menu/Footer/Footer.styles.ts b/src/component/menu/Footer/Footer.styles.ts index baeb2a65d6..481c797b58 100644 --- a/src/component/menu/Footer/Footer.styles.ts +++ b/src/component/menu/Footer/Footer.styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({ width: '100%', flexGrow: 1, zIndex: 100, + backgroundColor: theme.palette.footerBackground, }, list: { padding: 0, diff --git a/src/component/menu/Header/Header.styles.ts b/src/component/menu/Header/Header.styles.ts index 1ee09c50dd..5c04ad56e1 100644 --- a/src/component/menu/Header/Header.styles.ts +++ b/src/component/menu/Header/Header.styles.ts @@ -2,8 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ header: { - backgroundColor: '#fff', - color: '#000', + backgroundColor: theme.palette.headerBackground, padding: '0.5rem', boxShadow: 'none', position: 'relative', @@ -80,7 +79,6 @@ export const useStyles = makeStyles()(theme => ({ textDecoration: 'none', alignItems: 'center', display: 'flex', - color: '#000', }, icon: { color: theme.palette.grey[700], diff --git a/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts b/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts index 6a2e9b2caf..f122b84488 100644 --- a/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts +++ b/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts @@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({ textDecoration: 'none', alignItems: 'center', display: 'flex', - color: '#000', + color: 'inherit', height: '100%', width: '100%', '&&': { diff --git a/src/themes/ThemeProvider.tsx b/src/themes/ThemeProvider.tsx index 3a44706ba3..1aca184a4a 100644 --- a/src/themes/ThemeProvider.tsx +++ b/src/themes/ThemeProvider.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material'; import mainTheme from 'themes/theme'; +import darkTheme from 'themes/dark-theme'; import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/react'; @@ -11,7 +12,7 @@ export const muiCache = createCache({ export const ThemeProvider: FC = ({ children }) => ( - + {children} diff --git a/src/themes/app.css b/src/themes/app.css index 9867297ea3..d5d420d53a 100644 --- a/src/themes/app.css +++ b/src/themes/app.css @@ -17,10 +17,6 @@ button { font-family: 'Sen', sans-serif; } -.MuiInputBase-root { - background-color: #fff; -} - .MuiAccordion-root.Mui-expanded { margin: 0; } diff --git a/src/themes/colors.ts b/src/themes/colors.ts index 4a3c143706..3c115fd241 100644 --- a/src/themes/colors.ts +++ b/src/themes/colors.ts @@ -78,4 +78,12 @@ export const colors = { 100: '#DCEEFA', 50: '#EBF7FF', }, + darkblue: { + 1000: '#091826', + 900: '#041c32', + 800: '#1d3247', + 700: '#28415c', + 600: '#1f3751', + 500: '#0e2840', + }, } as const; diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts new file mode 100644 index 0000000000..a70a453417 --- /dev/null +++ b/src/themes/dark-theme.ts @@ -0,0 +1,344 @@ +import { createTheme } from '@mui/material/styles'; +import { colors } from './colors'; + +const themeColors = { + main: colors.darkblue[900], + secondary: colors.darkblue[800], + textColor: '#ffffffe6', +}; + +export default createTheme({ + breakpoints: { + values: { + xs: 0, + sm: 600, + md: 960, + lg: 1260, + xl: 1536, + }, + }, + boxShadows: { + main: '0px 2px 4px rgba(129, 122, 254, 0.2)', + elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)', + }, + typography: { + fontFamily: 'Sen, Roboto, sans-serif', + fontWeightBold: '700', + fontWeightMedium: '700', + allVariants: { lineHeight: 1.4 }, + button: { lineHeight: 1.75 }, + h1: { + fontSize: '1.5rem', + lineHeight: 1.875, + }, + }, + fontSizes: { + mainHeader: '1.25rem', + subHeader: '1.1rem', + bodySize: '1rem', + smallBody: `${14 / 16}rem`, + smallerBody: `${12 / 16}rem`, + }, + fontWeight: { + thin: 300, + medium: 400, + semi: 700, + bold: 700, + }, + shape: { + borderRadius: '4px', + borderRadiusMedium: '8px', + borderRadiusLarge: '12px', + borderRadiusExtraLarge: '20px', + tableRowHeight: 64, + tableRowHeightCompact: 56, + tableRowHeightDense: 48, + }, + palette: { + primary: { + main: themeColors.textColor, + light: colors.purple[700], + dark: colors.purple[900], + }, + secondary: { + main: colors.purple[800], + light: colors.purple[700], + dark: colors.purple[900], + }, + info: { + light: colors.blue[50], + main: colors.blue[500], + dark: colors.blue[700], + border: colors.blue[200], + }, + success: { + light: colors.green[50], + main: colors.green[600], + dark: themeColors.textColor, + border: colors.green[300], + }, + warning: { + light: colors.orange[100], + main: colors.orange[800], + dark: colors.orange[900], + border: colors.orange[500], + }, + error: { + light: colors.red[50], + main: colors.red[700], + dark: colors.red[800], + border: colors.red[300], + }, + background: { + paper: themeColors.main, + }, + divider: themeColors.secondary, + dividerAlternative: colors.grey[400], + tableHeaderHover: colors.darkblue[700], + tableHeaderBackground: themeColors.secondary, + tableHeaderColor: themeColors.textColor, + highlight: '#FFEACC', + secondaryContainer: colors.grey[200], + contentWrapper: colors.darkblue[800], + formBackground: themeColors.main, + formSidebar: colors.darkblue[1000], + headerBackground: themeColors.main, + footerBackground: themeColors.main, + sidebarContainer: 'rgba(32,32,33, 0.2)', + codebox: colors.darkblue[600], + grey: colors.grey, + text: { + primary: themeColors.textColor, + secondary: colors.grey[800], + disabled: colors.grey[600], + }, + code: { + main: '#0b8c8f', + diffAdd: 'green', + diffSub: 'red', + diffNeutral: 'black', + edited: 'blue', + background: '#efefef', + }, + activityIndicators: { + unknown: themeColors.secondary, + recent: themeColors.secondary, + inactive: themeColors.secondary, + abandoned: themeColors.secondary, + }, + statusBadge: { + success: colors.green[100], + warning: colors.orange[200], + }, + inactiveIcon: colors.grey[600], + }, + components: { + MuiAppBar: { + styleOverrides: { + root: { + color: themeColors.textColor, + }, + }, + }, + MuiButton: { + styleOverrides: { + primary: { + backgroundColor: colors.white, + color: themeColors.main, + }, + }, + }, + MuiSvgIcon: { + styleOverrides: { + root: { + fill: colors.white, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + color: colors.white, + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + color: colors.white, + '&:hover': { + textDecoration: 'none', + }, + }, + }, + }, + MuiBreadcrumbs: { + styleOverrides: { + root: { + color: themeColors.textColor, + fontSize: '0.875rem', + '& a': { + color: themeColors.textColor, + textDecoration: 'underline', + '&:hover': { + textDecoration: 'none', + }, + }, + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + background: 'transparent', + '& th': { + background: colors.grey[200], + }, + }, + }, + }, + MuiTableRow: { + styleOverrides: { + root: { + '&.MuiTableRow-hover:hover': { + background: themeColors.secondary, + }, + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: themeColors.main, + }, + }, + }, + MuiAlert: { + styleOverrides: { + root: { + borderRadius: '8px', + a: { + color: 'inherit', + }, + '&.MuiAlert-standardInfo': { + backgroundColor: colors.blue[50], + color: colors.blue[700], + border: `1px solid ${colors.blue[200]}`, + '& .MuiAlert-icon': { + color: colors.blue[500], + }, + }, + '&.MuiAlert-standardSuccess': { + backgroundColor: colors.green[50], + color: colors.green[800], + border: `1px solid ${colors.green[300]}`, + '& .MuiAlert-icon': { + color: colors.green[500], + }, + }, + '&.MuiAlert-standardWarning': { + backgroundColor: colors.orange[100], + color: colors.orange[900], + border: `1px solid ${colors.orange[500]}`, + '& .MuiAlert-icon': { + color: colors.orange[800], + }, + }, + '&.MuiAlert-standardError': { + backgroundColor: colors.red[50], + color: colors.red[800], + border: `1px solid ${colors.red[300]}`, + '& .MuiAlert-icon': { + color: colors.red[700], + }, + }, + }, + }, + }, + MuiTabs: { + styleOverrides: { + root: { + backgroundColor: themeColors.main, + color: themeColors.textColor, + '& .MuiTabs-indicator': { + height: '4px', + }, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + color: colors.grey[900], + fontSize: '1rem', + textTransform: 'none', + fontWeight: 400, + minHeight: '62px', + '&:hover': { + backgroundColor: colors.grey[200], + }, + '&.Mui-selected': { + color: colors.grey[900], + fontWeight: 700, + }, + '& > span': { + color: colors.purple[900], + }, + }, + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: { + '& > .MuiAccordionSummary-content.Mui-expanded': { + margin: '12px 0', + }, + }, + }, + }, + MuiSwitch: { + styleOverrides: { + switchBase: { + zIndex: 1, + '&:not(.Mui-checked) .MuiTouchRipple-child': { + color: colors.grey['500'], + }, + }, + }, + }, + MuiIcon: { + styleOverrides: { + root: { + color: colors.white, + }, + colorDisabled: { + color: colors.white[600], + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + '&.Mui-disabled': { + opacity: 0.66, + }, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + backgroundColor: colors.darkblue[1000], + }, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: themeColors.main, + color: colors.white, + }, + }, + }, + }, +}); diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 7acd21d876..c02b02c5d1 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -104,11 +104,20 @@ export default createTheme({ background: 'white', contrast: colors.grey[300], }, + divider: colors.grey[300], dividerAlternative: colors.grey[400], tableHeaderHover: colors.grey[400], + tableHeaderBackground: colors.white, + tableHeaderColor: colors.grey[900], highlight: '#FFEACC', secondaryContainer: colors.grey[200], + contentWrapper: colors.grey[300], + headerBackground: colors.white, + footerBackground: colors.white, + formBackground: colors.white, + formSidebar: colors.purple[800], + codebox: 'rgba(32,32,33, 0.2)', sidebarContainer: 'rgba(32,32,33, 0.2)', grey: colors.grey, lightBorder: colors.grey[400], @@ -331,6 +340,18 @@ export default createTheme({ }), }), }), + MuiInputBase: { + styleOverrides: { + root: { + backgroundColor: '#fff', + }, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + backgroundColor: '#fff', + }, }, }, }, diff --git a/src/themes/themeTypes.ts b/src/themes/themeTypes.ts index c90527cf54..a66dbfd6d6 100644 --- a/src/themes/themeTypes.ts +++ b/src/themes/themeTypes.ts @@ -54,10 +54,19 @@ declare module '@mui/material/styles' { primary: string; }; dividerAlternative: string; + contentWrapper: string; + headerBackground: string; + footerBackground: string; + codebox: string; /** * For table header hover effect. */ + tableHeaderBackground: string; tableHeaderHover: string; + tableHeaderColor: string; + + formBackground: string; + formSidebar: string; /** * Text highlight effect color. Used when filtering/searching over content. */ From f6b3b5f32f555800f8754dcbd974467acc3fbc67 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Wed, 13 Jul 2022 16:45:26 +0200 Subject: [PATCH 02/24] fix: feature metrics --- src/component/common/Loader/Loader.styles.ts | 1 + .../FeatureView/FeatureLog/FeatureLog.styles.ts | 2 +- .../FeatureMetricsStats.styles.ts | 2 +- .../FeatureOverviewEnvironment.styles.ts | 2 ++ .../FeatureOverviewMetadata.styles.ts | 2 +- .../feature/FeatureView/FeatureView.styles.ts | 2 +- .../playground/Playground/Playground.tsx | 3 +++ src/component/project/Project/Project.styles.ts | 2 +- .../Project/ProjectInfo/ProjectInfo.styles.ts | 2 +- .../user/StandaloneBanner/StandaloneBanner.tsx | 4 ++-- .../StandaloneLayout/StandaloneLayout.styles.ts | 4 ++-- src/themes/dark-theme.ts | 16 ++++++++++++---- src/themes/theme.ts | 8 ++++++++ src/themes/themeTypes.ts | 8 ++++++++ 14 files changed, 44 insertions(+), 14 deletions(-) diff --git a/src/component/common/Loader/Loader.styles.ts b/src/component/common/Loader/Loader.styles.ts index 9bec27db0c..7284ea586f 100644 --- a/src/component/common/Loader/Loader.styles.ts +++ b/src/component/common/Loader/Loader.styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({ justifyContent: 'center', alignItems: 'center', height: '100%', + backgroundColor: theme.palette.background.paper, }, img: { width: '100px', diff --git a/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts b/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts index fd3ed38125..b2313f433d 100644 --- a/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts +++ b/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { borderRadius: '12.5px', - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, padding: '2rem', }, })); diff --git a/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts b/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts index 80c05eb61e..09be2d3fee 100644 --- a/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts +++ b/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ item: { padding: theme.spacing(2), - background: theme.palette.secondaryContainer, + background: theme.palette.featureMetricsBackground, borderRadius: theme.spacing(2), textAlign: 'center', [theme.breakpoints.up('md')]: { diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index 50fe9d44e5..a9b540cae6 100644 --- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -5,6 +5,8 @@ export const useStyles = makeStyles()(theme => ({ borderRadius: theme.shape.borderRadiusLarge, marginBottom: theme.spacing(2), background: theme.palette.background.default, + padding: '0.2rem', + backgroundColor: theme.palette.background.paper, }, accordion: { boxShadow: 'none', diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts index 17c0c79982..6923d7c385 100644 --- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts +++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ container: { borderRadius: theme.shape.borderRadiusLarge, color: '#fff', - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.featureMetaData, display: 'flex', flexDirection: 'column', maxWidth: '350px', diff --git a/src/component/feature/FeatureView/FeatureView.styles.ts b/src/component/feature/FeatureView/FeatureView.styles.ts index b81dbbd6ad..e81b728aaf 100644 --- a/src/component/feature/FeatureView/FeatureView.styles.ts +++ b/src/component/feature/FeatureView/FeatureView.styles.ts @@ -7,7 +7,7 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', }, header: { - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadiusLarge, marginBottom: '1rem', }, diff --git a/src/component/playground/Playground/Playground.tsx b/src/component/playground/Playground/Playground.tsx index 53e1b7e185..9b724c51f7 100644 --- a/src/component/playground/Playground/Playground.tsx +++ b/src/component/playground/Playground/Playground.tsx @@ -155,6 +155,9 @@ export const Playground: VFC<{}> = () => { sx={{ display: 'flex', flexDirection: !matches ? 'row' : 'column', + px: 4, + py: 3, + background: theme.palette.playgroundBackground, }} > ({ minWidth: 0, }, header: { - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadiusLarge, marginBottom: '1rem', }, diff --git a/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts b/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts index d51d8e9a8e..ec3a9b5626 100644 --- a/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts +++ b/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts @@ -55,7 +55,7 @@ export const useStyles = makeStyles()(theme => ({ margin: '0', textAlign: 'center', marginBottom: '1rem', - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadiusLarge, width: '100%', padding: '1.5rem 1rem 1.5rem 1rem', diff --git a/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/src/component/user/StandaloneBanner/StandaloneBanner.tsx index f80246af5c..ed6b5a2fd3 100644 --- a/src/component/user/StandaloneBanner/StandaloneBanner.tsx +++ b/src/component/user/StandaloneBanner/StandaloneBanner.tsx @@ -17,8 +17,8 @@ const StandaloneBanner: FC = ({ title, children }) => { return (
diff --git a/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts b/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts index 2e10dbde9c..c535ddf662 100644 --- a/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts +++ b/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { padding: '5.5rem', - background: '#EFF2F2', + background: theme.palette.standaloneBackground, display: 'flex', [theme.breakpoints.down('md')]: { flexDirection: 'column', @@ -27,7 +27,7 @@ export const useStyles = makeStyles()(theme => ({ flex: '1', borderTopRightRadius: '3px', borderBottomRightRadius: '3px', - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, position: 'relative', [theme.breakpoints.down('md')]: { borderRadius: '0', diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index a70a453417..ccb78e7d0a 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -106,6 +106,14 @@ export default createTheme({ footerBackground: themeColors.main, sidebarContainer: 'rgba(32,32,33, 0.2)', codebox: colors.darkblue[600], + featureMetaData: colors.darkblue[1000], + playgroundBackground: themeColors.secondary, + standaloneBackground: colors.black, + standaloneBannerGradient: { + from: colors.darkblue[1000], + to: colors.black, + }, + featureMetricsBackground: themeColors.secondary, grey: colors.grey, text: { primary: themeColors.textColor, @@ -269,16 +277,16 @@ export default createTheme({ MuiTab: { styleOverrides: { root: { - color: colors.grey[900], + color: themeColors.textColor, fontSize: '1rem', textTransform: 'none', fontWeight: 400, minHeight: '62px', '&:hover': { - backgroundColor: colors.grey[200], + backgroundColor: themeColors.secondary, }, '&.Mui-selected': { - color: colors.grey[900], + color: themeColors.textColor, fontWeight: 700, }, '& > span': { @@ -336,7 +344,7 @@ export default createTheme({ styleOverrides: { root: { backgroundColor: themeColors.main, - color: colors.white, + color: colors.textColor, }, }, }, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index c02b02c5d1..5fdca3a976 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -117,8 +117,16 @@ export default createTheme({ footerBackground: colors.white, formBackground: colors.white, formSidebar: colors.purple[800], + featureMetaData: colors.purple[800], codebox: 'rgba(32,32,33, 0.2)', sidebarContainer: 'rgba(32,32,33, 0.2)', + playgroundBackground: colors.grey[200], + standaloneBackground: colors.grey[300], + standaloneBannerGradient: { + from: colors.purple[900], + to: "#173341" + }, + featureMetricsBackground: colors.grey[100], grey: colors.grey, lightBorder: colors.grey[400], text: { diff --git a/src/themes/themeTypes.ts b/src/themes/themeTypes.ts index a66dbfd6d6..fbc74238fd 100644 --- a/src/themes/themeTypes.ts +++ b/src/themes/themeTypes.ts @@ -58,6 +58,14 @@ declare module '@mui/material/styles' { headerBackground: string; footerBackground: string; codebox: string; + featureMetaData: string; + playgroundBackground: string; + standaloneBackground: string; + standaloneBannerGradient: { + from: string; + to: string; + }; + featureMetricsBackground: string; /** * For table header hover effect. */ From 893e43564dd459542f079f832222e6f5abf74de5 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Thu, 14 Jul 2022 09:34:23 +0200 Subject: [PATCH 03/24] fix: add color --- src/themes/dark-theme.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index ccb78e7d0a..15a3e611f8 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -5,6 +5,7 @@ const themeColors = { main: colors.darkblue[900], secondary: colors.darkblue[800], textColor: '#ffffffe6', + hover: 'rgb(255, 255, 255, 0.7)', }; export default createTheme({ @@ -330,6 +331,9 @@ export default createTheme({ '&.Mui-disabled': { opacity: 0.66, }, + '&:hover': { + backgroundColor: themeColors.secondary, + }, }, }, }, From b223dce0b4e5bd6f8040830bd4446604c211f4d2 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Fri, 15 Jul 2022 13:38:45 +0200 Subject: [PATCH 04/24] styling --- .../AutocompleteBox/AutocompleteBox.styles.ts | 2 +- .../CheckmarkBadge/CheckMarkBadge.styles.ts | 2 +- .../ConstraintAccordion.styles.ts | 19 +++++- .../ConstraintOperator.styles.ts | 2 +- .../common/Dialogue/Dialogue.styles.ts | 4 +- src/component/common/Search/Search.styles.ts | 1 + .../ToastRenderer/Toast/Toast.styles.ts | 2 +- .../FeatureStrategySegmentChip.styles.ts | 2 +- .../FeedbackNPS/FeedbackNPS.styles.ts | 4 +- .../project/ProjectCard/ProjectCard.styles.ts | 4 +- .../SegmentFormStepList.styles.ts | 2 +- .../UserProfileContent/UserProfileContent.tsx | 9 ++- src/themes/dark-theme.ts | 66 ++++++++++++++----- src/themes/theme.ts | 16 ++++- src/themes/themeTypes.ts | 14 ++++ 15 files changed, 115 insertions(+), 34 deletions(-) diff --git a/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts index 34a9425836..d7b20bf80e 100644 --- a/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts +++ b/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts @@ -10,7 +10,7 @@ export const useStyles = makeStyles()(theme => ({ }, }, icon: { - background: theme.palette.primary.main, + background: theme.palette.featureSegmentSearchBackground, height: 48, width: 48, display: 'flex', diff --git a/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts b/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts index 325565cb38..33e9bdf2be 100644 --- a/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts +++ b/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts @@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ badge: { - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.checkmarkBadge, width: '75px', height: '75px', borderRadius: '50px', diff --git a/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 16d7d51548..af577bd40e 100644 --- a/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -1,10 +1,25 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ + constraintIconContainer: { + backgroundColor: theme.palette.background.paper, + borderRadius: '50%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginRight: theme.spacing(1), + [theme.breakpoints.down(650)]: { + marginBottom: '1rem', + marginRight: 0, + }, + }, + constraintIcon: { + fill: '#fff', + }, accordion: { border: `1px solid ${theme.palette.dividerAlternative}`, borderRadius: theme.shape.borderRadiusMedium, - backgroundColor: '#fff', + backgroundColor: theme.palette.constraintAccordion.background, boxShadow: 'none', margin: 0, }, @@ -14,7 +29,7 @@ export const useStyles = makeStyles()(theme => ({ }, }, accordionEdit: { - backgroundColor: '#F6F6FA', + backgroundColor: theme.palette.constraintAccordion.editBackground, }, headerMetaInfo: { display: 'flex', diff --git a/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts b/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts index bec4e59041..4d74d7c893 100644 --- a/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts +++ b/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ container: { padding: theme.spacing(0.5, 1.5), borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.grey[200], + backgroundColor: theme.palette.constraintAccordion.operatorBackground, lineHeight: 1.25, }, name: { diff --git a/src/component/common/Dialogue/Dialogue.styles.ts b/src/component/common/Dialogue/Dialogue.styles.ts index 7bd66152b0..9d3e1fc972 100644 --- a/src/component/common/Dialogue/Dialogue.styles.ts +++ b/src/component/common/Dialogue/Dialogue.styles.ts @@ -2,8 +2,8 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ dialogTitle: { - backgroundColor: theme.palette.primary.main, - color: '#fff', + backgroundColor: theme.palette.dialogHeaderBackground, + color: theme.palette.text.primary, height: '150px', padding: '2rem 3rem', clipPath: ' ellipse(130% 115px at 120% 20%)', diff --git a/src/component/common/Search/Search.styles.ts b/src/component/common/Search/Search.styles.ts index 39630251e0..09d8bc076f 100644 --- a/src/component/common/Search/Search.styles.ts +++ b/src/component/common/Search/Search.styles.ts @@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({ flexGrow: 1, alignItems: 'center', position: 'relative', + backgroundColor: theme.palette.background.paper, maxWidth: '400px', [theme.breakpoints.down('md')]: { marginTop: theme.spacing(1), diff --git a/src/component/common/ToastRenderer/Toast/Toast.styles.ts b/src/component/common/ToastRenderer/Toast/Toast.styles.ts index 7141bc3a42..4b3aa28151 100644 --- a/src/component/common/ToastRenderer/Toast/Toast.styles.ts +++ b/src/component/common/ToastRenderer/Toast/Toast.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { maxWidth: '450px', - background: '#fff', + background: theme.palette.background.paper, boxShadow: '2px 2px 4px rgba(0,0,0,0.4)', zIndex: 500, margin: '0 0.8rem', diff --git a/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts b/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts index ba07b2c002..76c1437905 100644 --- a/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts +++ b/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts @@ -10,7 +10,7 @@ export const useStyles = makeStyles()(theme => ({ paddingBlockStart: 4, paddingBlockEnd: 4, borderRadius: '100rem', - background: theme.palette.primary.main, + background: theme.palette.featureStrategySegmentChipBackground, color: 'white', }, link: { diff --git a/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts b/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts index 06f471c52f..1562137a86 100644 --- a/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts +++ b/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ feedback: { borderRadius: '12.5px', - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, zIndex: 9999, boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)', padding: '1.5rem', @@ -21,7 +21,7 @@ export const useStyles = makeStyles()(theme => ({ position: 'absolute', right: '-38px', top: '-47px', - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)', ['&:hover']: { backgroundColor: '#fff', diff --git a/src/component/project/ProjectCard/ProjectCard.styles.ts b/src/component/project/ProjectCard/ProjectCard.styles.ts index 849697ecbe..a4a3f3fafb 100644 --- a/src/component/project/ProjectCard/ProjectCard.styles.ts +++ b/src/component/project/ProjectCard/ProjectCard.styles.ts @@ -16,7 +16,7 @@ export const useStyles = makeStyles()(theme => ({ }, '&:hover': { transition: 'background-color 0.2s ease-in-out', - backgroundColor: theme.palette.neutral.light, + backgroundColor: theme.palette.projectCard.hover, }, }, header: { @@ -49,7 +49,7 @@ export const useStyles = makeStyles()(theme => ({ textAlign: 'center', }, infoStats: { - color: '#4A4599', + color: theme.palette.projectCard.textColor, fontWeight: 'bold', }, actionsBtn: { diff --git a/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts b/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts index aec450382d..c296846693 100644 --- a/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts +++ b/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts @@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({ steps: { position: 'relative', borderRadius: 10, - background: '#fff', + background: theme.palette.background.paper, padding: '0.6rem 1.5rem', margin: 'auto', display: 'flex', diff --git a/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx index 488b2d674f..ddfab43182 100644 --- a/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx +++ b/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx @@ -20,6 +20,7 @@ import { basePath } from 'utils/formatPath'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { IUser } from 'interfaces/user'; import { ILocationSettings } from 'hooks/useLocationSettings'; +import { useTheme } from '@mui/material/styles'; interface IUserProfileContentProps { id: string; @@ -45,6 +46,8 @@ const UserProfileContent = ({ setLocationSettings, }: IUserProfileContentProps) => { const { classes: themeStyles } = useThemeStyles(); + const theme = useTheme(); + const { uiConfig } = useUiConfig(); const [updatedPassword, setUpdatedPassword] = useState(false); const [editingProfile, setEditingProfile] = useState(false); @@ -121,7 +124,11 @@ const UserProfileContent = ({ > Date/Time formatting diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index 15a3e611f8..e8c3bba9d8 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -99,7 +99,7 @@ export default createTheme({ tableHeaderBackground: themeColors.secondary, tableHeaderColor: themeColors.textColor, highlight: '#FFEACC', - secondaryContainer: colors.grey[200], + secondaryContainer: themeColors.secondary, contentWrapper: colors.darkblue[800], formBackground: themeColors.main, formSidebar: colors.darkblue[1000], @@ -110,10 +110,24 @@ export default createTheme({ featureMetaData: colors.darkblue[1000], playgroundBackground: themeColors.secondary, standaloneBackground: colors.black, + featureStrategySegmentChipBackground: themeColors.secondary, + featureSegmentSearchBackground: themeColors.secondary, + dialogHeaderBackground: themeColors.secondary, + constraintAccordion: { + editBackground: colors.darkblue[600], + background: themeColors.secondary, + operatorBackground: themeColors.main, + }, standaloneBannerGradient: { from: colors.darkblue[1000], to: colors.black, }, + projectCard: { + hover: themeColors.secondary, + textColor: themeColors.textColor, + }, + checkmarkBadge: themeColors.secondary, + inputLabelBackground: 'transparent', featureMetricsBackground: themeColors.secondary, grey: colors.grey, text: { @@ -136,8 +150,8 @@ export default createTheme({ abandoned: themeColors.secondary, }, statusBadge: { - success: colors.green[100], - warning: colors.orange[200], + success: themeColors.secondary, + warning: themeColors.secondary, }, inactiveIcon: colors.grey[600], }, @@ -149,18 +163,10 @@ export default createTheme({ }, }, }, - MuiButton: { - styleOverrides: { - primary: { - backgroundColor: colors.white, - color: themeColors.main, - }, - }, - }, - MuiSvgIcon: { + MuiInputLabel: { styleOverrides: { root: { - fill: colors.white, + color: themeColors.textColor, }, }, }, @@ -168,6 +174,14 @@ export default createTheme({ styleOverrides: { root: { color: colors.white, + '&:hover': { + backgroundColor: themeColors.hover, + }, + '&.Mui-disabled': { + '& .MuiSvgIcon-root': { + color: colors.grey[700], + }, + }, }, }, }, @@ -233,7 +247,7 @@ export default createTheme({ backgroundColor: colors.blue[50], color: colors.blue[700], border: `1px solid ${colors.blue[200]}`, - '& .MuiAlert-icon': { + '& .MuiAlert-icon .MuiSvgIcon-root': { color: colors.blue[500], }, }, @@ -241,7 +255,7 @@ export default createTheme({ backgroundColor: colors.green[50], color: colors.green[800], border: `1px solid ${colors.green[300]}`, - '& .MuiAlert-icon': { + '& .MuiAlert-icon .MuiSvgIcon-root': { color: colors.green[500], }, }, @@ -249,7 +263,7 @@ export default createTheme({ backgroundColor: colors.orange[100], color: colors.orange[900], border: `1px solid ${colors.orange[500]}`, - '& .MuiAlert-icon': { + '& .MuiAlert-icon .MuiSvgIcon-root': { color: colors.orange[800], }, }, @@ -257,13 +271,29 @@ export default createTheme({ backgroundColor: colors.red[50], color: colors.red[800], border: `1px solid ${colors.red[300]}`, - '& .MuiAlert-icon': { + '& .MuiAlert-icon .MuiSvgIcon-root': { color: colors.red[700], }, }, }, }, }, + MuiButton: { + styleOverrides: { + root: { + '&.Mui-disabled': { + backgroundColor: colors.grey[400], + }, + }, + }, + }, + MuiSvgIcon: { + styleOverrides: { + root: { + color: themeColors.textColor, + }, + }, + }, MuiTabs: { styleOverrides: { root: { @@ -348,7 +378,7 @@ export default createTheme({ styleOverrides: { root: { backgroundColor: themeColors.main, - color: colors.textColor, + color: themeColors.textColor, }, }, }, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 5fdca3a976..843038e4fd 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -122,11 +122,25 @@ export default createTheme({ sidebarContainer: 'rgba(32,32,33, 0.2)', playgroundBackground: colors.grey[200], standaloneBackground: colors.grey[300], + constraintAccordion: { + editBackground: '#F6F6FA', + background: colors.white, + operatorBackground: colors.grey[200], + }, + projectCard: { + hover: colors.grey[100], + textColor: '#4A4599', + }, standaloneBannerGradient: { from: colors.purple[900], - to: "#173341" + to: '#173341', }, + checkmarkBadge: colors.purple[800], + inputLabelBackground: colors.white, featureMetricsBackground: colors.grey[100], + featureStrategySegmentChipBackground: colors.purple[800], + featureSegmentSearchBackground: colors.purple[800], + dialogHeaderBackground: colors.purple[800], grey: colors.grey, lightBorder: colors.grey[400], text: { diff --git a/src/themes/themeTypes.ts b/src/themes/themeTypes.ts index fbc74238fd..2f9da5c8ab 100644 --- a/src/themes/themeTypes.ts +++ b/src/themes/themeTypes.ts @@ -66,6 +66,20 @@ declare module '@mui/material/styles' { to: string; }; featureMetricsBackground: string; + constraintAccordion: { + editBackground: string; + background: string; + operatorBackground: string; + }; + projectCard: { + hover: string; + textColor: string; + }; + checkmarkBadge: string; + inputLabelBackground: string; + featureStrategySegmentChipBackground: string; + featureSegmentSearchBackground: string; + dialogHeaderBackground: string; /** * For table header hover effect. */ From 38374b6a579452ec0c3b601c9d165755cc930315 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Fri, 15 Jul 2022 16:17:55 +0200 Subject: [PATCH 05/24] fix: add switch --- src/component/menu/Header/Header.tsx | 36 +++++++++++++++++-- .../providers/UIProvider/UIProvider.tsx | 23 ++++++++++-- src/contexts/UIContext.ts | 10 ++++++ src/themes/ThemeProvider.tsx | 31 +++++++++++----- src/themes/theme.ts | 7 ++++ 5 files changed, 94 insertions(+), 13 deletions(-) diff --git a/src/component/menu/Header/Header.tsx b/src/component/menu/Header/Header.tsx index d79afd3e7a..8b330ea42e 100644 --- a/src/component/menu/Header/Header.tsx +++ b/src/component/menu/Header/Header.tsx @@ -1,8 +1,15 @@ -import { useEffect, useState, VFC } from 'react'; +import { useEffect, useState, useContext, VFC } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; import { Link } from 'react-router-dom'; -import { AppBar, Container, IconButton, Tooltip } from '@mui/material'; +import { + AppBar, + Container, + FormControlLabel, + IconButton, + Tooltip, + Switch, +} from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; import SettingsIcon from '@mui/icons-material/Settings'; import UserProfile from 'component/user/UserProfile'; @@ -24,8 +31,13 @@ import { useStyles } from './Header.styles'; import classNames from 'classnames'; import { useId } from 'hooks/useId'; import { IRoute } from 'interfaces/route'; +import UIContext from 'contexts/UIContext'; +import { createLocalStorage } from 'utils/createLocalStorage'; +import { setLocalStorageItem } from 'utils/storage'; const Header: VFC = () => { + const { mode, setMode } = useContext(UIContext); + const theme = useTheme(); const adminId = useId(); const configId = useId(); @@ -103,6 +115,17 @@ const Header: VFC = () => { ); } + const onSetMode = () => { + setMode(prev => { + if (prev === 'light') { + setLocalStorageItem('unleash-theme', 'dark'); + return 'dark'; + } + setLocalStorageItem('unleash-theme', 'light'); + return 'light'; + }); + }; + return ( @@ -151,6 +174,15 @@ const Header: VFC = () => { />
+ + } + label="darkmode" + /> { + const value = getLocalStorageItem('unleash-theme'); + console.log(value); + if (value) { + return value as themeMode; + } + + const osDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (osDark) { + return 'dark'; + } + return 'light'; +}; const UIProvider: React.FC = ({ children }) => { const [toastData, setToast] = useState(createEmptyToast()); const [showFeedback, setShowFeedback] = useState(false); + const [mode, setMode] = useState(resolveMode()); const context = React.useMemo( () => ({ @@ -12,8 +29,10 @@ const UIProvider: React.FC = ({ children }) => { toastData, showFeedback, setShowFeedback, + mode, + setMode, }), - [toastData, showFeedback] + [toastData, showFeedback, mode] ); return {children}; diff --git a/src/contexts/UIContext.ts b/src/contexts/UIContext.ts index 7102fb8643..af35a83169 100644 --- a/src/contexts/UIContext.ts +++ b/src/contexts/UIContext.ts @@ -6,8 +6,12 @@ interface IUIContext { setToast: React.Dispatch>; showFeedback: boolean; setShowFeedback: React.Dispatch>; + setMode: React.Dispatch>; + mode: themeMode; } +export type themeMode = 'light' | 'dark'; + export const createEmptyToast = (): IToast => { return { type: 'success', @@ -27,11 +31,17 @@ const setShowFeedbackPlaceholder = () => { throw new Error('setShowFeedback called outside UIContext'); }; +const setModePlaceHolder = () => { + throw new Error('setMode called outside UIContext'); +}; + const UIContext = React.createContext({ toastData: createEmptyToast(), setToast: setToastPlaceholder, showFeedback: false, setShowFeedback: setShowFeedbackPlaceholder, + mode: 'light', + setMode: setModePlaceHolder, }); export default UIContext; diff --git a/src/themes/ThemeProvider.tsx b/src/themes/ThemeProvider.tsx index 1aca184a4a..3977e19a3e 100644 --- a/src/themes/ThemeProvider.tsx +++ b/src/themes/ThemeProvider.tsx @@ -1,20 +1,33 @@ -import React, { FC } from 'react'; +import React, { FC, useContext } from 'react'; import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material'; import mainTheme from 'themes/theme'; import darkTheme from 'themes/dark-theme'; import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/react'; +import UIContext from 'contexts/UIContext'; export const muiCache = createCache({ key: 'mui', prepend: true, }); -export const ThemeProvider: FC = ({ children }) => ( - - - - {children} - - -); +export const ThemeProvider: FC = ({ children }) => { + const { mode } = useContext(UIContext); + + const resolveTheme = () => { + if (mode === 'light') { + return mainTheme; + } + + return darkTheme; + }; + + return ( + + + + {children} + + + ); +}; diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 843038e4fd..f78513ec92 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -376,5 +376,12 @@ export default createTheme({ }, }, }, + MuiAppBar: { + styleOverrides: { + root: { + color: colors.black, + }, + }, + }, }, }); From deffaf70ee9de5fe8e5c8cee87e7f8748df76f2e Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Fri, 15 Jul 2022 16:37:40 +0200 Subject: [PATCH 06/24] fix: form sidebar --- src/component/common/Codebox/Codebox.styles.ts | 2 +- src/component/common/FormTemplate/FormTemplate.styles.ts | 4 ++-- src/themes/dark-theme.ts | 1 + src/themes/theme.ts | 3 ++- src/themes/themeTypes.ts | 1 + 5 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/component/common/Codebox/Codebox.styles.ts b/src/component/common/Codebox/Codebox.styles.ts index e084173ac1..f1bbb2e8a2 100644 --- a/src/component/common/Codebox/Codebox.styles.ts +++ b/src/component/common/Codebox/Codebox.styles.ts @@ -13,7 +13,7 @@ export const useStyles = makeStyles()(theme => ({ margin: 0, wordBreak: 'break-all', whiteSpace: 'pre-wrap', - color: theme.palette.text.primary, + color: theme.palette.formSidebarTextColor, fontSize: 14, }, icon: { diff --git a/src/component/common/FormTemplate/FormTemplate.styles.ts b/src/component/common/FormTemplate/FormTemplate.styles.ts index f19c902754..24b34cc50d 100644 --- a/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -42,7 +42,7 @@ export const useStyles = makeStyles()(theme => ({ fontWeight: 'normal', }, subtitle: { - color: theme.palette.text.primary, + color: theme.palette.formSidebarTextColor, marginBottom: '1rem', display: 'flex', justifyContent: 'space-between', @@ -51,7 +51,7 @@ export const useStyles = makeStyles()(theme => ({ fontSize: theme.fontSizes.bodySize, }, description: { - color: theme.palette.text.primary, + color: theme.palette.formSidebarTextColor, zIndex: 1, position: 'relative', }, diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index e8c3bba9d8..daa067bb18 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -126,6 +126,7 @@ export default createTheme({ hover: themeColors.secondary, textColor: themeColors.textColor, }, + formSidebarTextColor: themeColors.textColor, checkmarkBadge: themeColors.secondary, inputLabelBackground: 'transparent', featureMetricsBackground: themeColors.secondary, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index f78513ec92..2852652420 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -108,8 +108,9 @@ export default createTheme({ divider: colors.grey[300], dividerAlternative: colors.grey[400], tableHeaderHover: colors.grey[400], - tableHeaderBackground: colors.white, + tableHeaderBackground: colors.grey[200], tableHeaderColor: colors.grey[900], + formSidebarTextColor: colors.white, highlight: '#FFEACC', secondaryContainer: colors.grey[200], contentWrapper: colors.grey[300], diff --git a/src/themes/themeTypes.ts b/src/themes/themeTypes.ts index 2f9da5c8ab..4f2f4bfdbf 100644 --- a/src/themes/themeTypes.ts +++ b/src/themes/themeTypes.ts @@ -80,6 +80,7 @@ declare module '@mui/material/styles' { featureStrategySegmentChipBackground: string; featureSegmentSearchBackground: string; dialogHeaderBackground: string; + formSidebarTextColor: string; /** * For table header hover effect. */ From 4d4abc51f21cfa85c407c39f50c2d60dbbe23627 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Fri, 15 Jul 2022 16:39:59 +0200 Subject: [PATCH 07/24] fix: remove console log --- src/component/providers/UIProvider/UIProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/component/providers/UIProvider/UIProvider.tsx b/src/component/providers/UIProvider/UIProvider.tsx index 5c8e13c758..071cb20fad 100644 --- a/src/component/providers/UIProvider/UIProvider.tsx +++ b/src/component/providers/UIProvider/UIProvider.tsx @@ -5,7 +5,6 @@ import { getLocalStorageItem } from 'utils/storage'; const resolveMode = (): themeMode => { const value = getLocalStorageItem('unleash-theme'); - console.log(value); if (value) { return value as themeMode; } From 22e9690a649f652699fc49ef7e2b699d1fc226e6 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Mon, 22 Aug 2022 16:45:05 +0200 Subject: [PATCH 08/24] fix: add properties --- src/component/App.styles.ts | 1 + src/themes/dark-theme.ts | 6 ++++++ src/themes/theme.ts | 2 ++ 3 files changed, 9 insertions(+) diff --git a/src/component/App.styles.ts b/src/component/App.styles.ts index c6b04a0447..c4f4aa4e8b 100644 --- a/src/component/App.styles.ts +++ b/src/component/App.styles.ts @@ -5,6 +5,7 @@ export const useStyles = makeStyles()(theme => ({ '& ul': { margin: 0, }, + height: 'calc(100% - 412px)', }, primaryBreadcrumb: { color: 'white', diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index daa067bb18..2be58deab1 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -144,6 +144,12 @@ export default createTheme({ edited: 'blue', background: '#efefef', }, + neutral: { + light: colors.grey[100], + main: colors.grey[700], + dark: colors.grey[800], + border: colors.grey[500], + }, activityIndicators: { unknown: themeColors.secondary, recent: themeColors.secondary, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index 2852652420..b99ffc7f65 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -363,6 +363,8 @@ export default createTheme({ }), }), }), + }, + }, MuiInputBase: { styleOverrides: { root: { From 912c2e258152aa3278dfe5eb1f59cdf13121ec72 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Mon, 22 Aug 2022 17:14:23 +0200 Subject: [PATCH 09/24] fix: strategy container --- src/component/App.styles.ts | 1 - src/component/common/InstanceStatus/InstanceStatus.tsx | 10 ++++++++-- .../StrategyItemContainer.styles.ts | 2 +- .../FeatureOverviewEnvSwitches.tsx | 2 +- .../FeatureOverviewEnvironment.styles.ts | 1 - .../FeatureOverviewEnvironment.tsx | 2 +- src/themes/dark-theme.ts | 3 ++- 7 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/component/App.styles.ts b/src/component/App.styles.ts index c4f4aa4e8b..c6b04a0447 100644 --- a/src/component/App.styles.ts +++ b/src/component/App.styles.ts @@ -5,7 +5,6 @@ export const useStyles = makeStyles()(theme => ({ '& ul': { margin: 0, }, - height: 'calc(100% - 412px)', }, primaryBreadcrumb: { color: 'white', diff --git a/src/component/common/InstanceStatus/InstanceStatus.tsx b/src/component/common/InstanceStatus/InstanceStatus.tsx index 4bb3626a65..2af9b6edfd 100644 --- a/src/component/common/InstanceStatus/InstanceStatus.tsx +++ b/src/component/common/InstanceStatus/InstanceStatus.tsx @@ -3,7 +3,7 @@ import React, { FC, VFC, useEffect, useState, useContext } from 'react'; import { InstanceStatusBar } from 'component/common/InstanceStatus/InstanceStatusBar'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; -import { Typography } from '@mui/material'; +import { Typography, useTheme } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import { IInstanceStatus } from 'interfaces/instance'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; @@ -91,6 +91,7 @@ export const InstanceStatus: FC = ({ children }) => { useInstanceStatus(); const { extendTrial } = useInstanceStatusApi(); const { setToastApiError } = useToast(); + const theme = useTheme(); const onExtendTrial = async () => { try { @@ -102,7 +103,12 @@ export const InstanceStatus: FC = ({ children }) => { }; return ( -
+
( diff --git a/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts b/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts index a196ad6052..701ed5f7e4 100644 --- a/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts +++ b/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts @@ -7,7 +7,7 @@ export const useStyles = makeStyles()(theme => ({ '& + &': { marginTop: theme.spacing(2), }, - background: theme.palette.background.default, + background: theme.palette.background.paper, }, header: { padding: theme.spacing(0.5, 2), diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx index 7118c48757..84fa25d88b 100644 --- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx +++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx @@ -9,7 +9,7 @@ import { styled } from '@mui/material'; const StyledContainer = styled('div')(({ theme }) => ({ borderRadius: theme.shape.borderRadiusLarge, - backgroundColor: '#fff', + backgroundColor: theme.palette.background.paper, display: 'flex', flexDirection: 'column', padding: '1.5rem', diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts index a9b540cae6..f4ea62eaa3 100644 --- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts +++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts @@ -4,7 +4,6 @@ export const useStyles = makeStyles()(theme => ({ featureOverviewEnvironment: { borderRadius: theme.shape.borderRadiusLarge, marginBottom: theme.spacing(2), - background: theme.palette.background.default, padding: '0.2rem', backgroundColor: theme.palette.background.paper, }, diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 37f86b3e94..0441e4016f 100644 --- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -53,7 +53,7 @@ const FeatureOverviewEnvironment = ({ style={{ background: !env.enabled ? theme.palette.neutral.light - : theme.palette.background.default, + : theme.palette.background.paper, }} > Date: Tue, 23 Aug 2022 10:14:47 +0200 Subject: [PATCH 10/24] feat: feature flag --- src/component/menu/Header/Header.tsx | 19 +++++++++++-------- .../providers/UIProvider/UIProvider.tsx | 18 ++++++++++++++---- .../UIProvider/UIProviderContainer.tsx | 16 ++++++++++++++++ src/index.tsx | 6 +++--- src/interfaces/uiConfig.ts | 1 + src/themes/dark-theme.ts | 12 ++++++------ 6 files changed, 51 insertions(+), 21 deletions(-) create mode 100644 src/component/providers/UIProvider/UIProviderContainer.tsx diff --git a/src/component/menu/Header/Header.tsx b/src/component/menu/Header/Header.tsx index 8b330ea42e..16b654dfe6 100644 --- a/src/component/menu/Header/Header.tsx +++ b/src/component/menu/Header/Header.tsx @@ -32,12 +32,10 @@ import classNames from 'classnames'; import { useId } from 'hooks/useId'; import { IRoute } from 'interfaces/route'; import UIContext from 'contexts/UIContext'; -import { createLocalStorage } from 'utils/createLocalStorage'; import { setLocalStorageItem } from 'utils/storage'; const Header: VFC = () => { const { mode, setMode } = useContext(UIContext); - const theme = useTheme(); const adminId = useId(); const configId = useId(); @@ -174,14 +172,19 @@ const Header: VFC = () => { />
- + } + label="darkmode" /> } - label="darkmode" /> { +const resolveMode = (darkmode: boolean): themeMode => { const value = getLocalStorageItem('unleash-theme'); if (value) { return value as themeMode; } - const osDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + let osDark; + if (darkmode) { + osDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + } if (osDark) { return 'dark'; @@ -17,10 +20,17 @@ const resolveMode = (): themeMode => { return 'light'; }; -const UIProvider: React.FC = ({ children }) => { +interface IUiProviderProps { + darkmode: boolean; +} + +const UIProvider: React.FC = ({ + children, + darkmode = false, +}) => { const [toastData, setToast] = useState(createEmptyToast()); const [showFeedback, setShowFeedback] = useState(false); - const [mode, setMode] = useState(resolveMode()); + const [mode, setMode] = useState(resolveMode(darkmode)); const context = React.useMemo( () => ({ diff --git a/src/component/providers/UIProvider/UIProviderContainer.tsx b/src/component/providers/UIProvider/UIProviderContainer.tsx new file mode 100644 index 0000000000..3769d17dd9 --- /dev/null +++ b/src/component/providers/UIProvider/UIProviderContainer.tsx @@ -0,0 +1,16 @@ +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import UIProvider from './UIProvider'; + +export const UIProviderContainer: React.FC = ({ children }) => { + const { uiConfig } = useUiConfig(); + + if (!uiConfig.flags) { + return null; + } + + return ( + + {children} + + ); +}; diff --git a/src/index.tsx b/src/index.tsx index 8340227e40..5e28bea193 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,12 +10,12 @@ import { ScrollTop } from 'component/common/ScrollTop/ScrollTop'; import { AccessProvider } from 'component/providers/AccessProvider/AccessProvider'; import { basePath } from 'utils/formatPath'; import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider'; -import UIProvider from 'component/providers/UIProvider/UIProvider'; import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider'; import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus'; +import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer'; ReactDOM.render( - + @@ -30,6 +30,6 @@ ReactDOM.render( - , + , document.getElementById('app') ); diff --git a/src/interfaces/uiConfig.ts b/src/interfaces/uiConfig.ts index 1a0e65563b..0ba61b15ee 100644 --- a/src/interfaces/uiConfig.ts +++ b/src/interfaces/uiConfig.ts @@ -38,6 +38,7 @@ export interface IFlags { T?: boolean; UNLEASH_CLOUD?: boolean; UG?: boolean; + DARK_MODE?: boolean; } export interface IVersionInfo { diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index 017d5eb7ec..6d8dab9287 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -20,6 +20,7 @@ export default createTheme({ }, boxShadows: { main: '0px 2px 4px rgba(129, 122, 254, 0.2)', + card: '0px 2px 10px rgba(28, 25, 78, 0.12)', elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)', }, typography: { @@ -35,7 +36,6 @@ export default createTheme({ }, fontSizes: { mainHeader: '1.25rem', - subHeader: '1.1rem', bodySize: '1rem', smallBody: `${14 / 16}rem`, smallerBody: `${12 / 16}rem`, @@ -47,10 +47,10 @@ export default createTheme({ bold: 700, }, shape: { - borderRadius: '4px', - borderRadiusMedium: '8px', - borderRadiusLarge: '12px', - borderRadiusExtraLarge: '20px', + borderRadius: 4, + borderRadiusMedium: 8, + borderRadiusLarge: 12, + borderRadiusExtraLarge: 20, tableRowHeight: 64, tableRowHeightCompact: 56, tableRowHeightDense: 48, @@ -75,7 +75,7 @@ export default createTheme({ success: { light: colors.green[50], main: colors.green[600], - dark: themeColors.textColor, + dark: themeColors.main, border: colors.green[300], }, warning: { From d52eb1ee8c7cf03b79664d5354cfd33bf11b748a Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Tue, 23 Aug 2022 10:29:39 +0200 Subject: [PATCH 11/24] fix: tests --- src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx | 2 +- src/themes/dark-theme.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx b/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx index 77d3329739..04d088a221 100644 --- a/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx +++ b/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx @@ -13,7 +13,7 @@ test('renders an empty list correctly', () => { - + diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index 6d8dab9287..3ff03e002d 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -142,7 +142,6 @@ export default createTheme({ diffSub: 'red', diffNeutral: 'black', edited: 'blue', - background: '#efefef', }, neutral: { light: colors.darkblue[500], From fc2c54ad4eb1c377bf5ccd4c408b89ab1a658c88 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Tue, 23 Aug 2022 10:41:31 +0200 Subject: [PATCH 12/24] fix: build --- src/themes/dark-theme.ts | 10 +++++++--- src/themes/theme.ts | 1 - 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/themes/dark-theme.ts b/src/themes/dark-theme.ts index 3ff03e002d..712067a18c 100644 --- a/src/themes/dark-theme.ts +++ b/src/themes/dark-theme.ts @@ -113,6 +113,7 @@ export default createTheme({ featureStrategySegmentChipBackground: themeColors.secondary, featureSegmentSearchBackground: themeColors.secondary, dialogHeaderBackground: themeColors.secondary, + lightBorder: colors.darkblue[500], constraintAccordion: { editBackground: colors.darkblue[600], background: themeColors.secondary, @@ -156,9 +157,12 @@ export default createTheme({ inactive: themeColors.secondary, abandoned: themeColors.secondary, }, - statusBadge: { - success: themeColors.secondary, - warning: themeColors.secondary, + tertiary: { + light: colors.grey[200], + main: colors.grey[400], + dark: colors.grey[600], + background: 'white', + contrast: colors.grey[300], }, inactiveIcon: colors.grey[600], }, diff --git a/src/themes/theme.ts b/src/themes/theme.ts index b99ffc7f65..af5a15f207 100644 --- a/src/themes/theme.ts +++ b/src/themes/theme.ts @@ -104,7 +104,6 @@ export default createTheme({ background: 'white', contrast: colors.grey[300], }, - divider: colors.grey[300], dividerAlternative: colors.grey[400], tableHeaderHover: colors.grey[400], From 45bef080d93a5080534e472ded62b9ab76cf81d0 Mon Sep 17 00:00:00 2001 From: Fredrik Oseberg Date: Tue, 23 Aug 2022 11:42:08 +0200 Subject: [PATCH 13/24] fix: logo --- package.json | 5 +++-- src/assets/img/logoWithWhiteText.svg | 1 + src/component/menu/Header/Header.tsx | 18 +++++++++++++++--- .../playground/Playground/Playground.tsx | 12 +++++++----- .../PlaygroundEditor/PlaygroundEditor.tsx | 5 +++++ src/themes/dark-theme.ts | 5 +++-- src/themes/theme.ts | 1 + src/themes/themeTypes.ts | 1 + yarn.lock | 16 ++++++++++++++++ 9 files changed, 52 insertions(+), 12 deletions(-) create mode 100644 src/assets/img/logoWithWhiteText.svg diff --git a/package.json b/package.json index 19543e2f2f..8af464fc03 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "isready": "yarn lint && yarn fmt && yarn prepare" }, "devDependencies": { + "@codemirror/lang-json": "6.0.0", "@emotion/react": "11.9.3", "@emotion/styled": "11.9.3", "@mui/icons-material": "5.8.4", @@ -62,6 +63,7 @@ "@types/react-test-renderer": "17.0.2", "@types/react-timeago": "4.1.3", "@types/semver": "7.3.12", + "@uiw/react-codemirror": "4.11.4", "@vitejs/plugin-react": "1.3.2", "chart.js": "3.9.1", "chartjs-adapter-date-fns": "2.0.0", @@ -102,8 +104,7 @@ "vite-tsconfig-paths": "3.5.0", "vitest": "0.22.1", "whatwg-fetch": "3.6.2", - "@codemirror/lang-json": "6.0.0", - "@uiw/react-codemirror": "4.11.4" + "@uiw/codemirror-theme-duotone": "^4.11.5" }, "jest": { "moduleNameMapper": { diff --git a/src/assets/img/logoWithWhiteText.svg b/src/assets/img/logoWithWhiteText.svg new file mode 100644 index 0000000000..c966754f9e --- /dev/null +++ b/src/assets/img/logoWithWhiteText.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/component/menu/Header/Header.tsx b/src/component/menu/Header/Header.tsx index 16b654dfe6..cfeeaad3bc 100644 --- a/src/component/menu/Header/Header.tsx +++ b/src/component/menu/Header/Header.tsx @@ -16,6 +16,7 @@ import UserProfile from 'component/user/UserProfile'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import MenuBookIcon from '@mui/icons-material/MenuBook'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; +import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -135,9 +136,20 @@ const Header: VFC = () => { )} aria-label="Home" > - + } + elseShow={ + + } />