Refactor makestyles 2 2 (#2827)

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

@@ -1,9 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    chip: {
-        background: 'transparent',
-        border: `1px solid ${theme.palette.primary.main}`,
-        color: theme.palette.primary.main,
-    },
-}));

frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx

@@ -1,17 +1,20 @@
-import { Chip } from '@mui/material';
+import { Chip, styled } from '@mui/material';
-import { useStyles } from './FeatureStatusChip.styles';
 
 interface IStatusChip {
     stale: boolean;
     showActive?: boolean;
 }
 
+const StyledChip = styled(Chip)(({ theme }) => ({
+    background: 'transparent',
+    border: `1px solid ${theme.palette.primary.main}`,
+    color: theme.palette.primary.main,
+}));
+
 export const FeatureStatusChip = ({
     stale,
     showActive = true,
 }: IStatusChip) => {
-    const { classes: styles } = useStyles();
-
     if (!stale && !showActive) {
         return null;
     }
@@ -23,10 +26,9 @@ export const FeatureStatusChip = ({
 
     return (
         <div data-loading style={{ marginLeft: '8px' }}>
-            <Chip
+            <StyledChip
                 color="primary"
                 variant="outlined"
-                className={styles.chip}
                 title={title}
                 label={value}
             />

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

@@ -1,109 +1 @@
-import { makeStyles } from 'tss-react/mui';
-
 export const formTemplateSidebarWidth = '27.5rem';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        minHeight: '80vh',
-        width: '100%',
-        display: 'flex',
-        margin: '0 auto',
-        borderRadius: '1rem',
-        overflow: 'hidden',
-        [theme.breakpoints.down(1100)]: {
-            flexDirection: 'column',
-            minHeight: 0,
-        },
-    },
-    modal: {
-        minHeight: '100vh',
-        borderRadius: 0,
-    },
-    sidebar: {
-        backgroundColor: theme.palette.formSidebar,
-        padding: '2rem',
-        flexGrow: 0,
-        flexShrink: 0,
-        width: formTemplateSidebarWidth,
-        [theme.breakpoints.down(1100)]: {
-            width: '100%',
-            color: 'red',
-        },
-        [theme.breakpoints.down(500)]: {
-            padding: '2rem 1rem',
-        },
-    },
-    sidebarDivider: {
-        opacity: 0.3,
-        marginBottom: '8px',
-    },
-    title: {
-        marginBottom: theme.fontSizes.mainHeader,
-        fontWeight: 'normal',
-    },
-    subtitle: {
-        color: theme.palette.formSidebarTextColor,
-        marginBottom: '1rem',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        fontWeight: theme.fontWeight.bold,
-        fontSize: theme.fontSizes.bodySize,
-    },
-    description: {
-        color: theme.palette.formSidebarTextColor,
-        zIndex: 1,
-        position: 'relative',
-    },
-    linkContainer: {
-        margin: '1.5rem 0',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    linkIcon: {
-        marginRight: '0.5rem',
-        color: '#fff',
-    },
-    documentationLink: {
-        color: '#fff',
-        display: 'block',
-        '&:hover': {
-            textDecoration: 'none',
-        },
-    },
-    formContent: {
-        backgroundColor: theme.palette.formBackground,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '3rem',
-        flexGrow: 1,
-        [theme.breakpoints.down(1200)]: {
-            padding: '2rem',
-        },
-        [theme.breakpoints.down(1100)]: {
-            width: '100%',
-        },
-        [theme.breakpoints.down(500)]: {
-            padding: '2rem 1rem',
-        },
-    },
-    icon: { fill: '#fff' },
-    mobileGuidanceBgContainer: {
-        zIndex: 1,
-        position: 'absolute',
-        right: -3,
-        top: -3,
-    },
-    mobileGuidanceBackground: {
-        width: '75px',
-        height: '75px',
-    },
-    mobileGuidanceButton: {
-        position: 'absolute',
-        zIndex: 400,
-        right: 0,
-    },
-    infoIcon: {
-        fill: '#fff',
-    },
-}));

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

@@ -1,4 +1,3 @@
-import { useStyles } from './FormTemplate.styles';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import Codebox from '../Codebox/Codebox';
 import {
@@ -7,6 +6,7 @@ import {
     useMediaQuery,
     Tooltip,
     Divider,
+    styled,
 } from '@mui/material';
 import { FileCopy, Info } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -14,9 +14,9 @@ import Loader from '../Loader/Loader';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import React, { useState } from 'react';
-import classNames from 'classnames';
 import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg';
-import { useThemeStyles } from 'themes/themeStyles';
+import { formTemplateSidebarWidth } from './FormTemplate.styles';
+import { relative } from 'themes/themeStyles';
 
 interface ICreateProps {
     title: string;
@@ -28,6 +28,126 @@ interface ICreateProps {
     formatApiCode: () => string;
 }
 
+const StyledContainer = styled('section', {
+    shouldForwardProp: prop => prop !== 'modal',
+})<{ modal?: boolean }>(({ theme, modal }) => ({
+    minHeight: modal ? '100vh' : '80vh',
+    borderRadius: modal ? 0 : theme.spacing(2),
+    width: '100%',
+    display: 'flex',
+    margin: '0 auto',
+    overflow: 'hidden',
+    [theme.breakpoints.down(1100)]: {
+        flexDirection: 'column',
+        minHeight: 0,
+    },
+}));
+
+const StyledRelativeDiv = styled('div')(({ theme }) => relative);
+
+const StyledFormContent = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.formBackground,
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(6),
+    flexGrow: 1,
+    [theme.breakpoints.down('lg')]: {
+        padding: theme.spacing(4),
+    },
+    [theme.breakpoints.down(1100)]: {
+        width: '100%',
+    },
+    [theme.breakpoints.down(500)]: {
+        padding: theme.spacing(4, 2),
+    },
+}));
+
+const StyledTitle = styled('h1')(({ theme }) => ({
+    marginBottom: theme.fontSizes.mainHeader,
+    fontWeight: 'normal',
+}));
+
+const StyledSidebarDivider = styled(Divider)(({ theme }) => ({
+    opacity: 0.3,
+    marginBottom: theme.spacing(0.5),
+}));
+
+const StyledSubtitle = styled('h2')(({ theme }) => ({
+    color: theme.palette.formSidebarTextColor,
+    marginBottom: theme.spacing(2),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSizes.bodySize,
+}));
+
+const StyledIcon = styled(FileCopy)(({ theme }) => ({
+    fill: theme.palette.text.tertiaryContrast,
+}));
+
+const StyledMobileGuidanceContainer = styled('div')(() => ({
+    zIndex: 1,
+    position: 'absolute',
+    right: -3,
+    top: -3,
+}));
+
+const StyledMobileGuidanceBackground = styled(MobileGuidanceBG)(() => ({
+    width: '75px',
+    height: '75px',
+}));
+
+const StyledMobileGuidanceButton = styled(IconButton)(() => ({
+    position: 'absolute',
+    zIndex: 400,
+    right: 0,
+}));
+
+const StyledInfoIcon = styled(Info)(({ theme }) => ({
+    fill: theme.palette.text.tertiaryContrast,
+}));
+
+const StyledSidebar = styled('aside')(({ theme }) => ({
+    backgroundColor: theme.palette.formSidebar,
+    padding: theme.spacing(4),
+    flexGrow: 0,
+    flexShrink: 0,
+    width: formTemplateSidebarWidth,
+    [theme.breakpoints.down(1100)]: {
+        width: '100%',
+        color: 'red',
+    },
+    [theme.breakpoints.down(500)]: {
+        padding: theme.spacing(4, 2),
+    },
+}));
+
+const StyledDescription = styled('p')(({ theme }) => ({
+    color: theme.palette.formSidebarTextColor,
+    zIndex: 1,
+    position: 'relative',
+}));
+
+const StyledLinkContainer = styled('div')(({ theme }) => ({
+    margin: theme.spacing(3, 0),
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
+    marginRight: theme.spacing(1),
+    color: theme.palette.text.tertiaryContrast,
+}));
+
+const StyledDocumentationLink = styled('a')(({ theme }) => ({
+    color: theme.palette.text.tertiaryContrast,
+    display: 'block',
+    '&:hover': {
+        textDecoration: 'none',
+    },
+}));
+
 const FormTemplate: React.FC<ICreateProps> = ({
     title,
     description,
@@ -39,8 +159,6 @@ const FormTemplate: React.FC<ICreateProps> = ({
     formatApiCode,
 }) => {
     const { setToastData } = useToast();
-    const { classes: styles } = useStyles();
-    const { classes: themeStyles } = useThemeStyles();
     const smallScreen = useMediaQuery(`(max-width:${1099}px)`);
 
     const copyCommand = () => {
@@ -64,33 +182,31 @@ const FormTemplate: React.FC<ICreateProps> = ({
     };
 
     return (
-        <section
+        <StyledContainer modal={modal}>
-            className={classNames(styles.container, modal && styles.modal)}
-        >
             <ConditionallyRender
                 condition={smallScreen}
                 show={
-                    <div className={themeStyles.relative}>
+                    <StyledRelativeDiv>
                         <MobileGuidance
                             description={description}
                             documentationLink={documentationLink}
                             documentationLinkLabel={documentationLinkLabel}
                         />
-                    </div>
+                    </StyledRelativeDiv>
                 }
             />
-            <div className={styles.formContent}>
+            <StyledFormContent>
                 <ConditionallyRender
                     condition={loading || false}
                     show={<Loader />}
                     elseShow={
                         <>
-                            <h1 className={styles.title}>{title}</h1>
+                            <StyledTitle>{title}</StyledTitle>
                             {children}
                         </>
                     }
                 />{' '}
-            </div>
+            </StyledFormContent>
             <ConditionallyRender
                 condition={!smallScreen}
                 show={
@@ -99,20 +215,20 @@ const FormTemplate: React.FC<ICreateProps> = ({
                         documentationLink={documentationLink}
                         documentationLinkLabel={documentationLinkLabel}
                     >
-                        <Divider className={styles.sidebarDivider} />
+                        <StyledSidebarDivider />
-                        <h2 className={styles.subtitle}>
+                        <StyledSubtitle>
                             API Command{' '}
                             <Tooltip title="Copy command" arrow>
                                 <IconButton onClick={copyCommand} size="large">
-                                    <FileCopy className={styles.icon} />
+                                    <StyledIcon />
                                 </IconButton>
                             </Tooltip>
-                        </h2>
+                        </StyledSubtitle>
                         <Codebox text={formatApiCode()} />
                     </Guidance>
                 }
             />
-        </section>
+        </StyledContainer>
     );
 };
 
@@ -128,21 +244,19 @@ const MobileGuidance = ({
     documentationLinkLabel,
 }: IMobileGuidance) => {
     const [open, setOpen] = useState(false);
-    const { classes: styles } = useStyles();
 
     return (
         <>
-            <div className={styles.mobileGuidanceBgContainer}>
+            <StyledMobileGuidanceContainer>
-                <MobileGuidanceBG className={styles.mobileGuidanceBackground} />
+                <StyledMobileGuidanceBackground />
-            </div>
+            </StyledMobileGuidanceContainer>
             <Tooltip title="Toggle help" arrow>
-                <IconButton
+                <StyledMobileGuidanceButton
-                    className={styles.mobileGuidanceButton}
                     onClick={() => setOpen(prev => !prev)}
                     size="large"
                 >
-                    <Info className={styles.infoIcon} />
+                    <StyledInfoIcon />
-                </IconButton>
+                </StyledMobileGuidanceButton>
             </Tooltip>
             <Collapse in={open} timeout={500}>
                 <Guidance
@@ -167,26 +281,23 @@ const Guidance: React.FC<IGuidanceProps> = ({
     documentationLink,
     documentationLinkLabel = 'Learn more',
 }) => {
-    const { classes: styles } = useStyles();
-
     return (
-        <aside className={styles.sidebar}>
+        <StyledSidebar>
-            <p className={styles.description}>{description}</p>
+            <StyledDescription>{description}</StyledDescription>
 
-            <div className={styles.linkContainer}>
+            <StyledLinkContainer>
-                <MenuBookIcon className={styles.linkIcon} />
+                <StyledLinkIcon />
-                <a
+                <StyledDocumentationLink
-                    className={styles.documentationLink}
                     href={documentationLink}
                     rel="noopener noreferrer"
                     target="_blank"
                 >
                     {documentationLinkLabel}
-                </a>
+                </StyledDocumentationLink>
-            </div>
+            </StyledLinkContainer>
 
             {children}
-        </aside>
+        </StyledSidebar>
     );
 };
 

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

@@ -1,9 +0,0 @@
-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,6 +1,6 @@
 import { VFC } from 'react';
-import { useStyles } from './Highlighter.styles';
 import { safeRegExp } from '@server/util/escape-regex';
+import { styled } from '@mui/material';
 
 interface IHighlighterProps {
     search?: string;
@@ -8,12 +8,17 @@ interface IHighlighterProps {
     caseSensitive?: boolean;
 }
 
+export const StyledSpan = styled('span')(({ theme }) => ({
+    '&>mark': {
+        backgroundColor: theme.palette.highlight,
+    },
+}));
+
 export const Highlighter: VFC<IHighlighterProps> = ({
     search,
     children,
     caseSensitive,
 }) => {
-    const { classes } = useStyles();
     if (!children) {
         return null;
     }
@@ -25,8 +30,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
     const regex = safeRegExp(search, caseSensitive ? 'g' : 'gi');
 
     return (
-        <span
+        <StyledSpan
-            className={classes.highlighter}
             dangerouslySetInnerHTML={{
                 __html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
             }}

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

@@ -5,8 +5,4 @@ export const useStyles = makeStyles()(theme => ({
         position: 'absolute',
         bottom: '-1rem',
     },
-    inputContainer: {
-        width: '100%',
-        position: 'relative',
-    },
 }));

frontend/src/component/common/Input/Input.tsx

@@ -1,6 +1,6 @@
 import { INPUT_ERROR_TEXT } from 'utils/testIds';
+import { TextField, OutlinedTextFieldProps, styled } from '@mui/material';
 import { useStyles } from './Input.styles';
-import { TextField, OutlinedTextFieldProps } from '@mui/material';
 
 interface IInputProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     label: string;
@@ -16,6 +16,11 @@ interface IInputProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     rows?: number;
 }
 
+const StyledDiv = styled('div')(({ theme }) => ({
+    width: '100%',
+    position: 'relative',
+}));
+
 const Input = ({
     label,
     placeholder,
@@ -29,7 +34,7 @@ const Input = ({
 }: IInputProps) => {
     const { classes: styles } = useStyles();
     return (
-        <div className={styles.inputContainer} data-loading>
+        <StyledDiv data-loading>
             <TextField
                 size="small"
                 variant="outlined"
@@ -49,7 +54,7 @@ const Input = ({
                 }}
                 {...rest}
             />
-        </div>
+        </StyledDiv>
     );
 };
 

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

@@ -1,15 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    loader: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '100vh',
-        backgroundColor: theme.palette.background.paper,
-    },
-    img: {
-        width: '100px',
-        height: '100px',
-    },
-}));

frontend/src/component/common/Loader/Loader.tsx

@@ -1,14 +1,25 @@
 import logo from 'assets/img/unleashLogoIconDarkAlpha.gif';
 import { formatAssetPath } from 'utils/formatPath';
-import { useStyles } from './Loader.styles';
+import { styled } from '@mui/material';
+
+const StyledDiv = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    backgroundColor: theme.palette.background.paper,
+}));
+
+const StyledImg = styled('img')(({ theme }) => ({
+    width: '100px',
+    height: '100px',
+}));
 
 const Loader = () => {
-    const { classes: styles } = useStyles();
-
     return (
-        <div className={styles.loader} role="alert" aria-label="Loading">
+        <StyledDiv role="alert" aria-label="Loading">
-            <img className={styles.img} src={formatAssetPath(logo)} alt="" />
+            <StyledImg src={formatAssetPath(logo)} alt="" />
-        </div>
+        </StyledDiv>
     );
 };
 

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

@@ -1,35 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        display: 'flex',
-        width: '80%',
-        margin: '0 auto',
-        [theme.breakpoints.down(700)]: {
-            flexDirection: 'column',
-            alignItems: 'center',
-        },
-    },
-    textContainer: {
-        width: '50%',
-        [theme.breakpoints.down(700)]: {
-            width: '100%',
-        },
-    },
-    iconContainer: {
-        width: '50%',
-        [theme.breakpoints.down(700)]: {
-            width: '100%',
-        },
-    },
-    icon: {
-        width: '300px',
-        height: '200px',
-        [theme.breakpoints.down(700)]: {
-            marginTop: '2rem',
-        },
-        [theme.breakpoints.down(500)]: {
-            display: 'none',
-        },
-    },
-}));

frontend/src/component/common/NoItems/NoItems.tsx

@@ -1,16 +1,50 @@
 import { ReactComponent as NoItemsIcon } from 'assets/icons/addfiles.svg';
-import { useStyles } from './NoItems.styles';
 import React from 'react';
+import { styled } from '@mui/material';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    width: '80%',
+    margin: '0 auto',
+    [theme.breakpoints.down(700)]: {
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+}));
+
+const StyledTextContainer = styled('div')(({ theme }) => ({
+    width: '50%',
+    [theme.breakpoints.down(700)]: {
+        width: '100%',
+    },
+}));
+
+const StyledIconContainer = styled('div')(({ theme }) => ({
+    width: '50%',
+    [theme.breakpoints.down(700)]: {
+        width: '100%',
+    },
+}));
+
+const StyledIcon = styled(NoItemsIcon)(({ theme }) => ({
+    width: '300px',
+    height: '200px',
+    [theme.breakpoints.down(700)]: {
+        marginTop: theme.spacing(4),
+    },
+    [theme.breakpoints.down(500)]: {
+        display: 'none',
+    },
+}));
 
 const NoItems: React.FC = ({ children }) => {
-    const { classes: styles } = useStyles();
     return (
-        <div className={styles.container}>
+        <StyledContainer>
-            <div className={styles.textContainer}>{children}</div>
+            <StyledTextContainer>{children}</StyledTextContainer>
-            <div className={styles.iconContainer}>
+            <StyledIconContainer>
-                <NoItemsIcon className={styles.icon} />
+                <StyledIcon />
-            </div>
+            </StyledIconContainer>
-        </div>
+        </StyledContainer>
     );
 };
 

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

@@ -1,35 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()({
-    container: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '100vh',
-        padding: '2rem',
-        position: 'fixed',
-        inset: 0,
-        backgroundColor: '#fff',
-        width: '100%',
-    },
-    logo: {
-        height: '80px',
-    },
-    content: {
-        display: 'flex',
-        position: 'relative',
-    },
-    buttonContainer: {
-        marginTop: '2rem',
-    },
-    homeButton: {
-        marginLeft: '1rem',
-    },
-    icon: {
-        height: '150px',
-        width: '150px',
-        position: 'absolute',
-        right: 100,
-        top: 45,
-    },
-});

frontend/src/component/common/NotFound/NotFound.tsx

@@ -1,14 +1,44 @@
-import { Button, Typography } from '@mui/material';
+import { Button, styled, Typography } from '@mui/material';
 import { useNavigate } from 'react-router';
 
 import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
-
-import { useStyles } from './NotFound.styles';
 import { GO_BACK } from 'constants/navigate';
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100vh',
+    padding: theme.spacing(4),
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: theme.palette.text.tertiaryContrast,
+    width: '100%',
+}));
+
+const StyledLogo = styled(LogoIcon)(({ theme }) => ({
+    height: '80px',
+}));
+
+const StyledContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    position: 'relative',
+}));
+
+const StyledButtonContainer = styled('div')(({ theme }) => ({
+    marginTop: theme.spacing(4),
+}));
+
+const StyledHomeButton = styled(Button)(({ theme }) => ({
+    height: '150px',
+    width: '150px',
+    position: 'absolute',
+    right: 100,
+    top: 45,
+}));
+
 const NotFound = () => {
     const navigate = useNavigate();
-    const { classes: styles } = useStyles();
 
     const onClickHome = () => {
         navigate('/');
@@ -19,15 +49,15 @@ const NotFound = () => {
     };
 
     return (
-        <div className={styles.container}>
+        <StyledContainer>
             <div>
-                <LogoIcon className={styles.logo} />
+                <StyledLogo />
-                <div className={styles.content}>
+                <StyledContent>
                     <Typography variant="h1" style={{ fontSize: '2rem' }}>
                         Ooops. That's a page we haven't toggled on yet.
                     </Typography>
-                </div>
+                </StyledContent>
-                <div className={styles.buttonContainer}>
+                <StyledButtonContainer>
                     <Button
                         variant="contained"
                         color="primary"
@@ -35,12 +65,12 @@ const NotFound = () => {
                     >
                         Go back
                     </Button>
-                    <Button onClick={onClickHome} className={styles.homeButton}>
+                    <StyledHomeButton onClick={onClickHome}>
                         Go home
-                    </Button>
+                    </StyledHomeButton>
-                </div>
+                </StyledButtonContainer>
             </div>
-        </div>
+        </StyledContainer>
     );
 };
 

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

@@ -1,18 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()(theme => ({
-    container: {
-        borderRadius: theme.shape.borderRadiusLarge,
-        boxShadow: 'none',
-    },
-    headerContainer: {
-        borderBottomStyle: 'solid',
-        borderBottomWidth: 1,
-        borderBottomColor: theme.palette.divider,
-        [theme.breakpoints.down('md')]: {
-            padding: '1.5rem 1rem',
-        },
-    },
     headerPadding: {
         padding: theme.spacing(2, 4),
     },

frontend/src/component/common/PageContent/PageContent.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import classnames from 'classnames';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Paper, PaperProps } from '@mui/material';
+import { Paper, PaperProps, styled } from '@mui/material';
 import { useStyles } from './PageContent.styles';
 import useLoading from 'hooks/useLoading';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
@@ -22,6 +22,20 @@ interface IPageContentProps extends PaperProps {
     headerClass?: string;
 }
 
+const StyledHeader = styled('div')(({ theme }) => ({
+    borderBottomStyle: 'solid',
+    borderBottomWidth: '1px',
+    borderBottomColor: theme.palette.divider,
+    [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(3, 2),
+    },
+}));
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadiusLarge,
+    boxShadow: 'none',
+}));
+
 const PageContentLoading: FC<{ isLoading: boolean }> = ({
     children,
     isLoading,
@@ -51,7 +65,6 @@ export const PageContent: FC<IPageContentProps> = ({
 
     const headerClasses = classnames(
         'header',
-        styles.headerContainer,
         headerClass || styles.headerPadding,
         {
             [styles.paddingDisabled]: disablePadding,
@@ -71,25 +84,25 @@ export const PageContent: FC<IPageContentProps> = ({
     const paperProps = disableBorder ? { elevation: 0 } : {};
 
     const content = (
-        <Paper
+        <StyledPaper
             {...rest}
             {...paperProps}
-            className={classnames(styles.container, className)}
+            className={classnames(className)}
         >
             <ConditionallyRender
                 condition={Boolean(header)}
                 show={
-                    <div className={headerClasses}>
+                    <StyledHeader className={headerClasses}>
                         <ConditionallyRender
                             condition={typeof header === 'string'}
                             show={<PageHeader title={header as string} />}
                             elseShow={header}
                         />
-                    </div>
+                    </StyledHeader>
                 }
             />
             <div className={bodyClasses}>{children}</div>
-        </Paper>
+        </StyledPaper>
     );
 
     if (disableLoading) {

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

@@ -1,31 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    headerContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    topContainer: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        position: 'relative',
-    },
-    header: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        marginRight: theme.spacing(2),
-    },
-    headerTitle: {
-        fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 'normal',
-    },
-    headerActions: {
-        display: 'flex',
-        flexGrow: 1,
-        justifyContent: 'flex-end',
-        alignItems: 'center',
-        gap: theme.spacing(1),
-    },
-}));

frontend/src/component/common/PageHeader/PageHeader.tsx

@@ -11,7 +11,6 @@ import {
 } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
-import { useStyles } from './PageHeader.styles';
 import { usePageTitle } from 'hooks/usePageTitle';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
@@ -21,10 +20,42 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
     display: 'inline-block',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
-    padding: '10px 0',
+    padding: theme.spacing(0.5, 0),
     verticalAlign: 'middle',
 }));
 
+const StyledHeaderContainer = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
+const StyledTopContainer = styled('div')(() => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    position: 'relative',
+}));
+
+const StyledHeader = styled('div')(({ theme }) => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    marginRight: theme.spacing(2),
+}));
+
+const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: 'normal',
+}));
+
+const StyledHeaderActions = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
 interface IPageHeaderProps {
     title?: string;
     titleElement?: ReactNode;
@@ -49,33 +80,32 @@ const PageHeaderComponent: FC<IPageHeaderProps> & {
     secondary,
     children,
 }) => {
-    const { classes: styles } = useStyles();
     const headerClasses = classnames({ skeleton: loading });
 
     usePageTitle(secondary ? '' : title);
 
     return (
-        <div className={styles.headerContainer}>
+        <StyledHeaderContainer>
-            <div className={styles.topContainer}>
+            <StyledTopContainer>
-                <div
+                <StyledHeader
-                    className={classnames(styles.header, headerClasses)}
+                    className={classnames(headerClasses)}
                     data-loading
                 >
-                    <Typography
+                    <StyledHeaderTitle
                         variant={variant || secondary ? 'h2' : 'h1'}
-                        className={classnames(styles.headerTitle, className)}
+                        className={classnames(className)}
                     >
                         {titleElement || title}
-                    </Typography>
+                    </StyledHeaderTitle>
                     {subtitle && <small>{subtitle}</small>}
-                </div>
+                </StyledHeader>
                 <ConditionallyRender
                     condition={Boolean(actions)}
-                    show={<div className={styles.headerActions}>{actions}</div>}
+                    show={<StyledHeaderActions>{actions}</StyledHeaderActions>}
                 />
-            </div>
+            </StyledTopContainer>
             {children}
-        </div>
+        </StyledHeaderContainer>
     );
 };
 

frontend/src/component/common/PaginateUI/PaginateUI.tsx

@@ -1,171 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import classnames from 'classnames';
-import { useStyles } from './PaginationUI.styles';
-
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-import { useMediaQuery, useTheme } from '@mui/material';
-
-interface IPaginateUIProps {
-    pages: any[];
-    pageIndex: number;
-    prevPage: () => void;
-    setPageIndex: (idx: number) => void;
-    nextPage: () => void;
-    style?: React.CSSProperties;
-}
-
-/**
- * @deprecated
- */
-const PaginateUI = ({
-    pages,
-    pageIndex,
-    prevPage,
-    setPageIndex,
-    nextPage,
-    ...rest
-}: IPaginateUIProps) => {
-    const STARTLIMIT = 6;
-    const theme = useTheme();
-    const { classes: styles } = useStyles();
-    const [limit, setLimit] = useState(STARTLIMIT);
-    const [start, setStart] = useState(0);
-    const matches = useMediaQuery(theme.breakpoints.down('md'));
-
-    useEffect(() => {
-        if (matches) {
-            setLimit(4);
-        }
-    }, [matches]);
-
-    useEffect(() => {
-        if (pageIndex === 0 && start !== 0) {
-            setStart(0);
-            setLimit(STARTLIMIT);
-        }
-    }, [pageIndex, start]);
-
-    return (
-        <ConditionallyRender
-            condition={pages.length > 1}
-            show={
-                <div className={styles.pagination} {...rest}>
-                    <div className={styles.paginationInnerContainer}>
-                        <ConditionallyRender
-                            condition={pageIndex > 0}
-                            show={
-                                <>
-                                    <button
-                                        className={classnames(
-                                            styles.idxBtn,
-                                            styles.idxBtnLeft
-                                        )}
-                                        onClick={() => {
-                                            prevPage();
-                                            if (start > 0) {
-                                                setLimit(prev => prev - 1);
-                                                setStart(prev => prev - 1);
-                                            }
-                                        }}
-                                    >
-                                        <ArrowBackIosIcon
-                                            className={styles.idxBtnIcon}
-                                        />
-                                    </button>
-                                    <button
-                                        className={classnames(
-                                            styles.idxBtn,
-                                            styles.doubleArrowBtnLeft
-                                        )}
-                                        onClick={() => {
-                                            setPageIndex(0);
-                                            if (start > 0) {
-                                                setLimit(STARTLIMIT);
-                                                setStart(0);
-                                            }
-                                        }}
-                                    >
-                                        <DoubleArrowIcon
-                                            className={classnames(
-                                                styles.arrowIcon,
-                                                styles.arrowIconLeft
-                                            )}
-                                        />
-                                    </button>
-                                </>
-                            }
-                        />
-
-                        {pages
-                            .map((page, idx) => {
-                                const active = pageIndex === idx;
-                                return (
-                                    <button
-                                        key={idx}
-                                        className={classnames(
-                                            styles.paginationButton,
-                                            {
-                                                [styles.paginationButtonActive]:
-                                                    active,
-                                            }
-                                        )}
-                                        onClick={() => {
-                                            setPageIndex(idx);
-                                        }}
-                                    >
-                                        {idx + 1}
-                                    </button>
-                                );
-                            })
-                            .slice(start, limit)}
-                        <ConditionallyRender
-                            condition={pageIndex < pages.length - 1}
-                            show={
-                                <>
-                                    <button
-                                        onClick={() => {
-                                            nextPage();
-                                            if (limit < pages.length) {
-                                                setLimit(prev => prev + 1);
-                                                setStart(prev => prev + 1);
-                                            }
-                                        }}
-                                        className={classnames(
-                                            styles.idxBtn,
-                                            styles.idxBtnRight
-                                        )}
-                                    >
-                                        <ArrowForwardIosIcon
-                                            className={styles.idxBtnIcon}
-                                        />
-                                    </button>
-                                    <button
-                                        className={classnames(
-                                            styles.idxBtn,
-                                            styles.doubleArrowBtnRight
-                                        )}
-                                        onClick={() => {
-                                            setPageIndex(pages.length - 1);
-                                            setLimit(pages.length);
-                                            setStart(pages.length - STARTLIMIT);
-                                        }}
-                                    >
-                                        <DoubleArrowIcon
-                                            className={styles.arrowIcon}
-                                        />
-                                    </button>
-                                </>
-                            }
-                        />
-                    </div>
-                </div>
-            }
-        />
-    );
-};
-
-export default PaginateUI;

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

@@ -1,58 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    pagination: {
-        margin: '1rem 0 0 0',
-        display: 'flex',
-        justifyContent: ' center',
-        position: 'absolute',
-        bottom: '25px',
-        right: '0',
-        left: '0',
-    },
-    paginationInnerContainer: {
-        position: 'relative',
-    },
-    paginationButton: {
-        border: 'none',
-        cursor: 'pointer',
-        backgroundColor: 'efefef',
-        margin: '0 0.2rem',
-        width: '31px',
-        borderRadius: theme.shape.borderRadius,
-        padding: '0.25rem 0.5rem',
-    },
-    paginationButtonActive: {
-        backgroundColor: '#635DC5',
-        color: '#fff',
-        transition: 'backgroundColor 0.3s ease',
-    },
-    idxBtn: {
-        border: 'none',
-        borderRadius: theme.shape.borderRadius,
-        background: 'transparent',
-        position: 'absolute',
-        height: '23px',
-        cursor: 'pointer',
-    },
-    doubleArrowBtnLeft: {
-        left: '-55px',
-    },
-    doubleArrowBtnRight: {
-        right: '-55px',
-    },
-    arrowIcon: { height: '15px', width: '15px' },
-    arrowIconLeft: {
-        transform: 'rotate(180deg)',
-    },
-    idxBtnIcon: {
-        height: '15px',
-        width: '15px',
-    },
-    idxBtnLeft: {
-        left: '-30px',
-    },
-    idxBtnRight: {
-        right: '-30px',
-    },
-}));

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

@@ -1,15 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()({
-    proclamation: {
-        marginBottom: '1rem',
-    },
-    content: {
-        maxWidth: '800px',
-    },
-    link: {
-        display: 'block',
-        marginTop: '0.5rem',
-        width: '100px',
-    },
-});

frontend/src/component/common/Proclamation/Proclamation.tsx

@@ -1,14 +1,27 @@
 import { useState, useEffect } from 'react';
-import { Alert } from '@mui/material';
+import { Alert, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Typography } from '@mui/material';
-import { useStyles } from './Proclamation.styles';
 import { IProclamationToast } from 'interfaces/uiConfig';
 
 interface IProclamationProps {
     toast?: IProclamationToast;
 }
 
+const StyledProclamation = styled(Alert)(({ theme }) => ({
+    marginBottom: theme.spacing(2),
+}));
+
+const StyledContent = styled(Typography)(({ theme }) => ({
+    maxWidth: '800px',
+}));
+
+const StyledLink = styled('a')(({ theme }) => ({
+    display: 'block',
+    marginTop: theme.spacing(1),
+    width: '100px',
+}));
+
 const renderProclamation = (id: string) => {
     if (!id) return false;
     if (localStorage) {
@@ -22,7 +35,6 @@ const renderProclamation = (id: string) => {
 
 const Proclamation = ({ toast }: IProclamationProps) => {
     const [show, setShow] = useState(false);
-    const { classes: styles } = useStyles();
 
     useEffect(() => {
         setShow(renderProclamation(toast?.id || ''));
@@ -41,23 +53,18 @@ const Proclamation = ({ toast }: IProclamationProps) => {
         <ConditionallyRender
             condition={show}
             show={
-                <Alert
+                <StyledProclamation severity={toast.severity} onClose={onClose}>
-                    className={styles.proclamation}
+                    <StyledContent variant="body2">
-                    severity={toast.severity}
-                    onClose={onClose}
-                >
-                    <Typography className={styles.content} variant="body2">
                         {toast.message}
-                    </Typography>
+                    </StyledContent>
-                    <a
+                    <StyledLink
                         href={toast.link}
-                        className={styles.link}
                         target="_blank"
                         rel="noopener noreferrer"
                     >
                         View more
-                    </a>
+                    </StyledLink>
-                </Alert>
+                </StyledProclamation>
             }
         />
     );

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

@@ -7,29 +7,29 @@ exports[`renders an empty list correctly 1`] = `
     aria-live="polite"
   >
     <div
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-p9j8ie-MuiPaper-root-container"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1  css-162esap-MuiPaper-root"
     >
       <div
-        className="header css-zq4ve2-headerContainer css-70tvrt-headerPadding"
+        className="header css-1krbslg-headerPadding"
       >
         <div
-          className="css-1ylehva-headerContainer"
+          className="css-j7qwjs"
         >
           <div
-            className="css-1uxyh7x-topContainer"
+            className="css-mt0dvk"
           >
             <div
-              className="css-sd6bs4-header"
+              className=" css-1gg5pjj"
               data-loading={true}
             >
               <h1
-                className="MuiTypography-root MuiTypography-h1 css-ypmm1t-MuiTypography-root-headerTitle"
+                className="MuiTypography-root MuiTypography-h1  css-1pr8obe-MuiTypography-root"
               >
                 Tag types (5)
               </h1>
             </div>
             <div
-              className="css-u5t8ea-headerActions"
+              className="css-j2179i"
             >
               <div
                 className="css-1oozr04-container"
@@ -70,7 +70,7 @@ exports[`renders an empty list correctly 1`] = `
                 </div>
               </div>
               <hr
-                className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1p1j01b-MuiDivider-root"
+                className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-19a8bca-MuiDivider-root"
               />
               <span
                 id="useId-0"

frontend/src/themes/themeStyles.ts

@@ -42,6 +42,11 @@ export const itemsCenter = {
     alignItems: 'center',
 } as const;
 
+export const relative = {
+    position: 'relative',
+} as const;
+
+export const formTemplateSidebarWidth = '27.5rem';
 export const defaultBorderRadius = (theme: Theme) => ({
     borderRadius: `${theme.shape.borderRadius}px`,
 });
@@ -66,9 +71,6 @@ export const useThemeStyles = makeStyles()(theme => ({
             marginBottom: '0.5rem !important',
         },
     },
-    relative: {
-        position: 'relative',
-    },
     divider: {
         margin: '1rem 0',
         backgroundColor: theme.palette.divider,