Fix CSS and ProfileUpdate page

src/Components/SideBar/index.jsx

@@ -50,6 +50,7 @@ export default function SideBar({ fullHeight = true }) {
       text="PÁGINA INICIAL"
       onClick={() => {
         navigate("/home");
+        setIsSideBarOpen(false);
       }}
     />,
     <SideButton
@@ -58,6 +59,7 @@ export default function SideBar({ fullHeight = true }) {
       text="CADASTROS"
       onClick={() => {
         navigate("/usuarios/hub");
+        setIsSideBarOpen(false);
       }}
     />,
     <SideButton
@@ -66,6 +68,7 @@ export default function SideBar({ fullHeight = true }) {
       text="FINANCEIRO"
       onClick={() => {
         navigate("/finance/hub");
+        setIsSideBarOpen(false);
       }}
     />,
     <SideButton
@@ -74,6 +77,7 @@ export default function SideBar({ fullHeight = true }) {
       text="BENEFÍCIOS"
       onClick={() => {
         navigate("/beneficios");
+        setIsSideBarOpen(false);
       }}
     />,
     <SideButton
@@ -82,13 +86,15 @@ export default function SideBar({ fullHeight = true }) {
       text="LOGIN"
       onClick={() => {
         navigate("/");
+        setIsSideBarOpen(false);
       }}
     />,
     <SideButton
       key="filiacão"
       text="FILIAÇÃO"
       onClick={() => {
         navigate("/filiacao");
+        setIsSideBarOpen(false);
       }}
     />,
   ];
@@ -139,6 +145,7 @@ export default function SideBar({ fullHeight = true }) {
             }}
             onClick={() => {
               handleItemClick(user);
+              setIsSideBarOpen(false);
             }}
           />
           <h2

src/Pages/Protected/FinancialMovements/ContributionHistoric/index.css

@@ -1,4 +1,13 @@
 @media screen and (max-width: 1080px) {
+  .double-box h1 {
+    font-size: 20px;
+    font-weight: 800;
+    margin-left: 100px;
+    margin-right: 50px;
+    margin-top: 1rem;
+    margin-bottom: -1rem;
+    color: #332117 !important;
+  }
   .area-gastos h3 {
     font-size: 14px;
     color: #332117 !important;
@@ -17,6 +26,12 @@
     grid-template-columns: 1fr 1fr;
     margin: 0;
   }
+  .search-box-hc {
+    display: grid;
+    width: 100%;
+    margin-top: 1rem;
+    position: relative;
+  }
 }
 
 @media screen and (min-width: 1080px) {
@@ -48,4 +63,10 @@
     grid-template-columns: 1fr 1fr;
     margin: 0;
   }
+  .search-box-hc {
+    display: grid;
+    width: 100%;
+    margin-top: 1rem;
+    position: relative;
+  }
 }

src/Pages/Protected/FinancialMovements/ContributionHistoric/index.jsx

@@ -72,7 +72,7 @@ export default function UserHistoric() {
           <h1>Histórico de Contribuições</h1>
         </div>
 
-        <div className="search-box">
+        <div className="search-box-hc">
           <FieldText
             label="Pesquisar movimentação"
             value={search}

src/Pages/Protected/ProfileUpdate/index.css

@@ -36,11 +36,8 @@
   }
 
   .campos-container {
-    /* margin: 3.5rem; */
     line-height: 2;
-    /* height: 350px; */
     width: 100%;
-    /* margin-top: 4rem; */
     display: inherit;
     justify-content: center;
     flex-direction: column;
@@ -49,7 +46,6 @@
   .section-campo {
     display: grid;
     margin-left: 0.5rem;
-    /* margin-right: 9rem; */
     font-size: 16px;
     width: 100%;
   }
@@ -74,18 +70,17 @@
     font-weight: thin;
   }
 
-  .double-box {
+  .double-box-pu {
     display: grid;
     margin-left: 0.5rem;
-    /* margin-right: 9rem; */
     width: 100%;
 
     grid-template-columns: 1fr;
     color: #eae3d7;
 
     font-size: 16px;
   }
-  .double-box input {
+  .double-box-pu input {
     background-color: #eae3d7;
     color: #000000;
     border: 1px solid #eae3d7;
@@ -96,16 +91,6 @@
     font-weight: thin;
   }
 
-  /* .section-doublebtn {
-    align-items: center;
-    flex-direction: column;
-    flex-direction: column;
-    align-items: stretch;
-    margin-left: -3.2rem;
-    margin-right: 50rem;
-    margin-top: 1rem;
-  } */
-
   .section-doublebtn {
     display: flex;
     flex-direction: column;
@@ -123,30 +108,6 @@
     margin-top: 5rem;
   }
 
-  .profile-icon {
-    margin-top: -10rem;
-    margin-left: -9rem;
-    font-size: 37px;
-  }
-
-  .btn-logout {
-    background-color: transparent;
-    height: 40px;
-    font-family: "Noto Sans";
-    font-size: 14px;
-    font-weight: 600;
-    padding: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    color: #341f14;
-  }
-  .logout-icon {
-    font-size: 21px;
-    margin-left: 10px;
-  }
-
   .isEmailValid {
     font-size: 12px;
     font-weight: 400;
@@ -212,30 +173,6 @@
   .custom-dialog-button:hover {
     background-color: rgba(0, 0, 0, 0.1) !important;
   }
-
-  .hidden-menu {
-    display: block;
-    padding-left: 10px;
-    z-index: 100;
-    cursor: pointer;
-
-    svg {
-      font-size: 40px;
-      color: #3d160d;
-    }
-  }
-
-  .side-menu {
-    width: 100%;
-    position: fixed;
-    z-index: 99;
-    left: -100%;
-    transition: left 0.3s;
-  }
-
-  .side-bar.open {
-    left: 0;
-  }
 }
 
 @media screen and (min-width: 1080px) {
@@ -305,14 +242,14 @@
     font-weight: thin;
   }
 
-  .double-box {
+  .double-box-pu {
     display: grid;
     grid-template-columns: 2.3fr 2.3fr;
     color: #eae3d7;
     margin-left: 0.8rem;
     font-size: 16px;
   }
-  .double-box input {
+  .double-box-pu input {
     background-color: #eae3d7;
     color: #000000;
     border: 1px solid #eae3d7;

src/Pages/Protected/ProfileUpdate/index.jsx

@@ -4,15 +4,13 @@ import FieldText from "../../../Components/FieldText";
 import FieldNumber from "../../../Components/FieldNumber";
 import PrimaryButton from "../../../Components/PrimaryButton";
 import SecondaryButton from "../../../Components/SecondaryButton";
-import { useAuth } from "../../../Context/auth";
 import Modal from "../../../Components/Modal";
 import { Button } from "@mui/material";
 import "./index.css";
 import { getUserById, patchUserById } from "../../../Services/userService";
 
-const ProfileUpdate = () => {
+export default function ProfileUpdate() {
   const navigate = useNavigate();
-  const { user } = useAuth();
   const { state } = useLocation();
   const userId = state?.userId;
   const storagedUserString = localStorage.getItem("@App:user");
@@ -38,7 +36,7 @@ const ProfileUpdate = () => {
     };
 
     getUser();
-  });
+  }, [storagedUser._id]);
 
   useEffect(() => {
     setIsEmailValid(isValidEmail(email));
@@ -105,67 +103,63 @@ const ProfileUpdate = () => {
   };
 
   return (
-    user && (
-      <section className="container">
-        <div className="campos-container">
-          <h3 className="profile-view">Visualização de usuário</h3>
-          <h4 className="personal-data">Dados pessoais</h4>
-          <div className="section-campo">
-            <FieldText
-              label="Nome*"
-              value={nome}
-              onChange={(e) => setNome(e.target.value)}
-              disabled={true}
-            />
-          </div>
-          <div className="double-box">
-            <FieldNumber
-              label="Celular"
-              value={celular}
-              onChange={(e) => setCelular(e.target.value)}
-              format="(##) #####-####"
-            />
-            {!isValidNumber && (
-              <label className="isValidNumber">*Insira um celular válido</label>
-            )}
-            <FieldText
-              label="Login*"
-              value={login}
-              onChange={(e) => setLogin(e.target.value)}
-              disabled
-            />
-          </div>
-          <div className="section-campo">
-            <FieldText
-              label="E-mail"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-            {!isEmailValid && (
-              <label className="isEmailValid">*Insira um email válido</label>
-            )}
-          </div>
-          <div>
-            <Button
-              className="btn-contribution"
-              onClick={handleNavigateToContributions}
-            >
-              Histórico de Contribuições
-            </Button>
-          </div>
-          <div className="section-doublebtn">
-            <SecondaryButton text="Cancelar" onClick={handleCancel} />
-            <PrimaryButton text="Salvar" onClick={handleSubmit} />
-          </div>
+    <section className="container">
+      <div className="campos-container">
+        <h3 className="profile-view">Visualização de usuário</h3>
+        <h4 className="personal-data">Dados pessoais</h4>
+        <div className="section-campo">
+          <FieldText
+            label="Nome*"
+            value={nome}
+            onChange={(e) => setNome(e.target.value)}
+            disabled={true}
+          />
         </div>
-        <Modal show={openDialog} alertTitle="Alterações Salvas">
-          <Button onClick={handleCloseDialog} className="custom-dialog-button">
-            OK
+        <div className="double-box-pu">
+          <FieldNumber
+            label="Celular"
+            value={celular}
+            onChange={(e) => setCelular(e.target.value)}
+            format="(##) #####-####"
+          />
+          {!isValidNumber && (
+            <label className="isValidNumber">*Insira um celular válido</label>
+          )}
+          <FieldText
+            label="Login*"
+            value={login}
+            onChange={(e) => setLogin(e.target.value)}
+            disabled
+          />
+        </div>
+        <div className="section-campo">
+          <FieldText
+            label="E-mail"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          {!isEmailValid && (
+            <label className="isEmailValid">*Insira um email válido</label>
+          )}
+        </div>
+        <div>
+          <Button
+            className="btn-contribution"
+            onClick={handleNavigateToContributions}
+          >
+            Histórico de Contribuições
           </Button>
-        </Modal>
-      </section>
-    )
+        </div>
+        <div className="section-doublebtn">
+          <SecondaryButton text="Cancelar" onClick={handleCancel} />
+          <PrimaryButton text="Salvar" onClick={handleSubmit} />
+        </div>
+      </div>
+      <Modal show={openDialog} alertTitle="Alterações Salvas">
+        <Button onClick={handleCloseDialog} className="custom-dialog-button">
+          OK
+        </Button>
+      </Modal>
+    </section>
   );
-};
-
-export default ProfileUpdate;
+}