From db652852f1bf95d3168935281b9334e59128883f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 21 Jun 2024 19:08:42 -0400
Subject: [PATCH] Removed duplicate styling code from component files

---
 Client/src/Components/Button/index.jsx        |   3 +
 Client/src/Components/ButtonSpinner/index.jsx |   8 +-
 .../ProfileSettings/PasswordPanel.jsx         |  58 +++-------
 .../ProfileSettings/ProfilePanel.jsx          |  65 ++---------
 .../TabPanels/ProfileSettings/TeamPanel.jsx   |  98 +++++-----------
 Client/src/Pages/Settings/index.css           | 109 +++++++++++-------
 Client/src/Pages/Settings/index.jsx           |   5 +-
 Client/src/index.css                          |  21 +++-
 8 files changed, 147 insertions(+), 220 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 72c438514..fe8912255 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -59,6 +59,9 @@ const Button = ({ type, level, label, disabled, img, onClick, sx }) => {
       onClick={onClick}
       sx={{
         textTransform: "none",
+        "&:focus": {
+          outline: "none",
+        },
         ...sx,
       }}
     >
diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx
index f584d1cac..7f89f1ab9 100644
--- a/Client/src/Components/ButtonSpinner/index.jsx
+++ b/Client/src/Components/ButtonSpinner/index.jsx
@@ -70,7 +70,13 @@ const ButtonSpinner = ({
       endIcon={position === "end" && img}
       onClick={onClick}
       loading={isLoading}
-      sx={{ textTransform: "none", ...sx }}
+      sx={{
+        textTransform: "none",
+        "&:focus": {
+          outline: "none",
+        },
+        ...sx,
+      }}
     >
       <span>{label}</span>
     </LoadingButton>
diff --git a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
index 8343a9819..3297c8e86 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx
@@ -40,29 +40,22 @@ const PasswordPanel = () => {
     }, 2000);
   };
   return (
-    <TabPanel
-      value="1"
-      sx={{ padding: "0", marginTop: theme.spacing(6.25), width: "100%" }}
-    >
+    <TabPanel value="1">
       <form className="edit-password-form" noValidate spellCheck="false">
         <div className="edit-password-form__wrapper">
           <AnnouncementsDualButtonWithIcon
-            icon={<InfoOutlinedIcon style={{ fill: "#344054" }} />}
+            icon={<InfoOutlinedIcon style={{ fill: theme.palette.secondary.main }} />}
             subject="SSO login"
             body="Since you logged in via SSO, you cannot reset or modify your password."
           />
         </div>
         <div className="edit-password-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Current Password
             </Typography>
           </Stack>
-          <FormControl sx={{ flex: 1, minWidth: theme.spacing(30) }}>
+          <FormControl sx={{ flex: 1 }}>
             <OutlinedInput
               id="edit-current-password"
               value="RandomPasswordLol"
@@ -80,11 +73,7 @@ const PasswordPanel = () => {
                       },
                     }}
                   >
-                    {!showPassword ? (
-                      <VisibilityOff sx={{ fill: "#98A2B3" }} />
-                    ) : (
-                      <Visibility sx={{ fill: "#98A2B3" }} />
-                    )}
+                    {!showPassword ? <VisibilityOff /> : <Visibility />}
                   </IconButton>
                 </InputAdornment>
               }
@@ -92,16 +81,12 @@ const PasswordPanel = () => {
           </FormControl>
         </div>
         <div className="edit-password-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Password
             </Typography>
           </Stack>
-          <FormControl sx={{ flex: 1, minWidth: theme.spacing(30) }}>
+          <FormControl sx={{ flex: 1 }}>
             <OutlinedInput
               id="edit-password"
               value="RandomPasswordLol"
@@ -119,11 +104,7 @@ const PasswordPanel = () => {
                       },
                     }}
                   >
-                    {!showPassword ? (
-                      <VisibilityOff sx={{ fill: "#98A2B3" }} />
-                    ) : (
-                      <Visibility sx={{ fill: "#98A2B3" }} />
-                    )}
+                    {!showPassword ? <VisibilityOff /> : <Visibility />}
                   </IconButton>
                 </InputAdornment>
               }
@@ -131,27 +112,19 @@ const PasswordPanel = () => {
           </FormControl>
         </div>
         <div className="edit-password-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Confirm new password
             </Typography>
           </Stack>
-          <Box sx={{ flex: 1, minWidth: theme.spacing(30) }}>
+          <Box sx={{ flex: 1 }}>
             <AnnouncementsDualButtonWithIcon
               icon={<WarningAmberOutlinedIcon style={{ fill: "#f79009" }} />}
               body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
             />
           </Box>
         </div>
-        <Divider
-          aria-hidden="true"
-          width="0"
-          sx={{ marginY: theme.spacing(6.25) }}
-        />
+        <Divider aria-hidden="true" width="0" />
         <Stack direction="row" justifyContent="flex-end">
           <Box width="fit-content">
             <ButtonSpinner
@@ -162,11 +135,6 @@ const PasswordPanel = () => {
               loadingText="Saving..."
               sx={{
                 paddingX: "40px",
-                height: "fit-content",
-                fontSize: "13px",
-                "&:focus": {
-                  outline: "none",
-                },
               }}
             />
           </Box>
@@ -177,7 +145,7 @@ const PasswordPanel = () => {
 };
 
 PasswordPanel.propTypes = {
-    // No props are being passed to this component, hence no specific PropTypes are defined.
-  };
+  // No props are being passed to this component, hence no specific PropTypes are defined.
+};
 
 export default PasswordPanel;
diff --git a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
index 0272c2b9a..d06b42761 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx
@@ -54,14 +54,10 @@ const ProfilePanel = () => {
   };
 
   return (
-    <TabPanel value="0" sx={{ padding: "0", marginTop: theme.spacing(6.25) }}>
+    <TabPanel value="0">
       <form className="edit-profile-form" noValidate spellCheck="false">
         <div className="edit-profile-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               First Name
             </Typography>
@@ -72,16 +68,11 @@ const ProfilePanel = () => {
             placeholder="Enter your first name"
             sx={{
               flex: 1,
-              minWidth: theme.spacing(30),
             }}
           />
         </div>
         <div className="edit-profile-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Last Name
             </Typography>
@@ -92,16 +83,11 @@ const ProfilePanel = () => {
             placeholder="Enter your last name"
             sx={{
               flex: 1,
-              minWidth: theme.spacing(30),
             }}
           />
         </div>
         <div className="edit-profile-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Email
             </Typography>
@@ -115,16 +101,11 @@ const ProfilePanel = () => {
             placeholder="Enter your email"
             sx={{
               flex: 1,
-              minWidth: theme.spacing(30),
             }}
           />
         </div>
         <div className="edit-profile-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+          <Stack>
             <Typography variant="h4" component="h1">
               Your Photo
             </Typography>
@@ -132,7 +113,7 @@ const ProfilePanel = () => {
               This photo will be displayed in your profile page.
             </Typography>
           </Stack>
-          <Stack direction="row" alignItems="center" sx={{ flex: 1 }}>
+          <Stack className="row-stack" direction="row" alignItems="center">
             {/* TODO - Use Avatar component instead of @mui */}
             <Avatar
               alt="Remy Sharp"
@@ -145,13 +126,6 @@ const ProfilePanel = () => {
               label="Delete"
               onClick={handleDeletePicture}
               isLoading={isLoading}
-              sx={{
-                height: "fit-content",
-                fontSize: "13px",
-                "&:focus": {
-                  outline: "none",
-                },
-              }}
             />
             {/* TODO - modal popup for update pfp? */}
             <Button
@@ -159,18 +133,14 @@ const ProfilePanel = () => {
               label="Update"
               onClick={handleUpdatePicture}
               sx={{
-                height: "fit-content",
                 color: theme.palette.primary.main,
-                fontSize: "13px",
-                "&:focus": {
-                  outline: "none",
-                },
               }}
             />
           </Stack>
         </div>
         <Divider
           aria-hidden="true"
+          className="short-divider"
           width="0"
           sx={{ marginY: theme.spacing(1) }}
         />
@@ -184,17 +154,12 @@ const ProfilePanel = () => {
               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) }} />
+      <Divider aria-hidden="true" />
       <form className="delete-profile-form" noValidate spellCheck="false">
         <div className="delete-profile-form__wrapper">
           <Stack direction="column" gap="15px">
@@ -210,12 +175,6 @@ const ProfilePanel = () => {
                 level="error"
                 label="Delete account"
                 onClick={() => setIsOpen(true)}
-                sx={{
-                  fontSize: "13px",
-                  "&:focus": {
-                    outline: "none",
-                  },
-                }}
               />
             </Box>
           </Stack>
@@ -239,7 +198,7 @@ const ProfilePanel = () => {
             width: 400,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
+            borderRadius: `${theme.shape.borderRadius}px`,
             boxShadow: 24,
             p: "30px",
             "&:focus": {
@@ -254,10 +213,6 @@ const ProfilePanel = () => {
             id="delete-account-confirmation"
             variant="h5"
             component="p"
-            sx={{
-              color: theme.palette.secondary.main,
-              fontSize: "13px",
-            }}
           >
             If you delete your account, you will no longer be able to sign in,
             and all of your data will be deleted. Deleting your account is
@@ -268,14 +223,12 @@ const ProfilePanel = () => {
               level="tertiary"
               label="Cancel"
               onClick={() => setIsOpen(false)}
-              sx={{ fontSize: "13px" }}
             />
             <ButtonSpinner
               level="error"
               label="Delete account"
               onClick={handleDeleteAccount}
               isLoading={isLoading}
-              sx={{ fontSize: "13px" }}
             />
           </Stack>
         </Stack>
diff --git a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
index 61148d969..f639ec155 100644
--- a/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/ProfileSettings/TeamPanel.jsx
@@ -184,27 +184,22 @@ const TeamPanel = () => {
     return count;
   };
   return (
-    <TabPanel
-      value="2"
-      sx={{ padding: "0", marginTop: theme.spacing(6.25) }}
-    >
+    <TabPanel value="2">
       <form className="edit-organization-form">
-        <div className="edit-organization-form__wrapper">
-          <Stack
-            direction="column"
-            gap="8px"
-            sx={{ flex: 1, marginRight: "10px" }}
-          >
+        <div
+          className="edit-organization-form__wrapper"
+        >
+          <Stack>
             <Typography variant="h4" component="h1">
               Organization name
             </Typography>
           </Stack>
           <Stack
             id="org-name-flex-container"
+            className="row-stack"
             direction="row"
             justifyContent="flex-end"
             gap="8px"
-            sx={{ flex: 1 }}
           >
             <ButtonSpinner
               level="tertiary"
@@ -212,17 +207,20 @@ const TeamPanel = () => {
               disabled
               onClick={() => toggleOrgModal(true)}
               isLoading={orgStates.isLoading}
-              sx={{ fontSize: "13px" }}
             />
             <Button
               level="primary"
               label="Rename"
-              sx={{ paddingX: "30px", fontSize: "13px" }}
+              sx={{ paddingX: "30px" }}
               onClick={() => toggleOrgModal(true)}
             />
           </Stack>
         </div>
-        <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6.25) }} />
+        <Divider
+          aria-hidden="true"
+          className="short-divider"
+          sx={{ marginY: theme.spacing(4) }}
+        />
       </form>
       <Modal
         aria-labelledby="modal-edit-org-name"
@@ -241,7 +239,7 @@ const TeamPanel = () => {
             width: 400,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
+            borderRadius: `${theme.shape.borderRadius}px`,
             boxShadow: 24,
             p: "30px",
             "&:focus": {
@@ -269,14 +267,13 @@ const TeamPanel = () => {
               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" }}
+              sx={{ paddingX: "30px" }}
             />
           </Stack>
         </Stack>
@@ -287,35 +284,26 @@ const TeamPanel = () => {
             Team members
           </Typography>
         </div>
-        <div
-          className="edit-team-form__wrapper compact"
-          style={{ alignItems: "center" }}
-        >
+        <div className="edit-team-form__wrapper compact">
           <Stack
             direction="row"
             gap="20px"
             alignItems="center"
-            sx={{ flex: 1, fontSize: "14px" }}
+            sx={{ fontSize: "14px" }}
           >
-            <Box onClick={() => handleFilter("")} sx={{ cursor: "pointer" }}>
+            <Box onClick={() => handleFilter("")}>
               All
               <span className="members-query">
                 <span>{handleMembersQuery("")}</span>
               </span>
             </Box>
-            <Box
-              onClick={() => handleFilter("admin")}
-              sx={{ cursor: "pointer" }}
-            >
+            <Box onClick={() => handleFilter("admin")}>
               Administrator
               <span className="members-query">
                 <span>{handleMembersQuery("admin")}</span>
               </span>
             </Box>
-            <Box
-              onClick={() => handleFilter("member")}
-              sx={{ cursor: "pointer" }}
-            >
+            <Box onClick={() => handleFilter("member")}>
               Member
               <span className="members-query">
                 <span>{handleMembersQuery("member")}</span>
@@ -325,7 +313,7 @@ const TeamPanel = () => {
           <Button
             level="primary"
             label="Invite a team member"
-            sx={{ paddingX: "30px", fontSize: "13px" }}
+            sx={{ paddingX: "30px" }}
             onClick={() => setToggleInviteModal(true)}
           />
         </div>
@@ -339,14 +327,15 @@ const TeamPanel = () => {
             }}
           >
             <Stack direction="row" gap="40px" p="20px">
-              <Stack direction="row" gap="10px" alignItems="center">
+              <Stack
+                direction="row"
+                gap="10px"
+                alignItems="center"
+                className="table-stack"
+              >
                 <Select
                   id="select-actions"
                   value="bulk"
-                  sx={{
-                    fontSize: "13px",
-                    color: theme.palette.secondary.main,
-                  }}
                   inputProps={{ id: "select-actions-input" }}
                 >
                   {actionsConfig.map((action) => (
@@ -365,9 +354,6 @@ const TeamPanel = () => {
                   onClick={handleSelectActionType}
                   isLoading={isLoading}
                   sx={{
-                    height: "fit-content",
-                    fontSize: "13px",
-                    fontWeight: 500,
                     bgcolor: "#fafafa",
                   }}
                 />
@@ -376,10 +362,6 @@ const TeamPanel = () => {
                 <Select
                   id="select-role"
                   value="role"
-                  sx={{
-                    fontSize: "13px",
-                    color: theme.palette.secondary.main,
-                  }}
                   inputProps={{ id: "select-role-input" }}
                 >
                   {roleConfig.map((role) => (
@@ -398,9 +380,6 @@ const TeamPanel = () => {
                   onClick={handleSelectRoleType}
                   isLoading={isLoading}
                   sx={{
-                    height: "fit-content",
-                    fontSize: "13px",
-                    fontWeight: 500,
                     bgcolor: "#fafafa",
                   }}
                 />
@@ -468,11 +447,7 @@ const TeamPanel = () => {
             </Table>
           </Container>
         </div>
-        <Divider
-          aria-hidden="true"
-          width="0"
-          sx={{ marginY: theme.spacing(6.25) }}
-        />
+        <Divider aria-hidden="true" width="0" />
         <Stack direction="row" justifyContent="flex-end">
           <Box width="fit-content">
             <ButtonSpinner
@@ -483,11 +458,6 @@ const TeamPanel = () => {
               loadingText="Saving..."
               sx={{
                 paddingX: "40px",
-                height: "fit-content",
-                fontSize: "13px",
-                "&:focus": {
-                  outline: "none",
-                },
               }}
             />
           </Box>
@@ -510,7 +480,7 @@ const TeamPanel = () => {
             width: 400,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
-            borderRadius: "4px",
+            borderRadius: `${theme.shape.borderRadius}px`,
             boxShadow: 24,
             p: "30px",
             "&:focus": {
@@ -521,15 +491,7 @@ const TeamPanel = () => {
           <Typography id="modal-invite-member" variant="h4" component="h1">
             Invite new team member
           </Typography>
-          <Typography
-            id="invite-member-to-team"
-            variant="h5"
-            component="p"
-            sx={{
-              color: theme.palette.secondary.main,
-              fontSize: "13px",
-            }}
-          >
+          <Typography id="invite-member-to-team" variant="h5" component="p">
             When you add a new team member, they will get access to all
             monitors.
           </Typography>
@@ -549,14 +511,12 @@ const TeamPanel = () => {
               level="tertiary"
               label="Cancel"
               onClick={() => setToggleInviteModal(false)}
-              sx={{ fontSize: "13px" }}
             />
             <ButtonSpinner
               level="primary"
               label="Send invite"
               onClick={handleInviteMember}
               isLoading={isLoading}
-              sx={{ fontSize: "13px" }}
             />
           </Stack>
         </Stack>
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 022e37bcb..57b448857 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -1,63 +1,79 @@
-.edit-profile-form,
-.edit-password-form,
-.delete-profile-form,
-.edit-team-form,
-.edit-organization-form {
+.settings h1.MuiTypography-root,
+.settings p.MuiTypography-root,
+.settings input,
+.settings button,
+.settings td,
+.settings .MuiSelect-select {
+  font-size: var(--env-var-font-size-medium);
+}
+.settings h1.MuiTypography-root,
+.settings p.MuiTypography-root,
+.settings input,
+.settings .MuiSelect-select {
+  color: var(--env-var-color-2);
+}
+.settings h1.MuiTypography-root {
+  font-weight: 600;
+}
+.settings .MuiStack-root:not(.table-stack) {
+  flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+}
+.settings .MuiTabPanel-root {
+  padding: 0;
+  margin-top: 50px;
+}
+.settings .MuiDivider-root:not(.short-divider) {
+  margin: 50px 0;
+}
+.settings .MuiDivider-root,
+.settings .MuiOutlinedInput-root fieldset,
+.announcement-tile {
+  border-color: var(--env-var-color-29);
+}
+[class$="-form"] {
   width: inherit;
 }
-.edit-profile-form__wrapper,
-.delete-profile-form__wrapper {
-  width: 90%;
-}
-.edit-profile-form__wrapper,
-.delete-profile-form__wrapper,
-.edit-password-form__wrapper,
-.edit-team-form__wrapper,
-.edit-organization-form__wrapper {
+[class$="__wrapper"],
+[class$="__wrapper compact"] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-start;
 }
-.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-organization-form h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-  font-weight: 600;
+.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) {
+  flex-direction: column;
+  gap: 8px;
+  margin-right: 10px;
 }
 .edit-profile-form__wrapper p.MuiTypography-root,
 .delete-profile-form__wrapper p.MuiTypography-root {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
   opacity: 0.6;
 }
 #modal-delete-account,
 #modal-edit-org-name,
 #modal-invite-member {
   font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-2);
-  font-weight: 600;
 }
 .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: 40px;
+  margin-top: var(--env-var-spacing-4);
 }
 .edit-team-form__wrapper.compact {
-  margin-top: 30px;
-  color: var(--env-var-color-16);
+  margin-top: var(--env-var-spacing-3);
+  justify-content: flex-start;
+  align-items: center;
 }
 .edit-profile-form__wrapper input,
 .edit-password-form__wrapper input,
 #edit-organization-name,
 #input-team-member {
-  font-size: var(--env-var-font-size-medium);
   padding: 10px;
 }
-
 .edit-password-form__wrapper > .announcement-tile {
   width: 100%;
 }
@@ -66,6 +82,10 @@
   .announcement-content-subject {
   margin-bottom: 2px;
 }
+#edit-password + div > button > svg,
+#edit-current-password + div > button > svg {
+  color: var(--env-var-color-29);
+}
 .edit-password-form__wrapper .announcement-tile {
   margin: 0;
 }
@@ -73,15 +93,16 @@
   margin-left: auto;
 }
 .MuiBox-root > .announcement-tile {
-  border-color: var(--env-var-color-14);
-  background-color: var(--lighter-env-var-color-14);
+  border-color: var(--env-var-color-27);
+  background-color: var(--lighter-env-var-color-27);
 }
-.MuiBox-root > .announcement-tile .announcement-content-body,
-.MuiBox-root > .announcement-tile .announcement-close svg {
-  color: var(--env-var-color-15);
-  fill: var(--env-var-color-15) !important;
+.MuiBox-root > .announcement-tile .announcement-content-body {
+  color: var(--env-var-color-28);
+}
+.MuiBox-root > .announcement-tile .announcement-close svg,
+.edit-password-form__wrapper > .announcement-tile .announcement-close svg {
+  display: none;
 }
-
 #org-name-flex-container .Mui-disabled {
   color: var(--env-var-color-2) !important;
 }
@@ -92,14 +113,13 @@
   vertical-align: text-top;
 }
 .edit-team-form__wrapper th {
-  padding: 14px 0;
+  padding: var(--env-var-spacing-1) 0;
 }
 .edit-team-form__wrapper th:first-of-type {
   padding-left: 20px;
 }
 .edit-team-form__wrapper td {
-  font-size: (--env-var-font-size-medium);
-  color: var(--env-var-color-16);
+  color: var(--env-var-color-25);
 }
 
 #select-actions,
@@ -120,7 +140,10 @@
   border-color: var(--env-var-color-2);
 }
 
-.members-query{
+.MuiStack-root:has(.MuiBox-root > .members-query) .MuiBox-root {
+  cursor: pointer;
+}
+.members-query {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -133,4 +156,4 @@
   min-width: 22px;
   min-height: 22px;
   border-radius: 50%;
-}
\ No newline at end of file
+}
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 118b3458b..3dd47859b 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -32,14 +32,15 @@ const Settings = () => {
       minWidth={theme.spacing(55)}
       width="100vw"
       maxWidth="calc(100vw - 800px)"
-      pt={theme.spacing(5)}
+      py={theme.spacing(5)}
       px={theme.spacing(10)}
+      className="settings"
     >
       <TabContext value={tab}>
         <Box
           sx={{
             borderBottom: 1,
-            borderColor: "divider",
+            borderColor: theme.palette.section.borderColor,
             "& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
           }}
         >
diff --git a/Client/src/index.css b/Client/src/index.css
index dc1b6188d..35279f07f 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -28,10 +28,23 @@
   --env-var-color-11: #5d6b98;
   --env-var-color-12: #182230;
   --env-var-color-13: #f9fafb;
-  --env-var-color-14: #fecf60;
-  --lighter-env-var-color-14: rgba(254, 207, 96, 0.1);
-  --env-var-color-15: #f79009;
-  --env-var-color-16: #667085;
+  --env-var-color-14: #98a2b3;
+  --env-var-color-15: #f2f4f7;
+  --env-var-color-16: #ebebeb;
+  --env-var-color-17: #079455;
+  --env-var-color-18: #ffc301;
+  --env-var-color-19: #f04438;
+  --env-var-color-20: #ecfdf3;
+  --env-var-color-21: hsla(0, 100%, 52%, 0.06);
+  --env-var-color-22: #4e5ba6;
+  --env-var-color-23: #17b26a;
+  --env-var-color-24: #d92d20;
+  --env-var-color-25: #667085;
+  --env-var-color-26: #ff1818;
+  --env-var-color-27: #fecf60;
+  --lighter-env-var-color-27: rgba(254, 207, 96, 0.1);
+  --env-var-color-28: #f79009;
+  --env-var-color-29: #D0D5DD;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;