First commit of the new app
This commit is contained in:
221
styles/screens/tabs/contactos.styles.ts
Normal file
221
styles/screens/tabs/contactos.styles.ts
Normal file
@@ -0,0 +1,221 @@
|
||||
import { colors } from '@/assets/styles/colors';
|
||||
import { fonts } from '@/assets/styles/fonts';
|
||||
import { StyleSheet, Platform } from 'react-native';
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background_1,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background_1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 18,
|
||||
paddingBottom: 120,
|
||||
},
|
||||
pageTitle: {
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 22,
|
||||
color: colors.azul,
|
||||
marginBottom: 18,
|
||||
},
|
||||
errorText: {
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 14,
|
||||
color: colors.vermelho,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
// ── Ações rápidas ──────────────────────────────────────────────────────────
|
||||
actionsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginBottom: 14,
|
||||
},
|
||||
actionBtn: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.azul,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 6,
|
||||
gap: 4,
|
||||
},
|
||||
actionIconWrap: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.background_1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 2,
|
||||
},
|
||||
actionIcon: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
tintColor: colors.azul,
|
||||
resizeMode: 'contain',
|
||||
},
|
||||
actionLabel: {
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 14,
|
||||
color: colors.branco,
|
||||
textAlign: 'center',
|
||||
},
|
||||
actionSub: {
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 12,
|
||||
color: colors.branco,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
// ── Card genérico ──────────────────────────────────────────────────────────
|
||||
card: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
marginBottom: 14,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.04,
|
||||
shadowRadius: 6,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
elevation: 2,
|
||||
},
|
||||
cardTitle: {
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 15,
|
||||
color: colors.azul,
|
||||
marginBottom: 12,
|
||||
},
|
||||
|
||||
// ── Localização ───────────────────────────────────────────────────────────
|
||||
mapImageWrap: {
|
||||
width: '100%',
|
||||
height: 160,
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 12,
|
||||
backgroundColor: colors.background_2,
|
||||
},
|
||||
mapImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
mapOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 6,
|
||||
backgroundColor: colors.background_2,
|
||||
},
|
||||
mapErrorText: {
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 12,
|
||||
color: '#9AA8BE',
|
||||
},
|
||||
addressRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
gap: 8,
|
||||
marginBottom: 14,
|
||||
},
|
||||
addressText: {
|
||||
flex: 1,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 13,
|
||||
color: colors.azul,
|
||||
lineHeight: 20,
|
||||
},
|
||||
copyIcon: {
|
||||
marginTop: 2,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
direcoeBtn: {
|
||||
backgroundColor: colors.azul,
|
||||
borderRadius: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 13,
|
||||
},
|
||||
direcoeBtnText: {
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 16,
|
||||
color: colors.branco,
|
||||
},
|
||||
saveButtonIcon: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
},
|
||||
|
||||
// ── Horário ───────────────────────────────────────────────────────────────
|
||||
horarioRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
},
|
||||
horarioRowBorder: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.background_1,
|
||||
},
|
||||
horarioDia: {
|
||||
fontFamily: fonts.semiBold,
|
||||
fontSize: 13,
|
||||
color: colors.azul,
|
||||
},
|
||||
horarioHoras: {
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 13,
|
||||
color: colors.azul,
|
||||
},
|
||||
horarioFechado: {
|
||||
color: colors.vermelho,
|
||||
fontFamily: fonts.medium,
|
||||
},
|
||||
|
||||
// ── Emergência ────────────────────────────────────────────────────────────
|
||||
emergencyBtn: {
|
||||
backgroundColor: '#25D366',
|
||||
borderRadius: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 13,
|
||||
paddingHorizontal: 16,
|
||||
gap: 10,
|
||||
},
|
||||
emergencyIcon: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
resizeMode: 'contain',
|
||||
tintColor: colors.branco,
|
||||
},
|
||||
emergencyText: {
|
||||
flex: 1,
|
||||
fontFamily: fonts.semiBold,
|
||||
fontSize: 14,
|
||||
color: colors.branco,
|
||||
},
|
||||
|
||||
// ── Redes Sociais ─────────────────────────────────────────────────────────
|
||||
socialsRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 10,
|
||||
},
|
||||
socialBtn: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: colors.background_1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
226
styles/screens/tabs/home.styles.ts
Normal file
226
styles/screens/tabs/home.styles.ts
Normal file
@@ -0,0 +1,226 @@
|
||||
import { colors } from '@/assets/styles/colors';
|
||||
import { fonts } from '@/assets/styles/fonts';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background_1,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background_1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 14,
|
||||
paddingBottom: 120,
|
||||
},
|
||||
logo: {
|
||||
width: 165,
|
||||
height: 36,
|
||||
alignSelf: 'center',
|
||||
marginBottom: 14,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginBottom: 18,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 6,
|
||||
minHeight: 82,
|
||||
},
|
||||
statCardPrimary: {
|
||||
backgroundColor: colors.azul,
|
||||
},
|
||||
statIconEmViagemWrap: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 19,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 5,
|
||||
},
|
||||
statIcon: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
marginBottom: 5,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 14,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
marginBottom: 2,
|
||||
textAlign: 'center',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
lineHeight: 32,
|
||||
},
|
||||
statLabelPrimary: {
|
||||
fontSize: 14,
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.regular,
|
||||
marginBottom: 2,
|
||||
textAlign: 'center',
|
||||
},
|
||||
statValuePrimary: {
|
||||
fontSize: 24,
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.medium,
|
||||
lineHeight: 32,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
marginBottom: 12,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
padding: 10,
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
marginBottom: 12,
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
cardImage: {
|
||||
width: 100,
|
||||
height: 120,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#E7ECF4',
|
||||
},
|
||||
cardContent: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
height: 100,
|
||||
},
|
||||
arrowWrap: {
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'flex-end',
|
||||
paddingLeft: 2,
|
||||
},
|
||||
cardTopRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
refText: {
|
||||
flex: 1,
|
||||
flexShrink: 1,
|
||||
fontSize: 12,
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
marginRight: 4,
|
||||
},
|
||||
destination: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
lineHeight: 35,
|
||||
marginTop: 2,
|
||||
marginBottom: 2,
|
||||
},
|
||||
meta: {
|
||||
fontSize: 11,
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
},
|
||||
dateRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
marginTop: 2,
|
||||
},
|
||||
dateIcon: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
tintColor: '#4A6592',
|
||||
},
|
||||
statusBadge: {
|
||||
flexShrink: 1,
|
||||
maxWidth: '60%',
|
||||
borderRadius: 12,
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 6,
|
||||
backgroundColor: '#E9EDF4',
|
||||
},
|
||||
statusBadgeContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 4,
|
||||
flexShrink: 1,
|
||||
},
|
||||
statusText: {
|
||||
flexShrink: 1,
|
||||
fontSize: 12,
|
||||
fontFamily: fonts.medium,
|
||||
textAlign: 'center',
|
||||
},
|
||||
statusSuccess: {
|
||||
backgroundColor: '#D8FFE3', // verde
|
||||
},
|
||||
statusDanger: {
|
||||
backgroundColor: '#FFE2E0', // vermelho
|
||||
},
|
||||
statusInfo: {
|
||||
backgroundColor: '#F3DBFF', // roxo
|
||||
},
|
||||
statusPendente: {
|
||||
backgroundColor: '#FFF6D9',
|
||||
},
|
||||
statusTextSuccess: {
|
||||
color: '#13AE45',
|
||||
},
|
||||
statusTextDanger: {
|
||||
color: '#E6463B',
|
||||
},
|
||||
statusTextInfo: {
|
||||
color: '#B138E6',
|
||||
},
|
||||
statusTextPendente: {
|
||||
color: '#C99700',
|
||||
},
|
||||
offlineBanner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#4A6592',
|
||||
borderRadius: 10,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
offlineBannerText: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 12,
|
||||
flex: 1,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 14,
|
||||
color: colors.vermelho,
|
||||
fontFamily: fonts.medium,
|
||||
marginBottom: 10,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 14,
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.medium,
|
||||
},
|
||||
});
|
||||
9
styles/screens/tabs/index.styles.ts
Normal file
9
styles/screens/tabs/index.styles.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
231
styles/screens/tabs/perfil.styles.ts
Normal file
231
styles/screens/tabs/perfil.styles.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import { colors } from '@/assets/styles/colors';
|
||||
import { fonts } from '@/assets/styles/fonts';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background_1,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 200,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 18,
|
||||
},
|
||||
backButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#EEF0F5',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
logo: {
|
||||
width: 160,
|
||||
height: 34,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
marginBottom: 12,
|
||||
},
|
||||
userCard: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 16,
|
||||
marginBottom: 14,
|
||||
},
|
||||
userName: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
},
|
||||
userEmail: {
|
||||
fontSize: 12,
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
},
|
||||
menuCard: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
menuRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 16,
|
||||
},
|
||||
menuLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
menuText: {
|
||||
fontSize: 18,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#EEF0F5',
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
editBodyWrap: {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
editBodyMeasure: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
},
|
||||
accordionContent: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 16,
|
||||
gap: 10,
|
||||
},
|
||||
rowInputs: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
inputBlock: {
|
||||
flex: 1,
|
||||
},
|
||||
inputBlockFull: {},
|
||||
inputLabel: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 16,
|
||||
marginBottom: 6,
|
||||
},
|
||||
required: {
|
||||
color: colors.vermelho,
|
||||
},
|
||||
input: {
|
||||
height: 48,
|
||||
borderWidth: 1,
|
||||
borderColor: '#C7CEDB',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
color: '#1F2937',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 16,
|
||||
backgroundColor: '#FAFBFD',
|
||||
},
|
||||
saveButton: {
|
||||
marginTop: 8,
|
||||
height: 48,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.azul,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: 6,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 18,
|
||||
},
|
||||
saveButtonIcon: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
},
|
||||
deleteProfileButtonIcon: {
|
||||
width: 22,
|
||||
height: 18,
|
||||
},
|
||||
arrowUpButtonIcon: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
color: colors.azul
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.45)',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
modalCard: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 18,
|
||||
paddingTop: 22,
|
||||
paddingBottom: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
modalIconWrap: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
backgroundColor: colors.vermelho,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 24,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
},
|
||||
modalSubtitle: {
|
||||
fontSize: 16,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
lineHeight: 22,
|
||||
},
|
||||
modalButtons: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
modalButton: {
|
||||
flex: 1,
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: 6,
|
||||
},
|
||||
modalPrimaryButton: {
|
||||
backgroundColor: colors.azul,
|
||||
},
|
||||
modalSecondaryButton: {
|
||||
backgroundColor: colors.branco,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.azul,
|
||||
},
|
||||
modalPrimaryText: {
|
||||
color: colors.branco,
|
||||
fontSize: 18,
|
||||
fontFamily: fonts.medium,
|
||||
},
|
||||
modalSecondaryText: {
|
||||
color: colors.azul,
|
||||
fontSize: 18,
|
||||
fontFamily: fonts.medium,
|
||||
},
|
||||
modalButtonIcon: {
|
||||
transform: [{ rotate: '45deg' }],
|
||||
},
|
||||
perfilIcon: {
|
||||
width: 16,
|
||||
height: 19,
|
||||
},
|
||||
});
|
||||
9
styles/screens/tabs/reservas.styles.ts
Normal file
9
styles/screens/tabs/reservas.styles.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
export default StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user