Merge pull request #41 from dwm-2023-2/feature/melhorar-perfil

feat: new-profile
dwm-2023-2 · Dec 8, 2023 · 4ebc91e · 4ebc91e
2 parents 25e1f91 + f07dbef
commit 4ebc91e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 64 deletions.
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -7,8 +7,6 @@ import styles from "../styles/Profile.module.css";
 import { useNavigate } from "react-router-dom";
 import { Typography, TextField, Button } from "@mui/material";
 
-// ... (importações existentes)
-
 export const Profile = () => {
   const userInfoState = userInfoStore((state) => state.userInfo);
   const navigate = useNavigate();
@@ -36,7 +34,6 @@ export const Profile = () => {
   };
 
   const handleEdit = () => {
-    // continuar a lógica
     navigate(`/edit-profile/${storageUserId}`);
   };
 
@@ -47,9 +44,15 @@ export const Profile = () => {
         <div className={styles.section}>
           <div className={styles.forms_box}>
             <div style={{ width: "100%" }}></div>
-            <p>User Name: {storageUsername}</p>
-            <p>User ID: {storageUserId}</p>
-            <p>Email: {storageEmail}</p>
+            <Typography variant="h4" color="primary" gutterBottom>
+              User Name: {storageUsername}
+            </Typography>
+            <Typography variant="h6" color="textSecondary" gutterBottom>
+              User ID: {storageUserId}
+            </Typography>
+            <Typography variant="body1" color="textSecondary" gutterBottom>
+              Email: {storageEmail}
+            </Typography>
             <div className={styles.buttons}>
               <Button onClick={handleEdit} variant="contained" color="primary">
                 Editar perfil

diff --git a/src/styles/Profile.module.css b/src/styles/Profile.module.css
@@ -1,89 +1,90 @@
 .section {
+  /* background-color: yellow; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.forms_box {
+  padding: 40px;
+  margin: 25px;
+  margin-bottom: 8px;
+  margin-top: 150px;
+  background-color: #fffdd0;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  width: 30%;
+}
+
+/* Adicione a propriedade abaixo para criar espaço entre os botões */
+.forms_box .buttons Button {
+  margin-bottom: 8px;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.links a {
+  padding-top: 3px;
+  color: black;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.links a:hover {
+  color: gray;
+  text-decoration: none;
+}
+
+@media screen and (max-width: 768px) {
+  .section {
     /* background-color: yellow; */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
-  
+
   .forms_box {
-    padding: 40px;
-    margin: 5px;
-    margin-top: 150px;
+    padding: 10px;
+    margin: 10px;
+    margin-left: 10px;
     background-color: #fffdd0;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: 40px;
-    width: 30%;
+    width: 80%;
   }
-
-  /* .forms_box_forms {
-    padding: 20px;
-  } */
-
+
   .links {
     display: flex;
     flex-direction: row;
     width: 100%;
     justify-content: space-between;
   }
-  
+
   .links a {
     padding-top: 3px;
     color: black;
     font-weight: bold;
     text-decoration: none;
+    font-size: 8px;
   }
-  
+
   .links a:hover {
     color: gray;
     text-decoration: none;
   }
-
-  @media screen and (max-width: 768px) {
-    .section {
-      /* background-color: yellow; */
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .forms_box {
-      padding: 10px;
-      margin: 10px;
-      margin-left: 10px;
-      background-color: #fffdd0;
-      border-radius: 10px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      gap: 40px;
-      width: 80%;
-    }
-
-    .links {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      justify-content: space-between;
-    }
-
-    .links a {
-      padding-top: 3px;
-      color: black;
-      font-weight: bold;
-      text-decoration: none;
-      font-size: 8px;
-    }
-
-    .links a:hover {
-      color: gray;
-      text-decoration: none;
-    }
-  }
-
+}