cloud/tcc-vamos-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Completando interface da tela de perfil

Browse Source
This commit is contained in:
Matheus Albino Brunhara
2022-05-28 12:50:07 -05:00
parent 2c3ee6aeae
commit 5133d28fd7
2 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/Perfil.css
View File

@@ -1,7 +1,14 @@
#avatar { #avatar {
border-radius: 50%; border-radius: 50%;
width: 64px; width: 100px;
height: 64px; height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
#profile-status {
text-align: center;
} }
IonIcon { IonIcon {

64
src/pages/Perfil.tsx
View File

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