Refactor/make styles batch 6 part 3 (#2823)

Last set of components refactoring for batch 6

frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx

@@ -29,6 +29,7 @@ interface IPermissionIconButtonProps {
 
 interface IButtonProps extends IPermissionIconButtonProps {
     onClick: (event: React.SyntheticEvent) => void;
+    style?: React.CSSProperties;
 }
 
 interface ILinkProps extends IPermissionIconButtonProps {
@@ -107,6 +108,7 @@ const PermissionIconButton = (props: IButtonProps | ILinkProps) => {
             />
         );
     }
+
     return <RootPermissionIconButton {...props} />;
 };
 

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

@@ -1,39 +1,36 @@
-import { makeStyles } from 'tss-react/mui';
+import Input from 'component/common/Input/Input';
+import { TextField, Button, styled } from '@mui/material';
 
-export const useStyles = makeStyles()(theme => ({
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-    },
-    container: {
-        maxWidth: '400px',
-    },
-    input: { width: '100%', marginBottom: '1rem' },
-    label: {
-        minWidth: '300px',
-        [theme.breakpoints.down(600)]: {
-            minWidth: 'auto',
-        },
-    },
-    buttonContainer: {
-        marginTop: 'auto',
-        display: 'flex',
-        justifyContent: 'flex-end',
-    },
-    cancelButton: {
-        marginLeft: '1.5rem',
-    },
-    inputDescription: {
-        marginBottom: '0.5rem',
-    },
-    permissionErrorContainer: {
-        position: 'relative',
-    },
-    errorMessage: {
-        fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.error.main,
-        position: 'absolute',
-        top: '-8px',
-    },
+export const StyledForm = styled('form')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+
+export const StyledContainer = styled('div')(() => ({
+    maxWidth: '400px',
+}));
+
+export const StyledDescription = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+export const StyledInput = styled(Input)(({ theme }) => ({
+    width: '100%',
+    marginBottom: theme.spacing(2),
+}));
+
+export const StyledTextField = styled(TextField)(({ theme }) => ({
+    width: '100%',
+    marginBottom: theme.spacing(2),
+}));
+
+export const StyledButtonContainer = styled('div')(() => ({
+    marginTop: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+}));
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
 }));

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

@@ -1,9 +1,14 @@
-import Input from 'component/common/Input/Input';
-import { TextField, Button } from '@mui/material';
-import { useStyles } from './ProjectForm.styles';
 import React from 'react';
 import { trim } from 'component/common/util';
-
+import {
+    StyledForm,
+    StyledContainer,
+    StyledDescription,
+    StyledInput,
+    StyledTextField,
+    StyledButtonContainer,
+    StyledButton,
+} from './ProjectForm.styles';
 interface IProjectForm {
     projectId: string;
     projectName: string;
@@ -34,16 +39,11 @@ const ProjectForm: React.FC<IProjectForm> = ({
     validateProjectId,
     clearErrors,
 }) => {
-    const { classes: styles } = useStyles();
-
     return (
-        <form onSubmit={handleSubmit} className={styles.form}>
-            <div className={styles.container}>
-                <p className={styles.inputDescription}>
-                    What is your project Id?
-                </p>
-                <Input
-                    className={styles.input}
+        <StyledForm onSubmit={handleSubmit}>
+            <StyledContainer>
+                <StyledDescription>What is your project Id?</StyledDescription>
+                <StyledInput
                     label="Project Id"
                     value={projectId}
                     onChange={e => setProjectId(trim(e.target.value))}
@@ -56,11 +56,10 @@ const ProjectForm: React.FC<IProjectForm> = ({
                     required
                 />
 
-                <p className={styles.inputDescription}>
+                <StyledDescription>
                     What is your project name?
-                </p>
-                <Input
-                    className={styles.input}
+                </StyledDescription>
+                <StyledInput
                     label="Project name"
                     value={projectName}
                     onChange={e => setProjectName(e.target.value)}
@@ -70,27 +69,24 @@ const ProjectForm: React.FC<IProjectForm> = ({
                     required
                 />
 
-                <p className={styles.inputDescription}>
+                <StyledDescription>
                     What is your project description?
-                </p>
-                <TextField
-                    className={styles.input}
+                </StyledDescription>
+                <StyledTextField
                     label="Project description"
                     variant="outlined"
                     multiline
                     maxRows={4}
                     value={projectDesc}
                     onChange={e => setProjectDesc(e.target.value)}
                 />
-            </div>
+            </StyledContainer>
 
-            <div className={styles.buttonContainer}>
+            <StyledButtonContainer>
                 {children}
-                <Button onClick={handleCancel} className={styles.cancelButton}>
-                    Cancel
-                </Button>
-            </div>
-        </form>
+                <StyledButton onClick={handleCancel}>Cancel</StyledButton>
+            </StyledButtonContainer>
+        </StyledForm>
     );
 };
 

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

@@ -1,85 +1,83 @@
-import { makeStyles } from 'tss-react/mui';
+import { Link } from 'react-router-dom';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { flexRow } from 'themes/themeStyles';
+import { styled } from '@mui/material';
 
-export const useStyles = makeStyles()(theme => ({
-    projectInfo: {
-        width: '225px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        boxShadow: 'none',
-        [theme.breakpoints.down('md')]: {
-            flexDirection: 'row',
-            alignItems: 'stretch',
-            width: '100%',
-            marginBottom: '1rem',
-        },
+export const StyledDivContainer = styled('div')(({ theme }) => ({
+    ...flexRow,
+    width: '225px',
+    flexDirection: 'column',
+    boxShadow: 'none',
+    [theme.breakpoints.down('md')]: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        width: '100%',
+        marginBottom: theme.spacing(2),
     },
-    percentageContainer: {
-        display: 'flex',
+}));
+
+export const StyledDivPercentageContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    margin: theme.spacing(2, 0),
+}));
+
+export const StyledDivInfoContainer = styled('div')(({ theme }) => ({
+    margin: '0',
+    textAlign: 'center',
+    marginBottom: theme.spacing(2),
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadiusLarge,
+    width: '100%',
+    padding: theme.spacing(3, 2, 3, 2),
+    [theme.breakpoints.down('md')]: {
+        margin: theme.spacing(0, 0.5),
+        ...flexRow,
+        flexDirection: 'column',
         justifyContent: 'center',
-        margin: '1rem 0',
-    },
-    projectIcon: {
-        margin: '2rem 0',
-        [theme.breakpoints.down('md')]: {
-            margin: '0 0 0.25rem 0',
-            width: '53px',
+        fontSize: theme.fontSizes.smallBody,
+        position: 'relative',
+        padding: theme.spacing(1.5),
+        '&:first-of-type': {
+            marginLeft: '0',
         },
-    },
-    subtitle: {
-        marginBottom: '1rem',
-    },
-    emphazisedText: {
-        fontSize: '1.5rem',
-        marginBottom: '1rem',
-        [theme.breakpoints.down('md')]: {
-            fontSize: '1rem',
-            marginBottom: '2rem',
-        },
-    },
-    infoSection: {
-        margin: '0',
-        textAlign: 'center',
-        marginBottom: '1rem',
-        backgroundColor: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadiusLarge,
-        width: '100%',
-        padding: '1.5rem 1rem 1.5rem 1rem',
-        [theme.breakpoints.down('md')]: {
-            margin: '0 0.25rem',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '0.8rem',
-            position: 'relative',
-            padding: '0.8rem',
-            '&:first-of-type': {
-                marginLeft: '0',
-            },
-            '&:last-of-type': {
-                marginRight: '0',
-            },
+        '&:last-of-type': {
+            marginRight: '0',
         },
     },
-    arrowIcon: {
-        color: '#635dc5',
-        marginLeft: '0.5rem',
-    },
-    permissionButtonShortDesc: {
-        transform: `translateY(-10px)`,
+}));
+
+export const StyledParagraphSubtitle = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(2),
+}));
+
+export const StyledParagraphEmphasizedText = styled('p')(({ theme }) => ({
+    fontSize: '1.5rem',
+    marginBottom: theme.spacing(2),
+    [theme.breakpoints.down('md')]: {
+        fontSize: theme.fontSizes.bodySize,
+        marginBottom: theme.spacing(4),
     },
-    infoLink: {
-        textDecoration: 'none',
-        color: '#635dc5',
-        [theme.breakpoints.down('md')]: {
-            position: 'absolute',
-            bottom: '5px',
-        },
+}));
+
+export const StyledSpanLinkText = styled('p')(({ theme }) => ({
+    [theme.breakpoints.down('md')]: {
+        display: 'none',
     },
-    linkText: {
-        [theme.breakpoints.down('md')]: {
-            display: 'none',
-        },
+}));
+
+export const StyledLink = styled(Link)(({ theme }) => ({
+    textDecoration: 'none',
+    ...flexRow,
+    justifyContent: 'center',
+    color: theme.palette.primary.main,
+    [theme.breakpoints.down('md')]: {
+        position: 'absolute',
+        bottom: theme.spacing(1.5),
     },
 }));
+
+export const StyledArrowIcon = styled(ArrowForwardIcon)(({ theme }) => ({
+    color: theme.palette.primary.main,
+    marginLeft: theme.spacing(1),
+}));