feat: dark theme v1 (#3298)

## 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 <github@nunogois.com>
Unleash · Mar 22, 2023 · 705462f · 705462f
1 parent 5585a9b
commit 705462f
Show file tree

Hide file tree

Showing 95 changed files with 826 additions and 888 deletions.
diff --git a/frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg b/frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg
diff --git 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,25 +24,24 @@ export const UserToken = ({ token }: IUserTokenProps) => {
     };
 
     return (
-        <div
-            style={{
-                backgroundColor: '#efefef',
-                padding: '2rem',
-                borderRadius: '3px',
-                margin: '0',
-                marginTop: '1rem',
+        <Box
+            sx={theme => ({
+                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}
             <Tooltip title="Copy token" arrow>
                 <IconButton onClick={copyToken} size="large">
                     <CopyIcon />
                 </IconButton>
             </Tooltip>
-        </div>
+        </Box>
     );
 };
diff --git 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
@@ -240,7 +240,7 @@ export const GoogleAuth = () => {
                             Save
                         </Button>{' '}
                         <p>
-                            <small style={{ color: 'red' }}>
+                            <small style={{ color: 'error.dark' }}>
                                 {errors?.message}
                             </small>
                         </p>

diff --git 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
@@ -26,7 +26,7 @@ export const GroupEmpty = () => {
                 to="/admin/groups/create-group"
                 component={Link}
                 variant="outlined"
-                color="secondary"
+                color="primary"
             >
                 Create your first group
             </Button>

diff --git 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
@@ -35,7 +35,7 @@ export const InviteLinkBar: VFC = () => {
         <Typography
             component="span"
             variant="body2"
-            color={willExpireSoon ? 'warning.main' : 'inherit'}
+            color={willExpireSoon ? 'warning.dark' : 'inherit'}
             fontWeight="bold"
         >
             {expiresIn}
@@ -56,17 +56,17 @@ export const InviteLinkBar: VFC = () => {
 
     return (
         <Box
-            sx={{
-                backgroundColor: 'background.paper',
+            sx={theme => ({
+                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}
         >
             <Box

diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { CircularProgress } from '@mui/material';
+import { CircularProgress, Link } from '@mui/material';
 import { Warning } from '@mui/icons-material';
 import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -49,9 +49,9 @@ export const ApplicationList = () => {
                 <br />
                 You can read more about how to use Unleash in your application
                 in the{' '}
-                <a href="https://docs.getunleash.io/docs/sdks/">
+                <Link href="https://docs.getunleash.io/docs/sdks/">
                     documentation.
-                </a>
+                </Link>
             </section>
         </>
     );

diff --git 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',
                         }}
                     >
-                        <Paper>
+                        <Paper className="dropdown-outline">
                             <ClickAwayListener onClickAway={onClose}>
                                 <MenuList
                                     id="review-options-menu"

diff --git a/frontend/src/component/common/ApiTokenTable/ApiTokenTable.tsx b/frontend/src/component/common/ApiTokenTable/ApiTokenTable.tsx
@@ -11,7 +11,14 @@ import {
     TableCell,
     TablePlaceholder,
 } from 'component/common/Table';
-import { Box, Table, TableBody, TableRow, useMediaQuery } from '@mui/material';
+import {
+    Box,
+    Table,
+    TableBody,
+    TableRow,
+    useMediaQuery,
+    Link,
+} from '@mui/material';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { ApiTokenDocs } from 'component/admin/apiToken/ApiTokenDocs/ApiTokenDocs';
 
@@ -117,13 +124,13 @@ export const ApiTokenTable = ({
                             <TablePlaceholder>
                                 <span>
                                     {'No tokens available. Read '}
-                                    <a
+                                    <Link
                                         href="https://docs.getunleash.io/how-to/api"
                                         target="_blank"
                                         rel="noreferrer"
                                     >
                                         API How-to guides
-                                    </a>{' '}
+                                    </Link>{' '}
                                     {' to learn more.'}
                                 </span>
                             </TablePlaceholder>

diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
@@ -37,7 +37,7 @@ const StyledBadge = styled('div')<IBadgeProps>(
         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
@@ -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
@@ -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/...rdion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/...rdion/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/...rdion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/...rdion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
@@ -111,7 +111,7 @@ export const FreeTextInput = ({
                 <Button
                     className={styles.button}
                     variant="outlined"
-                    color="secondary"
+                    color="primary"
                     onClick={() => addValues()}
                 >
                     Add values

diff --git a/...on/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/...on/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx
@@ -39,6 +39,7 @@ export const CaseSensitiveButton = ({
                 }
                 elseShow={
                     <StyledToggleButtonOn
+                        className="operator-is-active"
                         onClick={setCaseInsensitive}
                         disableRipple
                     >

diff --git a/...straintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/...straintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
@@ -7,7 +7,6 @@ import {
     StyledToggleButtonOn,
 } from '../StyledToggleButton';
 import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
-import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 
 interface InvertedOperatorButtonProps {
     localConstraint: IConstraint;
@@ -17,59 +16,36 @@ interface InvertedOperatorButtonProps {
 export const InvertedOperatorButton = ({
     localConstraint,
     setInvertedOperator,
-}: 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>
-    );
-};
+}: InvertedOperatorButtonProps) => (
+    <Tooltip
+        title={
+            Boolean(localConstraint.inverted)
+                ? 'Remove negation'
+                : 'Negate operator'
+        }
+        arrow
+    >
+        <Box sx={{ display: 'flex', alignItems: 'stretch' }}>
+            <ConditionallyRender
+                condition={Boolean(localConstraint.inverted)}
+                show={
+                    <StyledToggleButtonOn
+                        className="operator-is-active"
+                        onClick={setInvertedOperator}
+                        disableRipple
+                    >
+                        <NegatedIcon />
+                    </StyledToggleButtonOn>
+                }
+                elseShow={
+                    <StyledToggleButtonOff
+                        onClick={setInvertedOperator}
+                        disableRipple
+                    >
+                        <NegatedIconOff />
+                    </StyledToggleButtonOff>
+                }
+            />
+        </Box>
+    </Tooltip>
+);
diff --git a/.../component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/.../component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -170,7 +170,10 @@ export const ConstraintAccordionList = forwardRef<
                         <div>
                             <StyledAddCustomLabel>
                                 <p>Add any number of constraints</p>
-                                <StyledHelpWrapper title="Help" arrow>
+                                <StyledHelpWrapper
+                                    title="View constraints documentation"
+                                    arrow
+                                >
                                     <a
                                         href={
                                             'https://docs.getunleash.io/reference/strategy-constraints'
@@ -186,7 +189,7 @@ export const ConstraintAccordionList = forwardRef<
                                 type="button"
                                 onClick={onAdd}
                                 variant="outlined"
-                                color="secondary"
+                                color="primary"
                             >
                                 Add constraint
                             </Button>

diff --git a/.../component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/.../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/...cordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx b/...cordionView/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',
     },