From 0ec5e6dcde39dc1cc84edc814e48cd21a74456fe Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:34:56 -0400
Subject: [PATCH] Refactored profile tab

---
 .../TabPanels/Account/ProfilePanel.jsx        | 85 ++++++++++---------
 Client/src/Pages/Account/index.css            | 23 +----
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index e42d9f20f..5dc8b6840 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -217,11 +217,17 @@ const ProfilePanel = () => {
 
   return (
     <TabPanel value="profile">
-      <form className="edit-profile-form" noValidate spellCheck="false">
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+      <Stack
+        component="form"
+        className="edit-profile-form"
+        noValidate
+        spellCheck="false"
+        gap={theme.gap.xl}
+      >
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">First name</Typography>
-          </Stack>
+          </Box>
           <Field
             id="edit-first-name"
             value={localData.firstName}
@@ -230,11 +236,11 @@ const ProfilePanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-first-name"]]}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">Last name</Typography>
-          </Stack>
+          </Box>
           <Field
             id="edit-last-name"
             placeholder="Enter your last name"
@@ -243,11 +249,11 @@ const ProfilePanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-last-name"]]}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Stack flex={0.9}>
             <Typography component="h1">Email</Typography>
-            <Typography component="p">
+            <Typography component="p" sx={{ opacity: 0.6 }}>
               This is your current email address — it cannot be changed.
             </Typography>
           </Stack>
@@ -256,20 +262,19 @@ const ProfilePanel = () => {
             value={user.email}
             placeholder="Enter your email"
             autoComplete="email"
-            // TODO - add onChange
             onChange={() => logger.warn("disabled")}
             // error={errors[idToName["edit-email"]]}
             disabled={true}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Stack flex={0.9}>
             <Typography component="h1">Your photo</Typography>
-            <Typography component="p">
+            <Typography component="p" sx={{ opacity: 0.6 }}>
               This photo will be displayed in your profile page.
             </Typography>
           </Stack>
-          <Stack className="row-stack" direction="row" alignItems="center">
+          <Stack direction="row" alignItems="center" flex={1}>
             <Avatar
               src={
                 localData?.deleteProfileImage
@@ -294,7 +299,7 @@ const ProfilePanel = () => {
               }}
             />
           </Stack>
-        </div>
+        </Stack>
         <Divider
           aria-hidden="true"
           className="short-divider"
@@ -313,31 +318,33 @@ const ProfilePanel = () => {
                 Object.keys(errors).length !== 0 && !errors?.picture && true
               }
               sx={{
-                paddingX: "40px",
+                paddingX: theme.gap.large,
               }}
             />
           </Box>
         </Stack>
-      </form>
+      </Stack>
       <Divider aria-hidden="true" />
-      <form className="delete-profile-form" noValidate spellCheck="false">
-        <div className="delete-profile-form__wrapper">
-          <Stack direction="column" gap="8px">
-            <Typography component="h1">Delete account</Typography>
-            <Typography component="p">
-              Note that deleting your account will remove all data from our
-              system. This is permanent and non-recoverable.
-            </Typography>
-            <Box sx={{ mt: theme.spacing(2) }}>
-              <Button
-                level="error"
-                label="Delete account"
-                onClick={() => setIsOpen("delete")}
-              />
-            </Box>
-          </Stack>
-        </div>
-      </form>
+      <Stack
+        component="form"
+        noValidate
+        spellCheck="false"
+        gap={theme.gap.small}
+      >
+        <Box>
+          <Typography component="h1">Delete account</Typography>
+          <Typography component="p" sx={{ opacity: 0.6 }}>
+            Note that deleting your account will remove all data from our
+            system. This is permanent and non-recoverable.
+          </Typography>
+        </Box>
+        <Button
+          level="error"
+          label="Delete account"
+          onClick={() => setIsOpen("delete")}
+          sx={{ width: "fit-content", mt: theme.gap.small }}
+        />
+      </Stack>
       {/* TODO - Update ModalPopup Component with @mui for reusability */}
       <Modal
         aria-labelledby="modal-delete-account"
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index c05cc01e7..28a554afa 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -15,11 +15,6 @@
 .account h1.MuiTypography-root {
   font-weight: 600;
 }
-.account .MuiStack-root:not(.table-stack) {
-  flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-}
 .account .MuiTabPanel-root {
   padding: 0;
   margin-top: 50px;
@@ -34,6 +29,9 @@
 .account button:not(.MuiIconButton-root) {
   height: 34px;
 }
+.account .field {
+  flex: 1;
+}
 .account [class$="-form"] {
   width: inherit;
 }
@@ -44,22 +42,16 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.edit-profile-form__wrapper > .MuiStack-root:not(.row-stack),
 .edit-password-form__wrapper > .MuiStack-root:not(.row-stack) {
   flex-direction: column;
   gap: 8px;
   margin-right: 10px;
 }
-.edit-profile-form__wrapper p.MuiTypography-root,
-.delete-profile-form__wrapper p.MuiTypography-root {
-  opacity: 0.6;
-}
 #modal-delete-account,
 #modal-edit-org-name,
 #modal-invite-member {
   font-size: var(--env-var-font-size-large);
 }
-.edit-profile-form__wrapper:not(:first-of-type),
 .edit-password-form__wrapper:not(:first-of-type),
 .edit-team-form__wrapper:not(:first-of-type) {
   margin-top: var(--env-var-spacing-4);
@@ -70,15 +62,6 @@
   align-items: center;
 }
 
-/* for testing, will remove later */
-@media only screen and (max-width: 1600px) {
-  .edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
-  .edit-password-form__wrapper .MuiStack-root:not(.row-stack),
-  .edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
-    margin-right: 30px;
-  }
-}
-
 .account .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }