From 5133d28fd764e0d56e9ac95bb79d0c8710187cc9 Mon Sep 17 00:00:00 2001
From: Matheus Albino Brunhara <matheusalb3213@gmail.com>
Date: Sat, 28 May 2022 12:50:07 -0500
Subject: [PATCH] Completando interface da tela de perfil

---
 src/pages/Perfil.css | 11 ++++++--
 src/pages/Perfil.tsx | 64 +++++++++++++++++++++++---------------------
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/pages/Perfil.css b/src/pages/Perfil.css
index f1080b7..1efc84d 100644
--- a/src/pages/Perfil.css
+++ b/src/pages/Perfil.css
@@ -1,7 +1,14 @@
 #avatar {
     border-radius: 50%;
-    width: 64px;
-    height: 64px;
+    width: 100px;
+    height: 100px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#profile-status {
+    text-align: center;
 }
 
 IonIcon {
diff --git a/src/pages/Perfil.tsx b/src/pages/Perfil.tsx
index 484f67e..64d64ec 100644
--- a/src/pages/Perfil.tsx
+++ b/src/pages/Perfil.tsx
@@ -5,8 +5,6 @@ import {
   IonCardTitle,
   IonChip,
   IonContent,
-  IonFab,
-  IonFabButton,
   IonHeader,
   IonIcon,
   IonItem,
@@ -20,8 +18,7 @@ import {
 } from "@ionic/react";
 import { useHistory } from "react-router-dom";
 import React, { useState, useEffect, useReducer } from "react";
-import { IonRow, IonCol } from "@ionic/react";
-import { createOutline } from "ionicons/icons";
+import { cardOutline, carOutline, createOutline, exitOutline, shieldCheckmarkOutline, starOutline } from "ionicons/icons";
 
 import './Perfil.css'
 import LocalStorage from "../LocalStorage";
@@ -125,17 +122,19 @@ const Perfil: React.FC = () => {
         
         <IonCard>
           <IonCardContent>
-            <IonRow>
-              <IonCol></IonCol>
-              <IonCol>
-                <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/>
-              </IonCol>
-              <IonCol></IonCol>
-            </IonRow>
-
+              {/* <img src="https://static.generated.photos/vue-static/home/feed/adult.png" alt="avatar" className='avatar' id='avatar'/> */}
+              <img src="https://lastfm.freetls.fastly.net/i/u/avatar170s/faa68f71f3b2a48ca89228c2c2aa72d3" alt="avatar" className='avatar' id='avatar'/>
             <IonCardHeader>
               <IonCardTitle class="ion-text-center">{inputValues.name} {inputValues.lastname}</IonCardTitle>
             </IonCardHeader>
+
+            <div id='profile-status'>
+              <IonLabel>Status: </IonLabel>
+              <IonChip>
+                {/* TODO, deve vir do backend */}
+                <IonLabel color="primary">Passageiro</IonLabel>
+              </IonChip>
+            </div>
           </IonCardContent>
         </IonCard>
 
@@ -148,38 +147,41 @@ const Perfil: React.FC = () => {
           </IonCardContent>
         </IonCard>
 
-        <IonCard>
+        {/* <IonCard>
           <IonCardContent>
-            <IonLabel>Status do perfil</IonLabel>
-            <IonChip>
-              <IonLabel color="primary">Passageiro</IonLabel>
-            </IonChip>
+            
           </IonCardContent>
-        </IonCard>
+        </IonCard> */}
 
         <IonList>
-        <IonListHeader>Dashboard</IonListHeader>
-          <IonItem>
-            <IonIcon></IonIcon>
-            <IonLabel>Confirmar perfil</IonLabel>
+        <IonListHeader>Configurações</IonListHeader>
+          {/* <IonItem button onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}> */}
+          <IonItem button>
+            <IonIcon icon={createOutline} slot="start" />
+            <IonLabel>Editar perfil</IonLabel>
           </IonItem>
-          <IonItem>
+          <IonItem button>
+            <IonIcon icon={shieldCheckmarkOutline} slot="start" />
+            <IonLabel>Completar perfil</IonLabel>
+          </IonItem>
+          <IonItem button>
+            <IonIcon icon={carOutline} slot="start" />
             <IonLabel>Cadastrar Van</IonLabel>
           </IonItem>
-          <IonItem>
+          <IonItem button>
+            <IonIcon icon={cardOutline} slot="start" />
             <IonLabel>Pagamentos</IonLabel>
           </IonItem>
-          <IonItem>
+          <IonItem button>
+            <IonIcon icon={starOutline} slot="start" />
             <IonLabel>Avaliações</IonLabel>
           </IonItem>
+          <IonItem button>
+            <IonIcon icon={exitOutline} slot="start" />
+            <IonLabel>Sair da conta</IonLabel>
+          </IonItem>
         </IonList>
 
-        <IonFab vertical="bottom" horizontal="end" slot="fixed">
-          <IonFabButton onClick={() => history.push({ pathname: '/perfil/editar', state: { userData: inputValues } })}>
-            <IonIcon icon={createOutline} />
-          </IonFabButton>
-        </IonFab>
-
         <IonToast
           color='danger'      
           isOpen={showToast}