From f563629e690b4c3f62fff75d091ea23d73cb3413 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 21 Jun 2024 13:16:11 -0400
Subject: [PATCH] refactored some hardcoded css

---
 .../src/Components/DashboardSidebar/index.css |   4 -
 .../ProfileSettings/ProfilePanel.jsx          |  53 ++++----
 .../TabPanels/ProfileSettings/TeamPanel.jsx   | 123 +++++++++---------
 Client/src/Pages/Settings/index.css           |   9 +-
 Client/src/Pages/Settings/index.jsx           |  24 ++--
 5 files changed, 108 insertions(+), 105 deletions(-)

diff --git a/Client/src/Components/DashboardSidebar/index.css b/Client/src/Components/DashboardSidebar/index.css
index d666aa63e..00e282eaf 100644
--- a/Client/src/Components/DashboardSidebar/index.css
+++ b/Client/src/Components/DashboardSidebar/index.css
@@ -12,10 +12,6 @@
   justify-content: space-between;
 }
 
-.dashboard-menu-container{
-  padding-top: 40px;
-}
-
 .support-container {
   display: flex;
   align-items: center;
diff --git a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
index 024b1d499..0272c2b9a 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
@@ -54,10 +54,7 @@ const ProfilePanel = () => {
   };
 
   return (
-    <TabPanel
-      value="0"
-      sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
-    >
+    <TabPanel value="0" sx={{ padding: "0", marginTop: theme.spacing(6.25) }}>
       <form className="edit-profile-form" noValidate spellCheck="false">
         <div className="edit-profile-form__wrapper">
           <Stack
@@ -172,6 +169,30 @@ const ProfilePanel = () => {
             />
           </Stack>
         </div>
+        <Divider
+          aria-hidden="true"
+          width="0"
+          sx={{ marginY: theme.spacing(1) }}
+        />
+        <Stack direction="row" justifyContent="flex-end">
+          <Box width="fit-content">
+            <ButtonSpinner
+              level="primary"
+              label="Save"
+              onClick={handleSaveProfile}
+              isLoading={isLoading}
+              loadingText="Saving..."
+              sx={{
+                paddingX: "40px",
+                height: "fit-content",
+                fontSize: "13px",
+                "&:focus": {
+                  outline: "none",
+                },
+              }}
+            />
+          </Box>
+        </Stack>
       </form>
       <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
       <form className="delete-profile-form" noValidate spellCheck="false">
@@ -200,30 +221,6 @@ const ProfilePanel = () => {
           </Stack>
         </div>
       </form>
-      <Divider
-        aria-hidden="true"
-        width="0"
-        sx={{ marginY: theme.spacing(6.25) }}
-      />
-      <Stack direction="row" justifyContent="flex-end">
-        <Box width="fit-content">
-          <ButtonSpinner
-            level="primary"
-            label="Save"
-            onClick={handleSaveProfile}
-            isLoading={isLoading}
-            loadingText="Saving..."
-            sx={{
-              paddingX: "40px",
-              height: "fit-content",
-              fontSize: "13px",
-              "&:focus": {
-                outline: "none",
-              },
-            }}
-          />
-        </Box>
-      </Stack>
       {/* TODO - Update ModalPopup Component with @mui for reusability */}
       <Modal
         aria-labelledby="modal-delete-account"
diff --git a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
index 326dfa2ef..61148d969 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
@@ -186,10 +186,10 @@ const TeamPanel = () => {
   return (
     <TabPanel
       value="2"
-      sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
+      sx={{ padding: "0", marginTop: theme.spacing(6.25) }}
     >
-      <form className="edit-team-form" noValidate spellCheck="false">
-        <div className="edit-team-form__wrapper">
+      <form className="edit-organization-form">
+        <div className="edit-organization-form__wrapper">
           <Stack
             direction="column"
             gap="8px"
@@ -222,6 +222,66 @@ const TeamPanel = () => {
             />
           </Stack>
         </div>
+        <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
+      </form>
+      <Modal
+        aria-labelledby="modal-edit-org-name"
+        aria-describedby="edit-organization-name"
+        open={orgStates.isOpen}
+        onClose={() => toggleOrgModal(false)}
+        disablePortal
+      >
+        <Stack
+          gap="20px"
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: "4px",
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-edit-org-name" variant="h4" component="h1">
+            Rename this organization?
+          </Typography>
+          <TextField
+            id="edit-organization-name"
+            placeholder={orgStates.name}
+            spellCheck="false"
+            value={orgStates.newName}
+            onChange={(event) =>
+              setOrgStates((prev) => ({
+                ...prev,
+                newName: event.target.value,
+              }))
+            }
+          ></TextField>
+          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => toggleOrgModal(false)}
+              sx={{ fontSize: "13px" }}
+            />
+            <ButtonSpinner
+              level="primary"
+              label="Rename"
+              onClick={handleRenameOrg}
+              isLoading={orgStates.isLoading}
+              sx={{ fontSize: "13px", paddingX: "30px" }}
+            />
+          </Stack>
+        </Stack>
+      </Modal>
+      <form className="edit-team-form" noValidate spellCheck="false">
         <div className="edit-team-form__wrapper">
           <Typography variant="h4" component="h1">
             Team members
@@ -433,63 +493,6 @@ const TeamPanel = () => {
           </Box>
         </Stack>
       </form>
-      <Modal
-        aria-labelledby="modal-edit-org-name"
-        aria-describedby="edit-organization-name"
-        open={orgStates.isOpen}
-        onClose={() => toggleOrgModal(false)}
-        disablePortal
-      >
-        <Stack
-          gap="20px"
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-edit-org-name" variant="h4" component="h1">
-            Rename this organization?
-          </Typography>
-          <TextField
-            id="edit-organization-name"
-            placeholder={orgStates.name}
-            spellCheck="false"
-            value={orgStates.newName}
-            onChange={(event) =>
-              setOrgStates((prev) => ({
-                ...prev,
-                newName: event.target.value,
-              }))
-            }
-          ></TextField>
-          <Stack direction="row" gap="10px" mt="10px" justifyContent="flex-end">
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => toggleOrgModal(false)}
-              sx={{ fontSize: "13px" }}
-            />
-            <ButtonSpinner
-              level="primary"
-              label="Rename"
-              onClick={handleRenameOrg}
-              isLoading={orgStates.isLoading}
-              sx={{ fontSize: "13px", paddingX: "30px" }}
-            />
-          </Stack>
-        </Stack>
-      </Modal>
       <Modal
         aria-labelledby="modal-invite-member"
         aria-describedby="invite-member-to-team"
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index ebf065a7e..022e37bcb 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -1,7 +1,8 @@
 .edit-profile-form,
 .edit-password-form,
 .delete-profile-form,
-.edit-team-form {
+.edit-team-form,
+.edit-organization-form {
   width: inherit;
 }
 .edit-profile-form__wrapper,
@@ -11,7 +12,8 @@
 .edit-profile-form__wrapper,
 .delete-profile-form__wrapper,
 .edit-password-form__wrapper,
-.edit-team-form__wrapper {
+.edit-team-form__wrapper,
+.edit-organization-form__wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -20,7 +22,8 @@
 .edit-profile-form__wrapper h1.MuiTypography-root,
 .delete-profile-form__wrapper h1.MuiTypography-root,
 .edit-password-form__wrapper h1.MuiTypography-root,
-.edit-team-form__wrapper h1.MuiTypography-root {
+.edit-team-form__wrapper h1.MuiTypography-root,
+.edit-organization-form h1.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   font-weight: 600;
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index c49b08a38..118b3458b 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -1,10 +1,6 @@
 import PropTypes from "prop-types";
 import { useState } from "react";
-import {
-  Box,
-  Tab,
-  useTheme,
-} from "@mui/material";
+import { Box, Tab, useTheme } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import "./index.css";
@@ -32,18 +28,21 @@ const Settings = () => {
 
   return (
     <Box
-      //TODO - need to figure out document sizing
       //TODO - breakpoints for responsive design
-      height="calc(100vh - 104px)"
       minWidth={theme.spacing(55)}
       width="100vw"
       maxWidth="calc(100vw - 800px)"
-      mt={theme.spacing(8)}
       pt={theme.spacing(5)}
       px={theme.spacing(10)}
     >
       <TabContext value={tab}>
-        <Box width="100%" sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Box
+          sx={{
+            borderBottom: 1,
+            borderColor: "divider",
+            "& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+          }}
+        >
           <TabList onChange={handleTabChange} aria-label="settings tabs">
             {tabList.map((label, index) => (
               <Tab
@@ -55,12 +54,17 @@ const Settings = () => {
                   color: theme.palette.secondary.main,
                   textTransform: "none",
                   minWidth: "fit-content",
+                  minHeight: 0,
                   paddingLeft: "0",
-                  paddingY: "8px",
+                  paddingY: "10px",
                   marginRight: "20px",
                   "&:focus": {
                     outline: "none",
                   },
+                  "& .MuiTouchRipple-root": {
+                    pointerEvents: "none",
+                    display: "none",
+                  },
                 }}
               />
             ))}