Refactor makestyles 2 2 (#2827)

Unleash · Jan 5, 2023 · dc46843 · dc46843
1 parent 5ac08e0
commit dc46843
Show file tree

Hide file tree

Showing 24 changed files with 372 additions and 625 deletions.
diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.styles.ts
diff --git 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}
             />

diff --git 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',
-    },
-}));