Refactor makestyles 2 2 (#2827)

2025-07-26 13:48:33 +02:00 · 2023-01-05 16:23:40 +02:00 · 2023-01-05 16:23:40 +02:00 · dc468430ce
commit dc468430ce
parent 5ac08e06d9
24 changed files with 372 additions and 625 deletions
--- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts
+++ b/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,
-    },
-}));
--- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
+++ b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
@ -1,17 +1,20 @@
-import { Chip } from '@mui/material';
-import { useStyles } from './FeatureStatusChip.styles';
+import { Chip, styled } from '@mui/material';

 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}
            />
--- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
+++ b/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',
-    },
-}));
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/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
-            className={classNames(styles.container, modal && styles.modal)}
-        >
+        <StyledContainer modal={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} />
-                        <h2 className={styles.subtitle}>
+                        <StyledSidebarDivider />
+                        <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}>
-                <MobileGuidanceBG className={styles.mobileGuidanceBackground} />
-            </div>
+            <StyledMobileGuidanceContainer>
+                <StyledMobileGuidanceBackground />
+            </StyledMobileGuidanceContainer>
            <Tooltip title="Toggle help" arrow>
-                <IconButton
-                    className={styles.mobileGuidanceButton}
+                <StyledMobileGuidanceButton
                    onClick={() => setOpen(prev => !prev)}
                    size="large"
                >
-                    <Info className={styles.infoIcon} />
-                </IconButton>
+                    <StyledInfoIcon />
+                </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}>
-            <p className={styles.description}>{description}</p>
+        <StyledSidebar>
+            <StyledDescription>{description}</StyledDescription>

-            <div className={styles.linkContainer}>
-                <MenuBookIcon className={styles.linkIcon} />
-                <a
-                    className={styles.documentationLink}
+            <StyledLinkContainer>
+                <StyledLinkIcon />
+                <StyledDocumentationLink
                    href={documentationLink}
                    rel="noopener noreferrer"
                    target="_blank"
                >
                    {documentationLinkLabel}
-                </a>
-            </div>
+                </StyledDocumentationLink>
+            </StyledLinkContainer>

            {children}
-        </aside>
+        </StyledSidebar>
    );
 };

--- a/frontend/src/component/common/Highlighter/Highlighter.styles.ts
+++ b/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,
-        },
-    },
-}));
--- a/frontend/src/component/common/Highlighter/Highlighter.tsx
+++ b/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
-            className={classes.highlighter}
+        <StyledSpan
            dangerouslySetInnerHTML={{
                __html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
            }}
--- a/frontend/src/component/common/Input/Input.styles.ts
+++ b/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',
-    },
 }));
--- a/frontend/src/component/common/Input/Input.tsx
+++ b/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>
    );
 };

--- a/frontend/src/component/common/Loader/Loader.styles.ts
+++ b/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',
-    },
-}));
--- a/frontend/src/component/common/Loader/Loader.tsx
+++ b/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">
-            <img className={styles.img} src={formatAssetPath(logo)} alt="" />
-        </div>
+        <StyledDiv role="alert" aria-label="Loading">
+            <StyledImg src={formatAssetPath(logo)} alt="" />
+        </StyledDiv>
    );
 };

--- a/frontend/src/component/common/NoItems/NoItems.styles.ts
+++ b/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',
-        },
-    },
-}));
--- a/frontend/src/component/common/NoItems/NoItems.tsx
+++ b/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}>
-            <div className={styles.textContainer}>{children}</div>
-            <div className={styles.iconContainer}>
-                <NoItemsIcon className={styles.icon} />
-            </div>
-        </div>
+        <StyledContainer>
+            <StyledTextContainer>{children}</StyledTextContainer>
+            <StyledIconContainer>
+                <StyledIcon />
+            </StyledIconContainer>
+        </StyledContainer>
    );
 };

--- a/frontend/src/component/common/NotFound/NotFound.styles.ts
+++ b/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,
-    },
-});
--- a/frontend/src/component/common/NotFound/NotFound.tsx
+++ b/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} />
-                <div className={styles.content}>
+                <StyledLogo />
+                <StyledContent>
                    <Typography variant="h1" style={{ fontSize: '2rem' }}>
                        Ooops. That's a page we haven't toggled on yet.
                    </Typography>
-                </div>
-                <div className={styles.buttonContainer}>
+                </StyledContent>
+                <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>
-                </div>
+                    </StyledHomeButton>
+                </StyledButtonContainer>
            </div>
-        </div>
+        </StyledContainer>
    );
 };

--- a/frontend/src/component/common/PageContent/PageContent.styles.ts
+++ b/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),
    },
--- a/frontend/src/component/common/PageContent/PageContent.tsx
+++ b/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) {
--- a/frontend/src/component/common/PageHeader/PageHeader.styles.ts
+++ b/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),
-    },
-}));
--- a/frontend/src/component/common/PageHeader/PageHeader.tsx
+++ b/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}>
-            <div className={styles.topContainer}>
-                <div
-                    className={classnames(styles.header, headerClasses)}
+        <StyledHeaderContainer>
+            <StyledTopContainer>
+                <StyledHeader
+                    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>
    );
 };

--- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx
+++ b/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;
--- a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
+++ b/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',
-    },
-}));
--- a/frontend/src/component/common/Proclamation/Proclamation.styles.ts
+++ b/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',
-    },
-});
--- a/frontend/src/component/common/Proclamation/Proclamation.tsx
+++ b/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
-                    className={styles.proclamation}
-                    severity={toast.severity}
-                    onClose={onClose}
-                >
-                    <Typography className={styles.content} variant="body2">
+                <StyledProclamation severity={toast.severity} onClose={onClose}>
+                    <StyledContent variant="body2">
                        {toast.message}
-                    </Typography>
-                    <a
+                    </StyledContent>
+                    <StyledLink
                        href={toast.link}
-                        className={styles.link}
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        View more
-                    </a>
-                </Alert>
+                    </StyledLink>
+                </StyledProclamation>
            }
        />
    );
--- a/frontend/src/component/tags/TagTypeList/tests/snapshots/TagTypeList.test.tsx.snap
+++ b/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"
--- a/frontend/src/themes/themeStyles.ts
+++ b/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,