fix: feature toggle list and UI adjustments (#970)

* fix: add highlight and hover colors, fix them

* misc ui adjustments

* test isGrow prop in table cols

* fix: revert typography changes, update snaps

* Update src/themes/themeTypes.ts

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* fix: misc ui adjustments

* fix: backButton color

* refactor: color not needed, can be inherited

* fix: project roles case, new borderRadius values

* fix: color green

* fix: feature form link

* update snaps

* fix: formatting

* update snap

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

frontend/src/component/App.styles.ts

@@ -0,0 +1,81 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+    container: {
+        height: '100%',
+        '& ul': {
+            margin: 0,
+        },
+    },
+    primaryBreadcrumb: {
+        color: 'white',
+    },
+    headerTitleLink: {
+        color: 'white',
+        textDecoration: 'none',
+    },
+    contentWrapper: {
+        margin: '0 auto',
+        flex: 1,
+        width: '100%',
+        backgroundColor: theme.palette.grey[300],
+    },
+    content: {
+        width: '1250px',
+        margin: '16px auto',
+        [theme.breakpoints.down(1260)]: {
+            width: '1024px',
+        },
+        [theme.breakpoints.down(1024)]: {
+            width: '100%',
+            marginLeft: 0,
+            marginRight: 0,
+        },
+        [theme.breakpoints.down('sm')]: {
+            minWidth: '100%',
+        },
+    },
+    contentContainer: {
+        padding: '2rem 0',
+        height: '100%',
+    },
+    drawerTitle: {
+        lineHeight: '1 !important',
+        paddingTop: '16px',
+        paddingBottom: '16px',
+        paddingLeft: '24px !important',
+        [theme.breakpoints.down(1024)]: {
+            paddingTop: '12px',
+            paddingBottom: '12px',
+            paddingLeft: '16px !important',
+        },
+    },
+    drawerTitleLogo: {
+        paddingRight: '16px',
+    },
+    drawerTitleText: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        fontSize: theme.fontSizes.smallerBody,
+    },
+    navigation: {
+        padding: '8px 5px 8px 0 !important',
+    },
+    navigationLink: {
+        padding: '12px 20px !important',
+        borderRadius: '0 50px 50px 0',
+        textDecoration: 'none',
+        [theme.breakpoints.down(1024)]: {
+            padding: '12px 16px !important',
+        },
+    },
+    navigationIcon: {
+        marginRight: '16px',
+    },
+    iconGitHub: {
+        width: '24px',
+        height: '24px',
+        background:
+            'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=)',
+    },
+}));

frontend/src/component/App.tsx

@@ -11,10 +11,11 @@ import { routes } from 'component/menu/routes';
 import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
-import styles from 'component/styles.module.scss';
+import { useStyles } from './App.styles';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const App = () => {
+    const { classes: styles } = useStyles();
     const { authDetails } = useAuthDetails();
     const { user } = useAuthUser();
     const isLoggedIn = Boolean(user?.id);

frontend/src/component/admin/menu/AdminMenu.tsx

@@ -57,7 +57,7 @@ function AdminMenu() {
                                 to="/admin/roles"
                                 style={createNavLinkStyle}
                             >
-                                <span>PROJECT ROLES</span>
+                                <span>Project Roles</span>
                             </NavLink>
                         }
                     />

frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts

@@ -27,9 +27,9 @@ export const useStyles = makeStyles()(theme => ({
         flexWrap: 'wrap',
     },
     header: {
-        color: theme.palette.primary.light,
+        color: theme.palette.primary.main,
     },
     icon: {
-        fill: theme.palette.primary.light,
+        fill: theme.palette.primary.main,
     },
 }));

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

@@ -195,7 +195,7 @@ const UsersList = ({ search }: IUsersListProps) => {
                             sort={sort}
                             setSort={setSort}
                         >
-                            Last seen
+                            Last login
                         </TableCellSortable>
                         <TableCell align="center">
                             {hasAccess(ADMIN) ? 'Actions' : ''}

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

@@ -2,9 +2,9 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
     container: {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.sidebarContainer,
         padding: '1rem',
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: theme.shape.borderRadiusMedium,
         position: 'relative',
         maxHeight: '500px',
         overflow: 'auto',

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

@@ -56,7 +56,7 @@ export const useStyles = makeStyles()(theme => ({
     },
     headerValues: {
         fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.primary.light,
+        color: theme.palette.primary.main,
     },
     headerValuesExpand: {
         fontSize: theme.fontSizes.smallBody,

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

@@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({
         borderRadius: 0,
     },
     sidebar: {
-        backgroundColor: theme.palette.primary.light,
+        backgroundColor: theme.palette.primary.main,
         padding: '2rem',
         flexGrow: 0,
         flexShrink: 0,
@@ -32,6 +32,10 @@ export const useStyles = makeStyles()(theme => ({
             padding: '2rem 1rem',
         },
     },
+    sidebarDivider: {
+        opacity: 0.3,
+        marginBottom: '8px',
+    },
     title: {
         marginBottom: '1.5rem',
         fontWeight: 'normal',
@@ -62,6 +66,9 @@ export const useStyles = makeStyles()(theme => ({
     documentationLink: {
         color: '#fff',
         display: 'block',
+        '&:hover': {
+            textDecoration: 'none',
+        },
     },
     formContent: {
         backgroundColor: '#fff',

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -1,7 +1,13 @@
 import { useStyles } from './FormTemplate.styles';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import Codebox from '../Codebox/Codebox';
-import { Collapse, IconButton, useMediaQuery, Tooltip } from '@mui/material';
+import {
+    Collapse,
+    IconButton,
+    useMediaQuery,
+    Tooltip,
+    Divider,
+} from '@mui/material';
 import { FileCopy, Info } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import Loader from '../Loader/Loader';
@@ -93,6 +99,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                         documentationLink={documentationLink}
                         documentationLinkLabel={documentationLinkLabel}
                     >
+                        <Divider className={styles.sidebarDivider} />
                         <h2 className={styles.subtitle}>
                             API Command{' '}
                             <Tooltip title="Copy command" arrow>

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

@@ -0,0 +1,9 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+    highlighter: {
+        '&>mark': {
+            backgroundColor: theme.palette.highlight,
+        },
+    },
+}));

frontend/src/component/common/Highlighter/Highlighter.tsx

@@ -1,4 +1,5 @@
 import { VFC } from 'react';
+import { useStyles } from './Highlighter.styles';
 
 interface IHighlighterProps {
     search?: string;
@@ -13,6 +14,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
     children,
     caseSensitive,
 }) => {
+    const { classes } = useStyles();
     if (!children) {
         return null;
     }
@@ -25,6 +27,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
 
     return (
         <span
+            className={classes.highlighter}
             dangerouslySetInnerHTML={{
                 __html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
             }}

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

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

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx

@@ -9,6 +9,7 @@ import { SortArrow } from './SortArrow/SortArrow';
 interface ICellSortableProps {
     isSortable?: boolean;
     isSorted?: boolean;
+    isGrow?: boolean;
     isDescending?: boolean;
     ariaTitle?: string;
     onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -18,6 +19,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
     children,
     isSortable = true,
     isSorted = false,
+    isGrow = false,
     isDescending,
     ariaTitle,
     onClick = () => {},
@@ -44,7 +46,10 @@ export const CellSortable: FC<ICellSortableProps> = ({
         <TableCell
             component="th"
             aria-sort={ariaSort}
-            className={classnames(styles.tableCellHeaderSortable)}
+            className={classnames(
+                styles.tableCellHeaderSortable,
+                isGrow && 'grow'
+            )}
         >
             <ConditionallyRender
                 condition={isSortable}

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

@@ -5,12 +5,16 @@ export const useStyles = makeStyles()(theme => ({
         '& > th': {
             border: 0,
             '&:first-of-type': {
-                borderTopLeftRadius: '8px',
+                borderTopLeftRadius: theme.shape.borderRadiusMedium,
-                borderBottomLeftRadius: '8px',
+                borderBottomLeftRadius: theme.shape.borderRadiusMedium,
             },
             '&:last-of-type': {
-                borderTopRightRadius: '8px',
+                borderTopRightRadius: theme.shape.borderRadiusMedium,
-                borderBottomRightRadius: '8px',
+                borderBottomRightRadius: theme.shape.borderRadiusMedium,
+            },
+            ':not(.grow)': {
+                width: '0.1%',
+                whiteSpace: 'nowrap',
             },
         },
     },

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

@@ -4,6 +4,10 @@ import { HeaderGroup } from 'react-table';
 import { useStyles } from './SortableTableHeader.styles';
 import { CellSortable } from './CellSortable/CellSortable';
 
+interface IHeaderGroupColumn extends HeaderGroup<object> {
+    isGrow?: boolean;
+}
+
 interface ISortableTableHeaderProps {
     headerGroups: HeaderGroup<object>[];
 }
@@ -19,7 +23,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
                     {...headerGroup.getHeaderGroupProps()}
                     className={styles.tableHeader}
                 >
-                    {headerGroup.headers.map(column => {
+                    {headerGroup.headers.map((column: IHeaderGroupColumn) => {
                         const content = column.render('Header');
 
                         return (
@@ -35,6 +39,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
                                 isSortable={column.canSort}
                                 isSorted={column.isSorted}
                                 isDescending={column.isSortedDesc}
+                                isGrow={column.isGrow}
                             >
                                 {content}
                             </CellSortable>

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

@@ -17,9 +17,6 @@ export const useStyles = makeStyles()(theme => ({
             minWidth: '379px',
         },
     },
-    link: {
-        color: theme.palette.primary.light,
-    },
     label: {
         minWidth: '300px',
         [theme.breakpoints.down(600)]: {

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -153,7 +153,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                         your client SDKs will emit events you can listen for
                         every time this toggle gets triggered. Learn more in{' '}
                         <a
-                            className={styles.link}
                             target="_blank"
                             rel="noopener noreferrer"
                             href="https://docs.getunleash.io/advanced/impression_data"

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts

@@ -7,7 +7,6 @@ export const useStyles = makeStyles()(theme => ({
     link: {
         display: 'block',
         margin: '1rem 0 0 0',
-        color: 'inherit',
     },
     envName: {
         fontWeight: 'bold',

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

@@ -20,15 +20,12 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
+        wordBreak: 'break-all',
     },
     description: {
         color: theme.palette.grey[800],
         textDecoration: 'none',
         fontSize: 'inherit',
         display: 'inline-block',
-        maxWidth: '250px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
     },
 }));

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

@@ -71,6 +71,7 @@ const columns = [
             />
         ),
         sortType: 'alphanumeric',
+        isGrow: true,
     },
     {
         Header: 'Created on',

frontend/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.light,
+        backgroundColor: theme.palette.primary.main,
         display: 'flex',
         flexDirection: 'column',
         maxWidth: '350px',
@@ -40,6 +40,7 @@ export const useStyles = makeStyles()(theme => ({
     bodyItem: {
         margin: '0.5rem 0',
         fontSize: theme.fontSizes.bodySize,
+        wordBreak: 'break-all',
     },
     headerIcon: {
         marginRight: '1rem',

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

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

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

@@ -15,6 +15,9 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
     },
+    toolbarContainer: {
+        flexShrink: 0,
+    },
     innerContainer: {
         padding: '1rem 2rem',
         display: 'flex',
@@ -30,7 +33,7 @@ export const useStyles = makeStyles()(theme => ({
         height: '1px',
     },
     tabContainer: {
-        padding: '1rem 2rem',
+        padding: '0 2rem',
     },
     tabButton: {
         textTransform: 'none',
@@ -46,6 +49,7 @@ export const useStyles = makeStyles()(theme => ({
         fontWeight: 'normal',
         display: 'flex',
         alignItems: 'center',
+        wordBreak: 'break-all',
     },
     statusContainer: {
         marginLeft: '0.5rem',

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -138,7 +138,7 @@ export const FeatureView = () => {
                                 />
                             </div>
 
-                            <div>
+                            <div className={styles.toolbarContainer}>
                                 <PermissionIconButton
                                     permission={CREATE_FEATURE}
                                     projectId={projectId}

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

@@ -131,7 +131,7 @@ 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-rrmchf-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-181wpo2-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
@@ -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-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import classnames from 'classnames';
 import { makeStyles } from 'tss-react/mui';
 import { Grid } from '@mui/material';
-import styles from 'component/styles.module.scss';
+import { useStyles as useAppStyles } from 'component/App.styles';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
 import Proclamation from 'component/common/Proclamation/Proclamation';
@@ -34,6 +34,7 @@ interface IMainLayoutProps {
 
 export const MainLayout = ({ children }: IMainLayoutProps) => {
     const { classes } = useStyles();
+    const { classes: styles } = useAppStyles();
     const { uiConfig } = useUiConfig();
 
     return (

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

@@ -25,7 +25,7 @@ export const useStyles = makeStyles()(theme => ({
         height: '1px',
     },
     tabContainer: {
-        padding: '1rem 2rem',
+        padding: '0 2rem',
     },
     tabButton: {
         textTransform: 'none',

frontend/src/component/project/Project/Project.tsx

@@ -119,7 +119,7 @@ const Project = () => {
                     <h2
                         data-loading
                         className={styles.title}
-                        style={{ margin: 0 }}
+                        style={{ margin: 0, width: '100%' }}
                     >
                         <div className={styles.titleText}>{project?.name}</div>
                         <PermissionIconButton

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

@@ -26,6 +26,7 @@ export const useStyles = makeStyles()(theme => ({
         display: 'flex',
         width: '100%',
         textAlign: 'left',
+        wordBreak: 'break-all',
     },
     percentageContainer: {
         display: 'flex',

frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts

@@ -23,7 +23,6 @@ export const useStyles = makeStyles()(theme => ({
     },
     cancelButton: {
         marginLeft: '1.5rem',
-        color: theme.palette.primary.light,
     },
     inputDescription: {
         marginBottom: '0.5rem',

frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts

@@ -31,7 +31,6 @@ export const useStyles = makeStyles()(theme => ({
     },
     cancelButton: {
         marginLeft: '1.5rem',
-        color: theme.palette.primary.light,
     },
     inputDescription: {
         marginBottom: '1rem',
@@ -61,7 +60,6 @@ export const useStyles = makeStyles()(theme => ({
     },
     backButton: {
         marginRight: 'auto',
-        color: theme.palette.primary.light,
     },
     addContextContainer: {
         marginTop: '1rem',

frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx

@@ -101,7 +101,8 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
                     </SidebarModal>
                     <PermissionButton
                         permission={CREATE_CONTEXT_FIELD}
-                        className={styles.addContextButton}
+                        variant="outlined"
+                        color="primary"
                         startIcon={<Add />}
                         onClick={() => setOpen(true)}
                     >

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

@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 [
   <div>
     <div
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
     >
       <div
         className="tss-1yjkq3l-headerContainer"
@@ -33,7 +33,7 @@ exports[`renders correctly 1`] = `
               >
                 <button
                   aria-describedby="useId-0"
-                  className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+                  className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
                   data-testid="ADD_NEW_STRATEGY_ID"
                   disabled={false}
                   onBlur={[Function]}

frontend/src/component/styles.module.scss

@@ -1,107 +0,0 @@
-.container {
-    height: 100%;
-    ul {
-        margin: 0;
-    }
-}
-
-.primaryBreadbrumb {
-    color: #fff;
-}
-
-.headerTitleLink {
-    color: #fff;
-}
-
-.contentWrapper {
-    margin: 0 auto;
-    flex: 1;
-    width: 100%;
-    background-color: #ecebeb;
-}
-
-.content {
-    width: 1250px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 16px;
-    margin-bottom: 16px;
-}
-
-.contentContainer {
-    padding: var(--page-padding);
-    height: 100%;
-}
-
-@media (max-width: 1260px) {
-    .content {
-        width: 1024px;
-    }
-}
-@media (max-width: 1024px) {
-    .content {
-        width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-    }
-}
-@media (max-width: 600px) {
-    .content {
-        width: 100%;
-        margin-left: 0;
-        margin-right: 0;
-        min-width: 100%;
-    }
-}
-
-.headerTitleLink {
-    text-decoration: none;
-}
-
-.drawerTitle {
-    line-height: 1 !important;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    padding-left: 24px !important;
-}
-
-@media screen and (max-width: 1024px) {
-    .drawerTitle {
-        padding-top: 12px;
-        padding-bottom: 12px;
-        padding-left: 16px !important;
-    }
-}
-.drawerTitleLogo {
-    padding-right: 16px;
-}
-.drawerTitleText {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 0.8em;
-}
-
-.navigation {
-    padding: 8px 5px 8px 0 !important;
-}
-
-.navigationLink {
-    padding: 12px 20px !important;
-    border-radius: 0 50px 50px 0;
-    text-decoration: none;
-}
-@media screen and (max-width: 1024px) {
-    .navigationLink {
-        padding: 12px 16px !important;
-    }
-}
-
-.navigationIcon {
-    margin-right: 16px;
-}
-
-.iconGitHub {
-    width: 24px;
-    height: 24px;
-    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
-}

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

@@ -4,7 +4,7 @@ exports[`renders an empty list correctly 1`] = `
 [
   <div>
     <div
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
     >
       <div
         className="tss-1yjkq3l-headerContainer"
@@ -29,7 +29,7 @@ exports[`renders an empty list correctly 1`] = `
               className="tss-1u1bjy8-headerActions"
             >
               <button
-                className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
+                className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}

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

@@ -9,9 +9,7 @@ export const useStyles = makeStyles()(theme => ({
         },
     },
     link: {
-        textDecoration: 'none',
         fontWeight: 'bold',
-        color: theme.palette.primary.main,
         textAlign: 'center',
     },
     text: { fontWeight: 'bold', marginBottom: '0.5rem' },

frontend/src/themes/app.css

@@ -135,7 +135,11 @@ p {
 }
 
 a {
-    color: inherit;
+    color: #615bc2;
+}
+
+a:hover {
+    text-decoration: none;
 }
 
 #app {

frontend/src/themes/colors.ts

@@ -56,9 +56,10 @@ export const colors = {
         900: '#305200',
         800: '#3B6600',
         700: '#4D8400',
-        500: '#68A611',
+        600: '#68A611',
-        400: '#7FB435',
+        500: '#7FB435',
-        300: '#99C35D',
+        400: '#99C35D',
+        300: '#B0D182',
         200: '#CFE5AE',
         100: '#E4F0D3',
         50: '#F4FAEB',

frontend/src/themes/theme.ts

@@ -30,9 +30,10 @@ export default createTheme({
         bold: 700,
     },
     shape: {
-        borderRadius: '3px',
+        borderRadius: '4px',
-        borderRadiusLarge: '10px',
+        borderRadiusMedium: '8px',
-        borderRadiusExtraLarge: '25px',
+        borderRadiusLarge: '12px',
+        borderRadiusExtraLarge: '20px',
     },
     palette: {
         primary: {
@@ -46,27 +47,30 @@ export default createTheme({
             dark: colors.purple[900],
         },
         info: {
-            light: colors.blue[700],
+            light: colors.blue[50],
-            main: colors.blue[700],
+            main: colors.blue[500],
-            dark: colors.blue[800],
+            dark: colors.blue[700],
         },
         success: {
-            light: colors.green[700],
+            light: colors.green[50],
-            main: colors.green[700],
+            main: colors.green[500],
             dark: colors.green[800],
         },
         warning: {
-            light: colors.orange[700],
+            light: colors.orange[100],
-            main: colors.orange[700],
+            main: colors.orange[800],
-            dark: colors.orange[800],
+            dark: colors.orange[900],
         },
         error: {
-            light: colors.red[700],
+            light: colors.red[50],
             main: colors.red[700],
             dark: colors.red[800],
         },
         divider: colors.grey[300],
         dividerAlternative: colors.grey[500],
+        tableHeaderHover: colors.grey[400],
+        highlight: '#FFEACC',
+        sidebarContainer: 'rgba(32,32,33, 0.2)',
         grey: colors.grey,
         text: {
             primary: colors.grey[900],
@@ -93,14 +97,23 @@ export default createTheme({
             styleOverrides: {
                 root: {
                     color: colors.purple[900],
+                    '&:hover': {
+                        textDecoration: 'none',
+                    },
                 },
             },
         },
         MuiBreadcrumbs: {
             styleOverrides: {
                 root: {
+                    color: colors.grey[900],
+                    fontSize: '0.875rem',
                     '& a': {
                         color: colors.purple[900],
+                        textDecoration: 'underline',
+                        '&:hover': {
+                            textDecoration: 'none',
+                        },
                     },
                 },
             },
@@ -128,5 +141,86 @@ export default createTheme({
                 },
             },
         },
+        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: {
+                    '& .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',
+                    },
+                },
+            },
+        },
     },
 });

frontend/src/themes/themeTypes.ts

@@ -29,7 +29,7 @@ declare module '@mui/material/styles' {
 
     interface CustomPalette {
         /**
-         * Colors for event log output
+         * Colors for event log output.
          */
         code: {
             main: string;
@@ -40,7 +40,7 @@ declare module '@mui/material/styles' {
             background: string;
         };
         /**
-         * For 'Seen' column on feature toggles list
+         * For 'Seen' column on feature toggles list.
          */
         activityIndicators: {
             unknown: string;
@@ -49,6 +49,18 @@ declare module '@mui/material/styles' {
             abandoned: string;
         };
         dividerAlternative: string;
+        /**
+         * For table header hover effect.
+         */
+        tableHeaderHover: string;
+        /**
+         * Text highlight effect color. Used when filtering/searching over content.
+         */
+        highlight: string;
+        /**
+         * For sidebar container background.
+         */
+        sidebarContainer: string;
     }
 
     interface Theme extends CustomTheme {}
@@ -60,6 +72,7 @@ declare module '@mui/material/styles' {
 
 declare module '@mui/system/createTheme/shape' {
     interface Shape {
+        borderRadiusMedium: string;
         borderRadiusLarge: string;
         borderRadiusExtraLarge: string;
     }