Sami/edit user info

src/assets/StyleGuide.tsx

@@ -0,0 +1,21 @@
+// BUTTON STYLES!!! use by calling <Button style={lightButton}
+export const lightButton = {
+    borderRadius: '5px',
+    backgroundColor: '#F6F6F6',
+    color: '#2E2E2E',
+    fontSize: '15px',
+    padding: '10px 30px 10px 30px',
+    textTransform: 'none',
+    boxShadow: 'none',
+  }
+
+  export const darkButton = {
+    borderRadius: '5px',
+    backgroundColor: '#1A202C',
+    color: '#FFFFFF',
+    fontSize: '15px',
+    padding: '10px 30px 10px 30px',
+    textTransform: 'none',
+    boxShadow: 'none',
+  }
+

src/components/member/settingsPage/informationTab/MemberSettingsInformationTabContent.tsx

@@ -1,3 +1,5 @@
+import SettingsInfo from '@/sprintFiles/SettingsInfo/SettingsInfo'
+
 const MemberSettingsInformationTabContent = () => {
   return <div>MemberSettingsInformationTabContent</div>
 }

src/features/user/cards/EditUserCard.tsx

@@ -1,16 +1,23 @@
 import React from 'react'
 import UserForm from '../forms/UserForm'
-import { Dialog, DialogContent, DialogTitle } from '@mui/material'
+import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material'
+import styles from '../forms/UserForm.module.css'
+import Icon from '../../../assets/Icon'
 
 function EditUserCard({
   userId,
   setOpen,
   open,
+  editType,
 }: {
   userId?: string
   setOpen: (value: React.SetStateAction<boolean>) => void
   open: boolean
+  editType?: string
 }) {
+  const handleClose = () => {
+    setOpen(false)
+  }
   React.useEffect(() => {
     // console.log(selectUsersResult((state) => state))
   }, [])
@@ -23,16 +30,33 @@ function EditUserCard({
         onClose={() => setOpen(false)}
         className="dialog"
       >
-        <DialogTitle variant="h4" component="h2">
-          Update User
-        </DialogTitle>
-        <DialogContent>
-          <UserForm
-            setOpen={setOpen}
-            userId={userId} //'6401c47de8d154aa9ccf5d93'
-            isNewUser={false}
-          />
-        </DialogContent>
+        <div className={styles.shiftBox}>
+          <div>
+            <div className={styles.flex}>
+              <DialogTitle
+                variant="h4"
+                component="h2"
+                className={styles.dialogTitle}
+              >
+                Edit {editType}
+              </DialogTitle>
+              <Button onClick={handleClose} className={styles.close}>
+                <Icon type={'close'} />
+              </Button>
+            </div>
+            <hr className={styles.line} />
+          </div>
+          <div className={styles.content}>
+            <DialogContent>
+              <UserForm
+                setOpen={setOpen}
+                userId={userId} //'6401c47de8d154aa9ccf5d93'
+                isNewUser={false}
+                editType={editType}
+              />
+            </DialogContent>
+          </div>
+        </div>
       </Dialog>
     </>
   )

src/features/user/forms/UserForm.module.css

@@ -0,0 +1,45 @@
+.shiftBox {
+    padding: 5%;
+  }
+
+  .header {
+    padding-bottom: 3%;
+  }
+
+  .title {
+    padding-bottom: 5%;
+    float: left;
+    display: block;
+  }
+
+  .close {
+    float: right;
+    padding-bottom: 5%;
+    display: block;
+  }
+
+  .formField {
+    width: 100%;
+    padding-bottom: 3%;
+    /* padding-right: 3%; */
+    float: left;
+  }
+
+  .flex {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 3%;
+  }
+
+  .submit {
+    float: right;
+    margin-bottom: 10px;
+    /* padding-right: 3%; */
+  }
+
+  .clear {
+    float: left;
+    margin-bottom: 10px;
+  }
+