Feat/dark mode exp (#1137)

* feat: add dark mode theme * fix: feature metrics * fix: add color * styling * fix: add switch * fix: form sidebar * fix: remove console log * fix: add properties * fix: strategy container * feat: feature flag * fix: tests * fix: build * fix: logo * fix: icon * fix: update snapshots * fix: CES operator * fix: typography * fix: input styling * fix: remove initial load * fix: change flag name * fix: refactor to custom hook * fix: remove unused import * fix: dialog headers * fix: use uiConfig flags instead of flags
Unleash · Aug 23, 2022 · 5b2ed9c · 5b2ed9c
1 parent d37479d
commit 5b2ed9c
Show file tree

Hide file tree

Showing 60 changed files with 860 additions and 115 deletions.
diff --git 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
diff --git 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/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
@@ -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/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.formSidebarTextColor,
         fontSize: 14,
     },
     icon: {

diff --git 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/...straintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/...straintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
@@ -1,4 +1,4 @@
-import { Box, Tooltip } from '@mui/material';
+import { Box, Tooltip, useTheme } from '@mui/material';
 import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
 import { ReactComponent as NegatedIconOff } from 'assets/icons/24_Negator off.svg';
 import { IConstraint } from 'interfaces/strategy';
@@ -7,6 +7,7 @@ import {
     StyledToggleButtonOn,
 } from '../StyledToggleButton';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 interface InvertedOperatorButtonProps {
     localConstraint: IConstraint;
@@ -16,35 +17,59 @@ interface InvertedOperatorButtonProps {
 export const InvertedOperatorButton = ({
     localConstraint,
     setInvertedOperator,
-}: InvertedOperatorButtonProps) => (
-    <Tooltip
-        title={
-            Boolean(localConstraint.inverted)
-                ? 'Remove negation'
-                : 'Negate operator'
-        }
-        arrow
-    >
-        <Box sx={{ display: 'flex', alignItems: 'stretch' }}>
-            <ConditionallyRender
-                condition={Boolean(localConstraint.inverted)}
-                show={
-                    <StyledToggleButtonOn
-                        onClick={setInvertedOperator}
-                        disableRipple
-                    >
-                        <NegatedIcon />
-                    </StyledToggleButtonOn>
-                }
-                elseShow={
-                    <StyledToggleButtonOff
-                        onClick={setInvertedOperator}
-                        disableRipple
-                    >
-                        <NegatedIconOff />
-                    </StyledToggleButtonOff>
-                }
-            />
-        </Box>
-    </Tooltip>
-);
+}: InvertedOperatorButtonProps) => {
+    const theme = useTheme();
+
+    return (
+        <Tooltip
+            title={
+                Boolean(localConstraint.inverted)
+                    ? 'Remove negation'
+                    : 'Negate operator'
+            }
+            arrow
+        >
+            <Box sx={{ display: 'flex', alignItems: 'stretch' }}>
+                <ConditionallyRender
+                    condition={Boolean(localConstraint.inverted)}
+                    show={
+                        <StyledToggleButtonOn
+                            onClick={setInvertedOperator}
+                            disableRipple
+                        >
+                            <ThemeMode
+                                darkmode={
+                                    <NegatedIcon
+                                        style={{
+                                            fill: theme.palette.background
+                                                .paper,
+                                        }}
+                                    />
+                                }
+                                lightmode={<NegatedIcon />}
+                            />
+                        </StyledToggleButtonOn>
+                    }
+                    elseShow={
+                        <StyledToggleButtonOff
+                            onClick={setInvertedOperator}
+                            disableRipple
+                        >
+                            <ThemeMode
+                                darkmode={
+                                    <NegatedIconOff
+                                        style={{
+                                            fill: theme.palette.background
+                                                .paper,
+                                        }}
+                                    />
+                                }
+                                lightmode={<NegatedIconOff />}
+                            />
+                        </StyledToggleButtonOff>
+                    }
+                />
+            </Box>
+        </Tooltip>
+    );
+};
diff --git a/src/component/common/ConstraintAccordion/ConstraintIcon.tsx b/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
@@ -14,6 +14,7 @@ export const ConstraintIcon: VFC<IConstraintIconProps> = ({ compact }) => (
             borderRadius: '50%',
             width: compact ? '18px' : '24px',
             height: compact ? '18px' : '24px',
+            marginRight: '13px',
         }}
     >
         <TrackChanges

diff --git 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
@@ -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.dialogHeaderText,
         height: '150px',
         padding: '2rem 3rem',
         clipPath: ' ellipse(130% 115px at 120% 20%)',

diff --git 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.formSidebarTextColor,
         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.formSidebarTextColor,
         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/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 (
-        <div style={{ height: '100%' }}>
+        <div
+            style={{
+                height: '100%',
+                backgroundColor: theme.palette.background.paper,
+            }}
+        >
             <ConditionallyRender
                 condition={isBilling && Boolean(instanceStatus)}
                 show={() => (

diff --git 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/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/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/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/common/ThemeMode/ThemeMode.tsx b/src/component/common/ThemeMode/ThemeMode.tsx
@@ -0,0 +1,20 @@
+import UIContext from 'contexts/UIContext';
+import { useContext } from 'react';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+
+interface IThemeModeProps {
+    darkmode: JSX.Element;
+    lightmode: JSX.Element;
+}
+
+export const ThemeMode = ({ darkmode, lightmode }: IThemeModeProps) => {
+    const { themeMode } = useContext(UIContext);
+
+    return (
+        <ConditionallyRender
+            condition={themeMode === 'dark'}
+            show={darkmode}
+            elseShow={lightmode}
+        />
+    );
+};
diff --git 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/...onent/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts b/...onent/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/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',
     },
 }));