Theme consistency updates (#960)

* fix: theme palette and shape

* fix: update snapshots

* fix: adjust after review

frontend/src/component/admin/users/UsersAdmin.tsx

@@ -38,6 +38,9 @@ const UsersAdmin = () => {
                                             }
                                         />
                                         <Button
+                                            sx={{
+                                                ml: 1.5,
+                                            }}
                                             variant="contained"
                                             color="primary"
                                             onClick={() =>

frontend/src/component/common/Codebox/Codebox.styles.ts

@@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
     container: {
         backgroundColor: theme.palette.primary.main,
         padding: '1rem',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         position: 'relative',
         maxHeight: '500px',
         overflow: 'auto',

frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts

@@ -75,7 +75,7 @@ export const useStyles = makeStyles()(theme => ({
         },
     },
     editingBadge: {
-        borderRadius: '25px',
+        borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '0.25rem 0.5rem',
         backgroundColor: '#635DC5',
         color: '#fff',

frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts

@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     container: {
         padding: '0.5rem 0.75rem',
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
         backgroundColor: theme.palette.grey[200],
         lineHeight: 1.25,
     },
@@ -21,7 +21,7 @@ export const useStyles = makeStyles()(theme => ({
         '& > span': {
             display: 'inline-block',
             padding: '0 0.25rem',
-            borderRadius: theme.borderRadius.main,
+            borderRadius: theme.shape.borderRadius,
             fontSize: theme.fontSizes.smallerBody,
             backgroundColor: theme.palette.primary.light,
             color: 'white',

frontend/src/component/common/DividerText/DividerText.styles.ts

@@ -10,8 +10,8 @@ export const useStyles = makeStyles()(theme => ({
     wing: {
         width: '80px',
         height: '3px',
-        backgroundColor: theme.palette.division.main,
+        backgroundColor: theme.palette.divider,
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
     },
     text: {
         textAlign: 'center',

frontend/src/component/common/PageContent/styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     headerContainer: {
-        padding: '1.8rem 2rem',
+        padding: theme.spacing(2, 4),
         borderBottom: `1px solid ${theme.palette.grey[100]}`,
         [theme.breakpoints.down('md')]: {
             padding: '1.5rem 1rem',

frontend/src/component/common/PaginateUI/PaginationUI.styles.ts

@@ -19,7 +19,7 @@ export const useStyles = makeStyles()(theme => ({
         backgroundColor: 'efefef',
         margin: '0 0.2rem',
         width: '31px',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         padding: '0.25rem 0.5rem',
     },
     paginationButtonActive: {
@@ -29,7 +29,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     idxBtn: {
         border: 'none',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         background: 'transparent',
         position: 'absolute',
         height: '23px',

frontend/src/component/common/SearchField/styles.ts

@@ -10,8 +10,8 @@ export const useStyles = makeStyles()(theme => ({
     search: {
         display: 'flex',
         alignItems: 'center',
-        backgroundColor: theme.palette.searchField.main,
+        backgroundColor: theme.palette.background.default,
-        borderRadius: '25px',
+        borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '0.25rem 0.5rem',
         maxWidth: '450px',
         [theme.breakpoints.down('sm')]: {

frontend/src/component/common/SkipNav/SkipNavLink.styles.ts

@@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
         textDecoration: 'none',
         background: theme.palette.primary.dark,
         color: theme.palette.primary.contrastText,
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
         fontSize: theme.fontSizes.smallBody,
 
         [theme.breakpoints.down(960)]: {

frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     tabNav: {
-        backgroundColor: theme.palette.tabs.main,
+        backgroundColor: theme.palette.background.paper,
     },
     tab: {
         [theme.breakpoints.up('lg')]: {

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts

@@ -6,6 +6,9 @@ export const useStyles = makeStyles()(theme => ({
         position: 'relative',
         '&:hover, &:focus': {
             backgroundColor: theme.palette.grey[400],
+            '& svg': {
+                color: 'inherit',
+            },
         },
     },
     sortButton: {

frontend/src/component/common/Table/TableActions/TableActions.tsx

@@ -80,10 +80,6 @@ export const TableActions: FC<ITableActionsProps> = ({
                     </>
                 }
             />
-            <ConditionallyRender
-                condition={Boolean(isSeparated)}
-                show={<div className={styles.verticalSeparator} />}
-            />
             {children}
         </div>
     );

frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts

@@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
         backgroundColor: theme.palette.background.paper,
         border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: '25px',
+        borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '3px 5px 3px 12px',
         maxWidth: '450px',
         [theme.breakpoints.down('sm')]: {
@@ -34,7 +34,8 @@ export const useStyles = makeStyles()(theme => ({
         },
     },
     clearIcon: {
-        color: theme.palette.grey[600],
+        // color: theme.palette.grey[700],
+        color: 'red',
         fontSize: '18px',
     },
     inputRoot: {

frontend/src/component/common/Table/TableSearch/TableSearchField/TableSearchField.styles.ts

@@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
         backgroundColor: theme.palette.background.paper,
         border: `1px solid ${theme.palette.grey[300]}`,
-        borderRadius: '25px',
+        borderRadius: theme.shape.borderRadiusExtraLarge,
         padding: '3px 5px 3px 12px',
         maxWidth: '450px',
         [theme.breakpoints.down('sm')]: {
@@ -34,7 +34,7 @@ export const useStyles = makeStyles()(theme => ({
         },
     },
     clearIcon: {
-        color: theme.palette.grey[600],
+        color: theme.palette.grey[700],
         fontSize: '18px',
     },
     inputRoot: {

frontend/src/component/common/Table/TableToolbar/TableToolbar.styles.ts

@@ -19,7 +19,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     verticalSeparator: {
         height: '100%',
-        backgroundColor: theme.palette.grey[500],
+        borderColor: theme.palette.grey[500],
         width: '1px',
         display: 'inline-block',
         marginLeft: theme.spacing(2),

frontend/src/component/common/Table/TableToolbar/TableToolbar.tsx

@@ -1,6 +1,7 @@
 import { FC, VFC } from 'react';
-import { Box, Toolbar, Typography } from '@mui/material';
+import { Divider, Box, Toolbar } from '@mui/material';
 import { useStyles } from './TableToolbar.styles';
+import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 
 interface ITableToolbarProps {
     title: string;
@@ -13,20 +14,24 @@ export const TableToolbarComponent: FC<ITableToolbarProps> & {
 
     return (
         <Toolbar className={styles.toolbar}>
-            <Typography variant="h1" data-loading>
+            <HeaderTitle title={title} data-loading />
-                {title}
-            </Typography>
             <Box className={styles.actions}>{children}</Box>
         </Toolbar>
     );
 };
 
-const Divider: VFC = () => {
+const ToolbarDivider: VFC = () => {
     const { classes: styles } = useStyles();
 
-    return <Box className={styles.verticalSeparator} />;
+    return (
+        <Divider
+            orientation="vertical"
+            variant="middle"
+            className={styles.verticalSeparator}
+        />
+    );
 };
 
-TableToolbarComponent.Divider = Divider;
+TableToolbarComponent.Divider = ToolbarDivider;
 
 export const TableToolbar = TableToolbarComponent;

frontend/src/component/context/ContectFormChip/ContextFormChip.styles.ts

@@ -10,7 +10,7 @@ export const useStyles = makeStyles()(theme => ({
         gap: '0.5rem',
         padding: '0.5rem',
         background: theme.palette.grey[200],
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
         wordBreak: 'break-word',
     },
     label: {

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.styles.ts

@@ -20,6 +20,6 @@ export const useStyles = makeStyles()(theme => ({
         marginBlock: '0.2rem',
         display: 'grid',
         alignItems: 'center',
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
     },
 }));

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts

@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
-    container: {
+    wrapper: {
         paddingTop: theme.spacing(1.5),
         paddingBottom: theme.spacing(1.5),
         paddingLeft: theme.spacing(2),
@@ -9,9 +9,21 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         minHeight: '62px',
+        '&:hover, &:focus': {
+            textDecoration: 'none',
+            '& > div > span:first-of-type': {
+                textDecoration: 'underline',
+            },
+        },
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
     },
     description: {
         color: theme.palette.grey[800],
+        textDecoration: 'none',
         fontSize: 'inherit',
         display: 'inline-block',
         maxWidth: '250px',

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.tsx

@@ -25,18 +25,16 @@ export const FeatureLinkCell: FC<IFeatureLinkCellProps> = ({
             component={RouterLink}
             to={to}
             underline="hover"
-            className={styles.container}
+            className={styles.wrapper}
         >
-            <div>
+            <div className={styles.container}>
                 <span data-loading>
                     <Highlighter search={search}>{title}</Highlighter>
                 </span>
-
                 <ConditionallyRender
                     condition={Boolean(subtitle)}
                     show={
                         <>
-                            <br />
                             <Typography
                                 className={styles.description}
                                 component="span"

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureSeenCell/FeatureSeenCell.tsx

@@ -31,21 +31,21 @@ const useFeatureColor = () => {
     return (unit?: string): string => {
         switch (unit) {
             case 'second':
-                return theme.palette.success.light;
+                return theme.palette.activityIndicators.recent;
             case 'minute':
-                return theme.palette.success.light;
+                return theme.palette.activityIndicators.recent;
             case 'hour':
-                return theme.palette.success.light;
+                return theme.palette.activityIndicators.recent;
             case 'day':
-                return theme.palette.success.light;
+                return theme.palette.activityIndicators.recent;
             case 'week':
-                return theme.palette.warning.light;
+                return theme.palette.activityIndicators.inactive;
             case 'month':
-                return theme.palette.error.light;
+                return theme.palette.activityIndicators.abandoned;
             case 'year':
-                return theme.palette.error.light;
+                return theme.palette.activityIndicators.abandoned;
             default:
-                return theme.palette.grey[100];
+                return theme.palette.activityIndicators.unknown;
         }
     };
 };

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx

@@ -182,7 +182,7 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
                         {rows.map(row => {
                             prepareRow(row);
                             return (
-                                <TableRow {...row.getRowProps()}>
+                                <TableRow hover {...row.getRowProps()}>
                                     {row.cells.map(cell => (
                                         <TableCell {...cell.getCellProps()}>
                                             {cell.render('Cell')}

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureTypeCell/FeatureTypeCell.styles.ts

@@ -8,7 +8,6 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
     },
     icon: {
-        marginTop: theme.spacing(0.5),
         color: theme.palette.grey[600],
     },
 }));

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts

@@ -18,6 +18,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     tableCellHeaderSortable: {
         cursor: 'pointer',
+        background: theme.palette.grey[50],
     },
     tableCellStatus: {
         width: '60px',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         backgroundColor: '#fff',
         display: 'flex',
         flexDirection: 'column',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
         border: `1px solid ${theme.palette.grey[300]}`,
         '& + &': {
             marginTop: '1rem',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         color: '#fff',
         backgroundColor: theme.palette.primary.light,
         display: 'flex',

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         backgroundColor: theme.palette.primary.light,
         display: 'flex',
         flexDirection: 'column',

frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts

@@ -6,7 +6,7 @@ export const useStyles = makeStyles()(theme => ({
         height: '42px',
         fontSize: '0.7em',
         background: 'gray',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         textAlign: 'center',
         display: 'flex',
         alignItems: 'center',

frontend/src/component/feature/FeatureView/FeatureView.styles.ts

@@ -1,10 +1,14 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
-    container: { borderRadius: '10px', boxShadow: 'none', display: 'flex' },
+    container: {
+        borderRadius: theme.shape.borderRadiusLarge,
+        boxShadow: 'none',
+        display: 'flex',
+    },
     header: {
         backgroundColor: '#fff',
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         marginBottom: '1rem',
     },
     toggleInfoContainer: {

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

@@ -131,18 +131,18 @@ exports[`FeedbackCESForm 1`] = `
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-1rae96v-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-rrmchf-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
-                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1632cvv-MuiInputBase-input-MuiOutlinedInput-input"
                 id="mui-1"
                 rows="3"
                 style="height: 0px; overflow: hidden;"
               />
               <textarea
                 aria-hidden="true"
-                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
+                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1632cvv-MuiInputBase-input-MuiOutlinedInput-input"
                 readonly=""
                 style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding: 0px; width: 100%;"
                 tabindex="-1"
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
+            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"

frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts

@@ -2,12 +2,12 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     blue: {
-        color: theme.code.edited,
+        color: theme.palette.code.edited,
     },
     negative: {
-        color: theme.code.diffSub,
+        color: theme.palette.code.diffSub,
     },
     positive: {
-        color: theme.code.diffAdd,
+        color: theme.palette.code.diffAdd,
     },
 }));

frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts

@@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
     historyItem: {
         padding: '5px',
         '&:nth-of-type(odd)': {
-            backgroundColor: theme.code.background,
+            backgroundColor: theme.palette.code.background,
         },
     },
 }));

frontend/src/component/history/EventLog/EventLog.styles.ts

@@ -5,7 +5,7 @@ export const useStyles = makeStyles()(theme => ({
         border: `1px solid ${theme.palette.grey[100]}`,
         padding: '1rem',
         margin: '1rem 0',
-        borderRadius: theme.borderRadius.main,
+        borderRadius: theme.shape.borderRadius,
     },
     history: {
         '& code': {
@@ -13,16 +13,16 @@ export const useStyles = makeStyles()(theme => ({
             whiteSpace: 'pre',
             fontFamily: 'monospace',
             lineHeight: '100%',
-            color: theme.code.main,
+            color: theme.palette.code.main,
         },
         '& code > .diff-N': {
-            color: theme.code.diffAdd,
+            color: theme.palette.code.diffAdd,
         },
         '& code > .diff-D': {
-            color: theme.code.diffSub,
+            color: theme.palette.code.diffSub,
         },
         '& code > .diff-A, .diff-E': {
-            color: theme.code.diffNeutral,
+            color: theme.palette.code.diffNeutral,
         },
         '& dl': {
             padding: '0',

frontend/src/component/menu/Footer/Footer.styles.ts

@@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({
         margin: 0,
         '& a': {
             textDecoration: 'none',
-            color: theme.palette.footer.main,
+            color: theme.palette.text.primary,
         },
     },
 }));

frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap

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

frontend/src/component/project/Project/Project.styles.ts

@@ -11,7 +11,7 @@ export const useStyles = makeStyles()(theme => ({
     projectToggles: { width: '100%', minHeight: '100%' },
     header: {
         backgroundColor: '#fff',
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         marginBottom: '1rem',
     },
     innerContainer: {

frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts

@@ -55,7 +55,7 @@ export const useStyles = makeStyles()(theme => ({
         textAlign: 'center',
         marginBottom: '1rem',
         backgroundColor: '#fff',
-        borderRadius: '10px',
+        borderRadius: theme.shape.borderRadiusLarge,
         width: '100%',
         padding: '1.5rem 1rem 1.5rem 1rem',
         [theme.breakpoints.down('md')]: {

frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 [
   <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
+    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
     style={
       {
         "borderRadius": "10px",
@@ -12,7 +12,7 @@ exports[`renders correctly 1`] = `
     }
   >
     <div
-      className="tss-8bhpw1-headerContainer"
+      className="tss-ee3n06-headerContainer"
     >
       <div
         className="tss-14s7qul-headerTitleContainer"
@@ -22,7 +22,7 @@ exports[`renders correctly 1`] = `
           data-loading={true}
         >
           <h1
-            className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-ylrecv-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
           >
             Strategies
           </h1>
@@ -35,7 +35,7 @@ exports[`renders correctly 1`] = `
           >
             <button
               aria-describedby="useId-0"
-              className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
+              className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
               data-testid="ADD_NEW_STRATEGY_ID"
               disabled={false}
               onBlur={[Function]}
@@ -112,7 +112,7 @@ exports[`renders correctly 1`] = `
               </a>
             </span>
             <p
-              className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-1yab20-MuiTypography-root"
+              className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
             >
               Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
             </p>

frontend/src/component/styles.module.scss

@@ -3,11 +3,6 @@
     ul {
         margin: 0;
     }
-    hr {
-        margin: 0;
-        height: auto;
-        border-color: rgba(0, 0, 0, 0.12);
-    }
 }
 
 .primaryBreadbrumb {

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders an empty list correctly 1`] = `
 [
   <div
-    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
+    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
     style={
       {
         "borderRadius": "10px",
@@ -12,7 +12,7 @@ exports[`renders an empty list correctly 1`] = `
     }
   >
     <div
-      className="tss-8bhpw1-headerContainer"
+      className="tss-ee3n06-headerContainer"
     >
       <div
         className="tss-14s7qul-headerTitleContainer"
@@ -22,7 +22,7 @@ exports[`renders an empty list correctly 1`] = `
           data-loading={true}
         >
           <h1
-            className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-ylrecv-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
           >
             Tag Types
           </h1>
@@ -31,7 +31,7 @@ exports[`renders an empty list correctly 1`] = `
           className="tss-ap2nhp-headerActions"
         >
           <button
-            className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
+            className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
             disabled={false}
             onBlur={[Function]}
             onClick={[Function]}

frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts

@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     container: {
         border: '1px solid #f1f1f1',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         position: 'relative',
         maxWidth: '350px',
         color: '#44606e',
@@ -26,7 +26,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     statusBar: {
         width: '50px',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         backgroundColor: 'red',
         height: '6px',
     },

frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts

@@ -15,7 +15,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     leftContainer: {
         width: '40%',
-        borderRadius: '3px',
+        borderRadius: theme.shape.borderRadius,
         [theme.breakpoints.down('md')]: {
             borderRadius: '0',
             width: '100%',

frontend/src/hooks/useFeaturesSort.ts

@@ -175,7 +175,7 @@ const compareNullableDates = (
     a: Date | null | undefined,
     b: Date | null | undefined
 ): number => {
-    return a && b ? a.getTime() - b.getTime() : a ? 1 : b ? -1 : 0;
+    return a && b ? a?.getTime?.() - b?.getTime?.() : a ? 1 : b ? -1 : 0;
 };
 const sortByExpired = (
     features: Readonly<FeatureSchema[]>

frontend/src/themes/colors.ts

@@ -32,6 +32,7 @@ export const colors = {
         900: '#A6000E',
         800: '#D11525',
         700: '#D93644',
+        600: '#E04C59',
         500: '#E04C59',
         400: '#F0616D',
         300: '#FEB0B7',

frontend/src/themes/theme.ts

@@ -2,9 +2,6 @@ import { createTheme } from '@mui/material/styles';
 import { colors } from './colors';
 
 export default createTheme({
-    borderRadius: {
-        main: '3px',
-    },
     boxShadows: {
         main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
     },
@@ -20,7 +17,7 @@ export default createTheme({
         },
     },
     fontSizes: {
-        mainHeader: '1.2rem',
+        mainHeader: '1.25rem',
         subHeader: '1.1rem',
         bodySize: '1rem',
         smallBody: '0.9rem',
@@ -32,13 +29,10 @@ export default createTheme({
         semi: 700,
         bold: 700,
     },
-    code: {
+    shape: {
-        main: '#0b8c8f',
+        borderRadius: '3px',
-        diffAdd: 'green',
+        borderRadiusLarge: '10px',
-        diffSub: 'red',
+        borderRadiusExtraLarge: '25px',
-        diffNeutral: 'black',
-        edited: 'blue',
-        background: '#efefef',
     },
     palette: {
         primary: {
@@ -51,42 +45,47 @@ export default createTheme({
             light: colors.purple[700],
             dark: colors.purple[900],
         },
+        info: {
+            light: colors.blue[700],
+            main: colors.blue[700],
+            dark: colors.blue[800],
+        },
         success: {
-            light: colors.green[100],
+            light: colors.green[700],
             main: colors.green[700],
             dark: colors.green[800],
         },
         warning: {
-            light: colors.orange[200],
+            light: colors.orange[700],
             main: colors.orange[700],
             dark: colors.orange[800],
         },
         error: {
-            light: colors.red[200],
+            light: colors.red[700],
             main: colors.red[700],
             dark: colors.red[800],
         },
+        divider: colors.grey[300],
+        dividerAlternative: colors.grey[500],
         grey: colors.grey,
-        // neutral: {
+        text: {
-        //     main: '#18243e',
+            primary: colors.grey[900],
-        // },
+            secondary: colors.grey[800],
-        chips: {
+            disabled: colors.grey[600],
-            main: '#b0bec5',
         },
-        searchField: {
+        code: {
-            main: '#fff',
+            main: '#0b8c8f',
+            diffAdd: 'green',
+            diffSub: 'red',
+            diffNeutral: 'black',
+            edited: 'blue',
+            background: '#efefef',
         },
-        iconButtons: {
+        activityIndicators: {
-            main: '#fff',
+            unknown: colors.grey[100],
-        },
+            recent: colors.green[100],
-        tabs: {
+            inactive: colors.orange[200],
-            main: '#efefef',
+            abandoned: colors.red[200],
-        },
-        division: {
-            main: '#f1f1f1',
-        },
-        footer: {
-            main: '#000',
         },
     },
     components: {
@@ -104,5 +103,23 @@ export default createTheme({
                 },
             },
         },
+        MuiBreadcrumbs: {
+            styleOverrides: {
+                root: {
+                    '& a': {
+                        color: colors.purple[900],
+                    },
+                },
+            },
+        },
+        MuiTableRow: {
+            styleOverrides: {
+                root: {
+                    '&.MuiTableRow-hover:hover': {
+                        background: colors.grey[100],
+                    },
+                },
+            },
+        },
     },
 });

frontend/src/themes/themeStyles.ts

@@ -33,13 +33,13 @@ export const useThemeStyles = makeStyles()(theme => ({
     },
     divider: {
         margin: '1rem 0',
-        backgroundColor: theme.palette.division.main,
+        backgroundColor: theme.palette.divider,
         height: '3px',
         width: '100%',
     },
     largeDivider: {
         margin: '2rem 0',
-        backgroundColor: theme.palette.division.main,
+        backgroundColor: theme.palette.divider,
         height: '3px',
         width: '100%',
     },

frontend/src/themes/themeTypes.ts

@@ -1,5 +1,3 @@
-import { SimplePaletteColorOptions } from '@mui/material';
-
 declare module '@mui/material/styles' {
     interface CustomTheme {
         /**
@@ -24,6 +22,15 @@ declare module '@mui/material/styles' {
         /**
          * @deprecated
          */
+        boxShadows: {
+            main: string;
+        };
+    }
+
+    interface CustomPalette {
+        /**
+         * Colors for event log output
+         */
         code: {
             main: string;
             diffAdd: string;
@@ -33,44 +40,15 @@ declare module '@mui/material/styles' {
             background: string;
         };
         /**
-         * @deprecated
+         * For 'Seen' column on feature toggles list
          */
-        borderRadius: {
+        activityIndicators: {
-            main: string;
+            unknown: string;
+            recent: string;
+            inactive: string;
+            abandoned: string;
         };
-        /**
+        dividerAlternative: string;
-         * @deprecated
-         */
-        boxShadows: {
-            main: string;
-        };
-    }
-
-    interface CustomPalette {
-        /**
-         * @deprecated
-         */
-        chips: SimplePaletteColorOptions;
-        /**
-         * @deprecated
-         */
-        searchField: SimplePaletteColorOptions;
-        /**
-         * @deprecated
-         */
-        iconButtons: SimplePaletteColorOptions;
-        /**
-         * @deprecated
-         */
-        tabs: SimplePaletteColorOptions;
-        /**
-         * @deprecated
-         */
-        division: SimplePaletteColorOptions;
-        /**
-         * @deprecated
-         */
-        footer: SimplePaletteColorOptions;
     }
 
     interface Theme extends CustomTheme {}
@@ -79,3 +57,12 @@ declare module '@mui/material/styles' {
     interface Palette extends CustomPalette {}
     interface PaletteOptions extends CustomPalette {}
 }
+
+declare module '@mui/system/createTheme/shape' {
+    interface Shape {
+        borderRadiusLarge: string;
+        borderRadiusExtraLarge: string;
+    }
+}
+
+export {};