refactor: extract styled components (#2798)

2025-02-04 00:18:01 +01:00 · 2023-01-03 12:41:48 +01:00 · 2023-01-03 12:41:48 +01:00 · 644ec69a13
commit 644ec69a13
parent 6b5e25b191
25 changed files with 357 additions and 585 deletions
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    header: {
-        fontSize: theme.fontSizes.mainHeader,
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
@ -1,21 +1,28 @@
-import { Typography } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { Edit } from '@mui/icons-material';
 import { useNavigate } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
-import { useStyles } from './FeatureSettingsInformation.style';

 interface IFeatureSettingsInformationProps {
    projectId: string;
    featureId: string;
 }

+const StyledContainer = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+}));
+
 export const FeatureSettingsInformation = ({
    projectId,
    featureId,
 }: IFeatureSettingsInformationProps) => {
-    const { classes: styles } = useStyles();
    const { feature } = useFeature(projectId, featureId);
    const navigate = useNavigate();

@ -25,10 +32,8 @@ export const FeatureSettingsInformation = ({

    return (
        <>
-            <div className={styles.container}>
-                <Typography className={styles.header}>
-                    Feature information
-                </Typography>
+            <StyledContainer>
+                <StyledTypography>Feature information</StyledTypography>
                <PermissionIconButton
                    permission={UPDATE_FEATURE}
                    projectId={projectId}
@ -38,7 +43,7 @@ export const FeatureSettingsInformation = ({
                >
                    <Edit />
                </PermissionIconButton>
-            </div>
+            </StyledContainer>
            <Typography>
                Name: <strong>{feature.name}</strong>
            </Typography>
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
@ -1,8 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        display: 'grid',
-        gap: theme.spacing(2),
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
@ -3,13 +3,17 @@ import useProject from 'hooks/api/getters/useProject/useProject';
 import { IFeatureToggle } from 'interfaces/featureToggle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { useStyles } from './FeatureSettingsProjectConfirm.styles';
 import { arraysHaveSameItems } from 'utils/arraysHaveSameItems';
 import { Alert, List, ListItem, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';

+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(2),
+}));
+
 const StyledAlert = styled(Alert)(({ theme }) => ({
    marginBottom: theme.spacing(1),
 }));
@ -37,7 +41,6 @@ const FeatureSettingsProjectConfirm = ({
 }: IFeatureSettingsProjectConfirm) => {
    const currentProjectId = useRequiredPathParam('projectId');
    const { project } = useProject(projectId);
-    const { classes: styles } = useStyles();

    const hasSameEnvironments: boolean = useMemo(() => {
        return arraysHaveSameItems(
@ -62,7 +65,7 @@ const FeatureSettingsProjectConfirm = ({
                    primaryButtonText="Change project"
                    secondaryButtonText="Cancel"
                >
-                    <div className={styles.container}>
+                    <StyledContainer>
                        <StyledAlert severity="success">
                            This feature toggle is compatible with the new
                            project.
@ -71,7 +74,7 @@ const FeatureSettingsProjectConfirm = ({
                            Are you sure you want to change the project for this
                            toggle?
                        </p>
-                    </div>
+                    </StyledContainer>
                </Dialogue>
            }
            elseShow={
@ -81,7 +84,7 @@ const FeatureSettingsProjectConfirm = ({
                    title="Confirm change project"
                    primaryButtonText="OK"
                >
-                    <div className={styles.container}>
+                    <StyledContainer>
                        <StyledAlert severity="warning">
                            Incompatible project environments
                        </StyledAlert>
@ -119,7 +122,7 @@ const FeatureSettingsProjectConfirm = ({
                                </>
                            }
                        />
-                    </div>
+                    </StyledContainer>
                </Dialogue>
            }
        />
--- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        width: '42px',
-        height: '42px',
-        fontSize: '0.7em',
-        background: 'gray',
-        borderRadius: theme.shape.borderRadius,
-        textAlign: 'center',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '13px 10px',
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
@ -1,114 +0,0 @@
-import { useStyles } from './FeatureStatus.styles';
-import TimeAgo from 'react-timeago';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Tooltip, TooltipProps } from '@mui/material';
-import React from 'react';
-
-function generateUnit(unit?: string): string {
-    switch (unit) {
-        case 'second':
-            return 's';
-        case 'minute':
-            return 'm';
-        case 'hour':
-            return 'h';
-        case 'day':
-            return 'D';
-        case 'week':
-            return 'W';
-        case 'month':
-            return 'M';
-        case 'year':
-            return 'Y';
-        default:
-            return '';
-    }
-}
-
-function getColor(unit?: string): string {
-    switch (unit) {
-        case 'second':
-            return '#98E3AF';
-        case 'minute':
-            return '#98E3AF';
-        case 'hour':
-            return '#98E3AF';
-        case 'day':
-            return '#98E3AF';
-        case 'week':
-            return '#ECD875';
-        case 'month':
-            return '#F5A69A';
-        case 'year':
-            return '#F5A69A';
-        default:
-            return '#EDF0F1';
-    }
-}
-
-interface IFeatureStatusProps {
-    lastSeenAt?: string | Date | null;
-    tooltipPlacement?: TooltipProps['placement'];
-}
-
-const FeatureStatus = ({
-    lastSeenAt,
-    tooltipPlacement,
-}: IFeatureStatusProps) => {
-    const { classes: styles } = useStyles();
-
-    const Wrapper = (
-        props: React.PropsWithChildren<{ color: string; toolTip: string }>
-    ) => {
-        return (
-            <Tooltip title={props.toolTip} arrow placement={tooltipPlacement}>
-                <div
-                    className={styles.container}
-                    style={{ background: props.color, fontSize: '0.8rem' }}
-                >
-                    {props.children}
-                </div>
-            </Tooltip>
-        );
-    };
-
-    return (
-        <ConditionallyRender
-            condition={Boolean(lastSeenAt)}
-            show={() => (
-                <TimeAgo
-                    date={lastSeenAt!}
-                    title=""
-                    live={false}
-                    formatter={(
-                        value: number,
-                        unit: string,
-                        suffix: string
-                    ) => {
-                        return (
-                            <Wrapper
-                                toolTip={`Last usage reported ${value} ${unit}${
-                                    value !== 1 ? 's' : ''
-                                } ${suffix}`}
-                                color={getColor(unit)}
-                            >
-                                {value}
-                                {generateUnit(unit)}
-                            </Wrapper>
-                        );
-                    }}
-                />
-            )}
-            elseShow={
-                <Wrapper
-                    toolTip="No usage reported from connected applications"
-                    color={getColor()}
-                >
-                    <span style={{ fontSize: '1.4rem' }}>⊕</span>
-                </Wrapper>
-            }
-        />
-    );
-};
-
-export default FeatureStatus;
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    icon: {
-        color: theme.palette.inactiveIcon,
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
@ -1,25 +0,0 @@
-import { useStyles } from './FeatureType.styles';
-import { Tooltip } from '@mui/material';
-import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
-
-interface IFeatureTypeProps {
-    type: string;
-}
-
-const FeatureStatus = ({ type }: IFeatureTypeProps) => {
-    const { classes: styles } = useStyles();
-    const { featureTypes } = useFeatureTypes();
-    const IconComponent = getFeatureTypeIcons(type);
-
-    const typeName = featureTypes.filter(t => t.id === type).map(t => t.name);
-    const title = `"${typeName || type}" toggle`;
-
-    return (
-        <Tooltip arrow title={title}>
-            <IconComponent data-loading className={styles.icon} />
-        </Tooltip>
-    );
-};
-
-export default FeatureStatus;
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
@ -1,34 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    error: {
-        color: theme.palette.error.main,
-        fontSize: theme.fontSizes.smallBody,
-        position: 'relative',
-    },
-    input: {
-        maxWidth: 350,
-        width: '100%',
-    },
-    grid: {
-        marginBottom: '0.5rem',
-    },
-    weightInput: {
-        marginRight: '0.8rem',
-    },
-    label: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1ch',
-        marginBottom: '1rem',
-    },
-    info: {
-        width: '18.5px',
-        height: '18.5px',
-        color: 'grey',
-    },
-    select: {
-        minWidth: '100px',
-        width: '100%',
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
@ -5,6 +5,7 @@ import {
    FormControlLabel,
    Grid,
    InputAdornment,
+    styled,
 } from '@mui/material';
 import { weightTypes } from './enums';
 import { OverrideConfig } from './OverrideConfig/OverrideConfig';
@ -18,7 +19,6 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { IFeatureVariant } from 'interfaces/featureToggle';
 import cloneDeep from 'lodash.clonedeep';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
-import { useStyles } from './AddFeatureVariant.styles';
 import Input from 'component/common/Input/Input';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
@ -34,6 +34,33 @@ const payloadOptions = [

 const EMPTY_PAYLOAD = { type: 'string', value: '' };

+const StyledError = styled('p')(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: theme.fontSizes.smallBody,
+    position: 'relative',
+}));
+
+const StyledInput = styled(Input)({
+    maxWidth: 350,
+    width: '100%',
+});
+
+const StyledGrid = styled(Grid)(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const StyledLabel = styled('p')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '1ch',
+    marginBottom: theme.spacing(2),
+}));
+
+const StyledGeneralSelect = styled(GeneralSelect)({
+    minWidth: '100px',
+    width: '100%',
+});
+
 interface IAddVariantProps {
    showDialog: boolean;
    closeDialog: () => void;
@ -55,7 +82,6 @@ export const AddVariant = ({
    title,
    editing,
 }: IAddVariantProps) => {
-    const { classes: styles } = useStyles();
    const [data, setData] = useState<Record<string, string>>({});
    const [payload, setPayload] = useState(EMPTY_PAYLOAD);
    const [overrides, overridesDispatch] = useOverrides([]);
@ -232,13 +258,12 @@ export const AddVariant = ({
                onSubmit={submit}
                className={themeStyles.contentSpacingY}
            >
-                <p className={styles.error}>{error.general}</p>
-                <Input
+                <StyledError>{error.general}</StyledError>
+                <StyledInput
                    label="Variant name"
                    autoFocus
                    name="name"
                    id="variant-name"
-                    className={styles.input}
                    errorText={error.name}
                    value={data.name || ''}
                    error={Boolean(error.name)}
@ -249,7 +274,7 @@ export const AddVariant = ({
                    data-testid={'VARIANT_NAME_INPUT'}
                />
                <br />
-                <Grid container>
+                <StyledGrid container>
                    {/* If we're editing, we need to have at least 2 existing variants, since we require at least 1 variable. If adding, we could be adding nr 2, and as such should be allowed to set weightType to variable */}
                    <ConditionallyRender
                        condition={
@ -257,7 +282,7 @@ export const AddVariant = ({
                            (!editing && variants.length > 0)
                        }
                        show={
-                            <Grid item md={12} className={styles.grid}>
+                            <Grid item md={12}>
                                <FormControl>
                                    <FormControlLabel
                                        control={
@ -297,7 +322,7 @@ export const AddVariant = ({
                                            </InputAdornment>
                                        ),
                                    }}
-                                    className={styles.weightInput}
+                                    sx={{ marginRight: '0.8rem' }}
                                    value={data.weight}
                                    error={Boolean(error.weight)}
                                    errorText={error.weight}
@ -312,18 +337,17 @@ export const AddVariant = ({
                            </Grid>
                        }
                    />
-                </Grid>
-                <p className={styles.label}>
+                </StyledGrid>
+                <StyledLabel>
                    <strong>Payload </strong>
                    <HelpIcon tooltip="Passed along with the the variant object." />
-                </p>
+                </StyledLabel>
                <Grid container>
                    <Grid item md={2} sm={2} xs={4}>
-                        <GeneralSelect
+                        <StyledGeneralSelect
                            id="variant-payload-type"
                            name="type"
                            label="Type"
-                            className={styles.select}
                            value={payload.type}
                            options={payloadOptions}
                            onChange={onPayload('type')}
@ -353,10 +377,10 @@ export const AddVariant = ({
                <ConditionallyRender
                    condition={overrides.length > 0}
                    show={
-                        <p className={styles.label}>
+                        <StyledLabel>
                            <strong>Overrides </strong>
                            <HelpIcon tooltip="Here you can specify which users should get this variant." />
-                        </p>
+                        </StyledLabel>
                    }
                />
                <OverrideConfig
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    contextFieldSelect: {
-        marginRight: '8px',
-    },
-}));
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
@ -2,7 +2,6 @@ import { ChangeEvent, VFC } from 'react';
 import classnames from 'classnames';
 import { Grid, IconButton, TextField, Tooltip } from '@mui/material';
 import { Delete } from '@mui/icons-material';
-import { useStyles } from './OverrideConfig.styles';
 import { Autocomplete } from '@mui/material';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { useThemeStyles } from 'themes/themeStyles';
@ -21,7 +20,6 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
    overrides,
    overridesDispatch,
 }) => {
-    const { classes: styles } = useStyles();
    const { classes: themeStyles } = useThemeStyles();

    const { context } = useUnleashContext();
@ -69,7 +67,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
                            md={3}
                            sm={3}
                            xs={3}
-                            className={styles.contextFieldSelect}
+                            sx={theme => ({ marginRight: theme.spacing(1) })}
                        >
                            <GeneralSelect
                                name="contextName"
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
@ -1,35 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    overlay: {
-        pointerEvents: 'none',
-        display: 'grid',
-        padding: '1rem',
-        overflowY: 'auto',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100vh',
-        width: '100vw',
-    },
-    modal: {
-        pointerEvents: 'auto',
-        position: 'relative',
-        padding: '4rem',
-        background: theme.palette.background.paper,
-        boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
-        borderRadius: '1rem',
-        [theme.breakpoints.down('md')]: {
-            padding: '2rem',
-        },
-    },
-    close: {
-        all: 'unset',
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-    closeIcon: {
-        fontSize: '1.5rem',
-        color: theme.palette.inactiveIcon,
-    },
-}));
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
@ -1,20 +1,53 @@
-import { IconButton, Modal } from '@mui/material';
+import { IconButton, Modal, styled } from '@mui/material';
 import React, { useContext } from 'react';
 import {
    feedbackCESContext,
    IFeedbackCESState,
 } from 'component/feedback/FeedbackCESContext/FeedbackCESContext';
 import { FeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm';
-import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCES.styles';
 import { CloseOutlined } from '@mui/icons-material';

 export interface IFeedbackCESProps {
    state?: IFeedbackCESState;
 }

+const StyledOverlay = styled('div')(({ theme }) => ({
+    pointerEvents: 'none',
+    display: 'grid',
+    padding: theme.spacing(2),
+    overflowY: 'auto',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    width: '100vw',
+}));
+
+const StyledModal = styled('div')(({ theme }) => ({
+    pointerEvents: 'auto',
+    position: 'relative',
+    padding: theme.spacing(8),
+    background: theme.palette.background.paper,
+    boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
+    borderRadius: theme.spacing(2),
+    [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(4),
+    },
+}));
+
+const StyledClose = styled('div')({
+    all: 'unset',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+});
+
+const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
+    fontSize: '1.5rem',
+    color: theme.palette.inactiveIcon,
+}));
+
 export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
    const { hideFeedbackCES } = useContext(feedbackCESContext);
-    const { classes: styles } = useStyles();

    const modalContent = state && (
        <FeedbackCESForm state={state} onClose={hideFeedbackCES} />
@ -26,19 +59,16 @@ export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
            onClose={hideFeedbackCES}
            aria-label={state?.title}
        >
-            <div className={styles.overlay}>
-                <div className={styles.modal}>
-                    <div className={styles.close}>
+            <StyledOverlay>
+                <StyledModal>
+                    <StyledClose>
                        <IconButton onClick={hideFeedbackCES} size="large">
-                            <CloseOutlined
-                                titleAccess="Close"
-                                className={styles.closeIcon}
-                            />
+                            <StyledCloseIcon titleAccess="Close" />
                        </IconButton>
-                    </div>
+                    </StyledClose>
                    {modalContent}
-                </div>
-            </div>
+                </StyledModal>
+            </StyledOverlay>
        </Modal>
    );
 };
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
@ -1,36 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        fontWeight: theme.fontWeight.thin,
-    },
-    form: {
-        display: 'grid',
-        gap: '3rem',
-        gridTemplateColumns: 'minmax(auto, 40rem)',
-        justifyContent: 'center',
-    },
-    title: {
-        all: 'unset',
-        display: 'block',
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-    },
-    subtitle: {
-        all: 'unset',
-        display: 'block',
-        marginTop: '2.5rem',
-        fontSize: '1.5rem',
-        textAlign: 'center',
-    },
-    textLabel: {
-        display: 'block',
-        marginBottom: '0.5rem',
-    },
-    buttons: {
-        textAlign: 'center',
-    },
-    button: {
-        minWidth: '15rem',
-    },
-}));
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
@ -1,5 +1,4 @@
-import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESForm.styles';
-import { Button, TextField } from '@mui/material';
+import { Box, Button, styled, TextField } from '@mui/material';
 import React, { useState } from 'react';
 import produce from 'immer';
 import useToast from 'hooks/useToast';
@ -18,10 +17,40 @@ export interface IFeedbackCESForm {
    path: string;
 }

+const StyledContainer = styled('div')(({ theme }) => ({
+    fontWeight: theme.fontWeight.thin,
+}));
+
+const StyledTitle = styled('h1')(({ theme }) => ({
+    all: 'unset',
+    display: 'block',
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+}));
+
+const StyledForm = styled('form')(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(6),
+    gridTemplateColumns: 'minmax(auto, 40rem)',
+    justifyContent: 'center',
+}));
+
+const StyledSubtitle = styled('p')(({ theme }) => ({
+    all: 'unset',
+    display: 'block',
+    marginTop: theme.spacing(5),
+    fontSize: theme.spacing(3),
+    textAlign: 'center',
+}));
+
+const StyledTextLabel = styled('label')(({ theme }) => ({
+    display: 'block',
+    marginBottom: theme.spacing(1),
+}));
+
 export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
    const [loading, setLoading] = useState(false);
    const { setToastData } = useToast();
-    const { classes: styles } = useStyles();

    const [form, setForm] = useState<Partial<IFeedbackCESForm>>({
        path: state.path,
@ -57,19 +86,15 @@ export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
    };

    return (
-        <div className={styles.container}>
-            <h1 className={styles.title}>Please help us improve</h1>
-            <form
-                className={styles.form}
-                onSubmit={onSubmit}
-                aria-live="polite"
-            >
-                <p className={styles.subtitle}>{state.title}</p>
+        <StyledContainer>
+            <StyledTitle>Please help us improve</StyledTitle>
+            <StyledForm onSubmit={onSubmit} aria-live="polite">
+                <StyledSubtitle>{state.title}</StyledSubtitle>
                <FeedbackCESScore form={form} setForm={setForm} />
                <div hidden={!form.score}>
-                    <label htmlFor="comment" className={styles.textLabel}>
+                    <StyledTextLabel htmlFor="comment">
                        {state.text}
-                    </label>
+                    </StyledTextLabel>
                    <TextField
                        value={form.comment ?? ''}
                        onChange={onCommentChange}
@ -79,18 +104,18 @@ export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
                        fullWidth
                    />
                </div>
-                <div className={styles.buttons} hidden={!form.score}>
+                <Box hidden={!form.score} sx={{ textAlign: 'center' }}>
                    <Button
                        type="submit"
                        color="primary"
                        variant="contained"
-                        className={styles.button}
+                        sx={{ minWidth: '15rem' }}
                        disabled={!form.score || loading}
                    >
                        Send feedback
                    </Button>
-                </div>
-            </form>
-        </div>
+                </Box>
+            </StyledForm>
+        </StyledContainer>
    );
 };
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
@ -1,55 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    scoreInput: {
-        display: 'flex',
-        gap: '1rem',
-        alignItems: 'center',
-        margin: '0 auto',
-    },
-    scoreHelp: {
-        width: '6.25rem',
-        whiteSpace: 'nowrap',
-        color: theme.palette.text.secondary,
-        '&:first-of-type': {
-            textAlign: 'right',
-        },
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
-    scoreValue: {
-        '& input': {
-            clip: 'rect(0 0 0 0)',
-            clipPath: 'inset(50%)',
-            overflow: 'hidden',
-            position: 'absolute',
-            whiteSpace: 'nowrap',
-            width: 1,
-            height: 1,
-        },
-        '& span': {
-            display: 'grid',
-            justifyContent: 'center',
-            alignItems: 'center',
-            background: theme.palette.grey[300],
-            width: '3rem',
-            height: '3rem',
-            borderRadius: '10rem',
-            fontSize: '1.25rem',
-            paddingBottom: 2,
-            userSelect: 'none',
-            cursor: 'pointer',
-        },
-        '& input:checked + span': {
-            fontWeight: theme.fontWeight.bold,
-            background: theme.palette.primary.main,
-            color: 'white',
-        },
-        '& input:focus-visible + span': {
-            outline: '2px solid',
-            outlineOffset: 2,
-            outlineColor: theme.palette.primary.main,
-        },
-    },
-}));
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
@ -1,16 +1,68 @@
 import React from 'react';
 import produce from 'immer';
-import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESScore.styles';
 import { IFeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm';
+import { styled } from '@mui/material';

 interface IFeedbackCESScoreProps {
    form: Partial<IFeedbackCESForm>;
    setForm: React.Dispatch<React.SetStateAction<Partial<IFeedbackCESForm>>>;
 }

-export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
-    const { classes: styles } = useStyles();
+const StyledScoreInput = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    margin: '0 auto',
+}));

+const StyledScoreHelp = styled('span')(({ theme }) => ({
+    width: '6.25rem',
+    whiteSpace: 'nowrap',
+    color: theme.palette.text.secondary,
+    '&:first-of-type': {
+        textAlign: 'right',
+    },
+    [theme.breakpoints.down('sm')]: {
+        display: 'none',
+    },
+}));
+
+const StyledScoreValue = styled('label')(({ theme }) => ({
+    '& input': {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        overflow: 'hidden',
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: 1,
+        height: 1,
+    },
+    '& span': {
+        display: 'grid',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: theme.palette.grey[300],
+        width: '3rem',
+        height: '3rem',
+        borderRadius: '10rem',
+        fontSize: '1.25rem',
+        paddingBottom: 2,
+        userSelect: 'none',
+        cursor: 'pointer',
+    },
+    '& input:checked + span': {
+        fontWeight: theme.fontWeight.bold,
+        background: theme.palette.primary.main,
+        color: theme.palette.text.tertiaryContrast,
+    },
+    '& input:focus-visible + span': {
+        outline: '2px solid',
+        outlineOffset: 2,
+        outlineColor: theme.palette.primary.main,
+    },
+}));
+
+export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
    const onScoreChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setForm(
            produce(draft => {
@ -20,10 +72,10 @@ export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
    };

    return (
-        <div className={styles.scoreInput}>
-            <span className={styles.scoreHelp}>Very difficult</span>
+        <StyledScoreInput>
+            <StyledScoreHelp>Very difficult</StyledScoreHelp>
            {[1, 2, 3, 4, 5, 6, 7].map(score => (
-                <label key={score} className={styles.scoreValue}>
+                <StyledScoreValue key={score}>
                    <input
                        type="radio"
                        name="score"
@ -32,9 +84,9 @@ export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
                        onChange={onScoreChange}
                    />
                    <span>{score}</span>
-                </label>
+                </StyledScoreValue>
            ))}
-            <span className={styles.scoreHelp}>Very easy</span>
-        </div>
+            <StyledScoreHelp>Very easy</StyledScoreHelp>
+        </StyledScoreInput>
    );
 };
--- a/frontend/src/component/feedback/FeedbackCES/snapshots/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/snapshots/FeedbackCESForm.test.tsx.snap
@ -4,32 +4,32 @@ exports[`FeedbackCESForm 1`] = `
 <body>
  <div>
    <div
-      class="css-fdcp7c-container"
+      class="css-kaq1dv"
    >
      <h1
-        class="css-iyd7t0-title"
+        class="css-tb1je1"
      >
        Please help us improve
      </h1>
      <form
        aria-live="polite"
-        class="css-1rgjoiw-form"
+        class="css-518ok6"
      >
        <p
-          class="css-mhztvj-subtitle"
+          class="css-114cem8"
        >
          a
        </p>
        <div
-          class="css-io6e1g-scoreInput"
+          class="css-1klv5bg"
        >
          <span
-            class="css-16omcck-scoreHelp"
+            class="css-9f5hh8"
          >
            Very difficult
          </span>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -41,7 +41,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -53,7 +53,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -65,7 +65,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -77,7 +77,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -89,7 +89,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -101,7 +101,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <label
-            class="css-pq8zjr-scoreValue"
+            class="css-112g122"
          >
            <input
              name="score"
@ -113,7 +113,7 @@ exports[`FeedbackCESForm 1`] = `
            </span>
          </label>
          <span
-            class="css-16omcck-scoreHelp"
+            class="css-9f5hh8"
          >
            Very easy
          </span>
@ -122,7 +122,7 @@ exports[`FeedbackCESForm 1`] = `
          hidden=""
        >
          <label
-            class="css-13obo9p-textLabel"
+            class="css-1lg26qb"
            for="comment"
          >
            b
@ -165,11 +165,11 @@ exports[`FeedbackCESForm 1`] = `
          </div>
        </div>
        <div
-          class="css-n2ggaa-buttons"
+          class="MuiBox-root css-xi606m"
          hidden=""
        >
          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-9rpict-MuiButtonBase-root-MuiButton-root-button"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-w5plom-MuiButtonBase-root-MuiButton-root"
            disabled=""
            tabindex="-1"
            type="submit"
--- a/frontend/src/component/menu/Footer/ApiDetails/snapshots/ApiDetails.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/ApiDetails/snapshots/ApiDetails.test.tsx.snap
@ -7,7 +7,7 @@ exports[`renders correctly with empty version 1`] = `
      title="API details"
    >
      <h2
-        class="css-cxwipi-title"
+        class="css-gtu1fw"
      >
        Unleash 
         
@ -41,7 +41,7 @@ exports[`renders correctly with ui-config 1`] = `
      title="API details"
    >
      <h2
-        class="css-cxwipi-title"
+        class="css-gtu1fw"
      >
        Unleash 1.1.0
         
@ -75,7 +75,7 @@ exports[`renders correctly with versionInfo 1`] = `
      title="API details"
    >
      <h2
-        class="css-cxwipi-title"
+        class="css-gtu1fw"
      >
        Unleash 1.2.3
         
@ -109,7 +109,7 @@ exports[`renders correctly without uiConfig 1`] = `
      title="API details"
    >
      <h2
-        class="css-cxwipi-title"
+        class="css-gtu1fw"
      >
        Unleash 1.1.0
         
--- a/frontend/src/component/menu/Footer/Footer.styles.ts
+++ b/frontend/src/component/menu/Footer/Footer.styles.ts
@ -1,23 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    footer: {
-        padding: '2rem 4rem',
-        width: '100%',
-        flexGrow: 1,
-        zIndex: 100,
-        backgroundColor: theme.palette.footerBackground,
-    },
-    list: {
-        padding: 0,
-        margin: 0,
-    },
-    listItem: {
-        padding: 0,
-        margin: 0,
-        '& a': {
-            textDecoration: 'none',
-            color: theme.palette.text.primary,
-        },
-    },
-}));
--- a/frontend/src/component/menu/Footer/Footer.tsx
+++ b/frontend/src/component/menu/Footer/Footer.tsx
@ -1,18 +1,38 @@
 /* eslint-disable react/jsx-no-target-blank */

 import { VFC } from 'react';
-import { List, ListItem, ListItemText, Grid } from '@mui/material';
+import { List, ListItem, ListItemText, Grid, styled } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ApiDetails } from './ApiDetails/ApiDetails';
-import { useStyles } from './Footer.styles';
 import { FooterTitle } from './FooterTitle';

+const StyledFooter = styled('footer')(({ theme }) => ({
+    padding: theme.spacing(4, 8),
+    width: '100%',
+    flexGrow: 1,
+    zIndex: 100,
+    backgroundColor: theme.palette.footerBackground,
+}));
+
+const StyledList = styled(List)({
+    padding: 0,
+    margin: 0,
+});
+
+const StyledListItem = styled(ListItem)(({ theme }) => ({
+    padding: 0,
+    margin: 0,
+    '& a': {
+        textDecoration: 'none',
+        color: theme.palette.text.primary,
+    },
+}));
+
 export const Footer: VFC = () => {
-    const { classes: styles } = useStyles();
    const { uiConfig } = useUiConfig();

    return (
-        <footer className={styles.footer}>
+        <StyledFooter>
            <Grid
                container
                justifyContent="center"
@ -27,8 +47,8 @@ export const Footer: VFC = () => {
                        <Grid item>
                            <section title="Unleash SDK">
                                <FooterTitle>Server SDKs</FooterTitle>
-                                <List className={styles.list} dense>
-                                    <ListItem className={styles.listItem}>
+                                <StyledList dense>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -39,8 +59,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -51,8 +71,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -63,8 +83,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>{' '}
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>{' '}
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -75,8 +95,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>{' '}
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>{' '}
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -87,8 +107,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -99,8 +119,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -111,8 +131,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -123,15 +143,15 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                </List>
+                                    </StyledListItem>
+                                </StyledList>
                            </section>
                        </Grid>
                        <Grid item>
                            <section title="Unleash SDK">
                                <FooterTitle>Frontend SDKs</FooterTitle>
-                                <List className={styles.list} dense>
-                                    <ListItem className={styles.listItem}>
+                                <StyledList dense>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -142,8 +162,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -154,8 +174,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -166,8 +186,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -178,8 +198,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -190,15 +210,15 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                </List>
+                                    </StyledListItem>
+                                </StyledList>
                            </section>
                        </Grid>
                        <Grid item>
                            <section>
                                <FooterTitle>About</FooterTitle>
-                                <List className={styles.list} dense>
-                                    <ListItem className={styles.listItem}>
+                                <StyledList dense>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -209,8 +229,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -221,8 +241,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -233,8 +253,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -245,8 +265,8 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                    <ListItem className={styles.listItem}>
+                                    </StyledListItem>
+                                    <StyledListItem>
                                        <ListItemText
                                            primary={
                                                <a
@ -257,14 +277,14 @@ export const Footer: VFC = () => {
                                                </a>
                                            }
                                        />
-                                    </ListItem>
-                                </List>
+                                    </StyledListItem>
+                                </StyledList>
                            </section>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
-        </footer>
+        </StyledFooter>
    );
 };

--- a/frontend/src/component/menu/Footer/FooterTitle.styles.ts
+++ b/frontend/src/component/menu/Footer/FooterTitle.styles.ts
@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    title: {
-        all: 'unset',
-        display: 'block',
-        margin: '1rem 0',
-        fontSize: '1rem',
-        fontWeight: theme.fontWeight.bold,
-    },
-}));
--- a/frontend/src/component/menu/Footer/FooterTitle.tsx
+++ b/frontend/src/component/menu/Footer/FooterTitle.tsx
@ -1,12 +1,9 @@
-import { ReactNode } from 'react';
-import { useStyles } from 'component/menu/Footer/FooterTitle.styles';
+import { styled } from '@mui/material';

-interface IFooterTitleProps {
-    children: ReactNode;
-}
-
-export const FooterTitle = ({ children }: IFooterTitleProps) => {
-    const { classes: styles } = useStyles();
-
-    return <h2 className={styles.title}>{children}</h2>;
-};
+export const FooterTitle = styled('h2')(({ theme }) => ({
+    all: 'unset',
+    display: 'block',
+    margin: theme.spacing(2, 0),
+    fontSize: '1rem',
+    fontWeight: theme.fontWeight.bold,
+}));
--- a/frontend/src/component/menu/Footer/snapshots/Footer.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/snapshots/Footer.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`should render DrawerMenu 1`] = `
 [
  <footer
-    className="css-16d7ppb-footer"
+    className="css-10ce49z"
  >
    <div
      className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root"
@ -20,7 +20,7 @@ exports[`should render DrawerMenu 1`] = `
          title="API details"
        >
          <h2
-            className="css-cxwipi-title"
+            className="css-gtu1fw"
          >
            Unleash 3.x
             
@ -45,15 +45,15 @@ exports[`should render DrawerMenu 1`] = `
              title="Unleash SDK"
            >
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                Server SDKs
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
                </li>
                 
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
                </li>
                 
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -216,15 +216,15 @@ exports[`should render DrawerMenu 1`] = `
              title="Unleash SDK"
            >
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                Frontend SDKs
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -326,15 +326,15 @@ exports[`should render DrawerMenu 1`] = `
          >
            <section>
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                About
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -448,7 +448,7 @@ exports[`should render DrawerMenu 1`] = `
 exports[`should render DrawerMenu with "features" selected 1`] = `
 [
  <footer
-    className="css-16d7ppb-footer"
+    className="css-10ce49z"
  >
    <div
      className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 css-16chest-MuiGrid-root"
@ -465,7 +465,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
          title="API details"
        >
          <h2
-            className="css-cxwipi-title"
+            className="css-gtu1fw"
          >
            Unleash 3.x
             
@ -490,15 +490,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
              title="Unleash SDK"
            >
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                Server SDKs
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                </li>
                 
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                </li>
                 
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -661,15 +661,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
              title="Unleash SDK"
            >
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                Frontend SDKs
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -771,15 +771,15 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
          >
            <section>
              <h2
-                className="css-cxwipi-title"
+                className="css-gtu1fw"
              >
                About
              </h2>
              <ul
-                className="MuiList-root MuiList-padding MuiList-dense css-e6vijf-MuiList-root-list"
+                className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
              >
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div
@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                  </div>
                </li>
                <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-17d9xc9-MuiListItem-root-listItem"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
                  disabled={false}
                >
                  <div