Shaswat: Remove usage of useStyles from UserForm (#2619)

Changes for [issue](https://github.com/Unleash/unleash/issues/2606)

Co-authored-by: Nuno Góis <github@nunogois.com>

frontend/src/component/admin/users/UserForm/UserForm.styles.ts

@@ -1,60 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        maxWidth: '400px',
-    },
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-    },
-    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',
-    },
-    roleBox: {
-        margin: '3px 0',
-        border: '1px solid #EFEFEF',
-        padding: '1rem',
-    },
-    userInfoContainer: {
-        margin: '-20px 0',
-    },
-    roleRadio: {
-        marginRight: '15px',
-    },
-    roleSubtitle: {
-        margin: '0.5rem 0',
-    },
-    errorAlert: {
-        marginBottom: '1rem',
-    },
-    flexRow: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-}));

frontend/src/component/admin/users/UserForm/UserForm.tsx

@@ -7,14 +7,62 @@ import {
     Typography,
     Radio,
     Switch,
+    styled,
 } from '@mui/material';
-import { useStyles } from './UserForm.styles';
 import React from 'react';
 import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { EDIT } from 'constants/misc';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
+const StyledForm = styled('form')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    maxWidth: theme.spacing(50),
+}));
+
+const StyledInputDescription = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const StyledInput = styled(Input)(({ theme }) => ({
+    width: '100%',
+    marginBottom: theme.spacing(2),
+}));
+
+const StyledRoleSubtitle = styled(Typography)(({ theme }) => ({
+    margin: theme.spacing(1, 0),
+}));
+
+const StyledRoleBox = styled(FormControlLabel)(({ theme }) => ({
+    margin: theme.spacing(0.5, 0),
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2),
+}));
+
+const StyledRoleRadio = styled(Radio)(({ theme }) => ({
+    marginRight: theme.spacing(2),
+}));
+
+const StyledFlexRow = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const StyledButtonContainer = styled('div')(() => ({
+    marginTop: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+}));
+
+const StyledCancelButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
+}));
+
 interface IUserForm {
     email: string;
     name: string;
@@ -47,7 +95,6 @@ const UserForm: React.FC<IUserForm> = ({
     clearErrors,
     mode,
 }) => {
-    const { classes: styles } = useStyles();
     const { roles } = useUsers();
     const { uiConfig } = useUiConfig();
 
@@ -62,13 +109,12 @@ const UserForm: React.FC<IUserForm> = ({
     };
 
     return (
-        <form onSubmit={handleSubmit} className={styles.form}>
+        <StyledForm onSubmit={handleSubmit}>
-            <div className={styles.container}>
+            <StyledContainer>
-                <p className={styles.inputDescription}>
+                <StyledInputDescription>
                     Who is the new Unleash user?
-                </p>
+                </StyledInputDescription>
-                <Input
+                <StyledInput
-                    className={styles.input}
                     label="Full name"
                     value={name}
                     onChange={e => setName(e.target.value)}
@@ -77,8 +123,7 @@ const UserForm: React.FC<IUserForm> = ({
                     onFocus={() => clearErrors()}
                     autoFocus
                 />
-                <Input
+                <StyledInput
-                    className={styles.input}
                     label="Email"
                     type="email"
                     value={email}
@@ -88,13 +133,9 @@ const UserForm: React.FC<IUserForm> = ({
                     onFocus={() => clearErrors()}
                 />
                 <FormControl>
-                    <Typography
+                    <StyledRoleSubtitle variant="subtitle1" data-loading>
-                        variant="subtitle1"
-                        className={styles.roleSubtitle}
-                        data-loading
-                    >
                         What is your team member allowed to do?
-                    </Typography>
+                    </StyledRoleSubtitle>
                     <RadioGroup
                         name="rootRole"
                         value={rootRole || ''}
@@ -103,10 +144,9 @@ const UserForm: React.FC<IUserForm> = ({
                     >
                         {/* @ts-expect-error */}
                         {roles.sort(sortRoles).map(role => (
-                            <FormControlLabel
+                            <StyledRoleBox
                                 key={`role-${role.id}`}
                                 labelPlacement="end"
-                                className={styles.roleBox}
                                 label={
                                     <div>
                                         <strong>{role.name}</strong>
@@ -116,9 +156,8 @@ const UserForm: React.FC<IUserForm> = ({
                                     </div>
                                 }
                                 control={
-                                    <Radio
+                                    <StyledRoleRadio
                                         checked={role.id === rootRole}
-                                        className={styles.roleRadio}
                                     />
                                 }
                                 value={role.id}
@@ -130,14 +169,13 @@ const UserForm: React.FC<IUserForm> = ({
                     condition={mode !== EDIT && Boolean(uiConfig?.emailEnabled)}
                     show={
                         <FormControl>
-                            <Typography
+                            <StyledRoleSubtitle
                                 variant="subtitle1"
-                                className={styles.roleSubtitle}
                                 data-loading
                             >
                                 Should we send an email to your new team member
-                            </Typography>
+                            </StyledRoleSubtitle>
-                            <div className={styles.flexRow}>
+                            <StyledFlexRow>
                                 <Switch
                                     name="sendEmail"
                                     onChange={() => setSendEmail(!sendEmail)}
@@ -146,18 +184,18 @@ const UserForm: React.FC<IUserForm> = ({
                                 <Typography>
                                     {sendEmail ? 'Yes' : 'No'}
                                 </Typography>
-                            </div>
+                            </StyledFlexRow>
                         </FormControl>
                     }
                 />
-            </div>
+            </StyledContainer>
-            <div className={styles.buttonContainer}>
+            <StyledButtonContainer>
                 {children}
-                <Button onClick={handleCancel} className={styles.cancelButton}>
+                <StyledCancelButton onClick={handleCancel}>
                     Cancel
-                </Button>
+                </StyledCancelButton>
-            </div>
+            </StyledButtonContainer>
-        </form>
+        </StyledForm>
     );
 };