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

Changes for [issue](#2606) Co-authored-by: Nuno Góis <github@nunogois.com>
Unleash · Dec 9, 2022 · 59c043e · 59c043e
1 parent 1bd95d4
commit 59c043e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 91 deletions.
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/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}>
-            <div className={styles.container}>
-                <p className={styles.inputDescription}>
+        <StyledForm onSubmit={handleSubmit}>
+            <StyledContainer>
+                <StyledInputDescription>
                     Who is the new Unleash user?
-                </p>
-                <Input
-                    className={styles.input}
+                </StyledInputDescription>
+                <StyledInput
                     label="Full name"
                     value={name}
                     onChange={e => setName(e.target.value)}
@@ -77,8 +123,7 @@ const UserForm: React.FC<IUserForm> = ({
                     onFocus={() => clearErrors()}
                     autoFocus
                 />
-                <Input
-                    className={styles.input}
+                <StyledInput
                     label="Email"
                     type="email"
                     value={email}
@@ -88,13 +133,9 @@ const UserForm: React.FC<IUserForm> = ({
                     onFocus={() => clearErrors()}
                 />
                 <FormControl>
-                    <Typography
-                        variant="subtitle1"
-                        className={styles.roleSubtitle}
-                        data-loading
-                    >
+                    <StyledRoleSubtitle variant="subtitle1" 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>
-                            <div className={styles.flexRow}>
+                            </StyledRoleSubtitle>
+                            <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>
-            <div className={styles.buttonContainer}>
+            </StyledContainer>
+            <StyledButtonContainer>
                 {children}
-                <Button onClick={handleCancel} className={styles.cancelButton}>
+                <StyledCancelButton onClick={handleCancel}>
                     Cancel
-                </Button>
-            </div>
-        </form>
+                </StyledCancelButton>
+            </StyledButtonContainer>
+        </StyledForm>
     );
 };