First commit of the new app
This commit is contained in:
741
styles/screens/reserva/detail.styles.ts
Normal file
741
styles/screens/reserva/detail.styles.ts
Normal file
@@ -0,0 +1,741 @@
|
||||
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,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 54,
|
||||
paddingBottom: 10,
|
||||
gap: 10,
|
||||
},
|
||||
backButton: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
logo: {
|
||||
width: 150,
|
||||
height: 34,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 120,
|
||||
gap: 10,
|
||||
},
|
||||
errorText: {
|
||||
color: colors.vermelho,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 13,
|
||||
marginBottom: 8,
|
||||
},
|
||||
summaryCard: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
padding: 12,
|
||||
},
|
||||
rowBetween: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
marginBottom: 6,
|
||||
},
|
||||
idTop: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 16,
|
||||
marginBottom: 2,
|
||||
},
|
||||
idBlock: {
|
||||
marginTop: 6,
|
||||
flex: 1,
|
||||
flexShrink: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
statusBadge: {
|
||||
flexShrink: 1,
|
||||
maxWidth: '40%',
|
||||
borderRadius: 12,
|
||||
paddingVertical: 4,
|
||||
paddingHorizontal: 6,
|
||||
backgroundColor: '#E9EDF4',
|
||||
},
|
||||
statusBadgeContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 4,
|
||||
flexShrink: 1,
|
||||
},
|
||||
statusBadgeText: {
|
||||
flexShrink: 1,
|
||||
fontSize: 11,
|
||||
fontFamily: fonts.medium,
|
||||
textAlign: 'center',
|
||||
color: '#4A6592',
|
||||
},
|
||||
statusSuccess: {
|
||||
backgroundColor: '#D8FFE3',
|
||||
},
|
||||
statusDanger: {
|
||||
backgroundColor: '#FFE2E0',
|
||||
},
|
||||
statusInfo: {
|
||||
backgroundColor: '#F3DBFF',
|
||||
},
|
||||
statusPendente: {
|
||||
backgroundColor: '#FFF6D9',
|
||||
},
|
||||
statusTextSuccess: {
|
||||
color: '#13AE45',
|
||||
},
|
||||
statusTextDanger: {
|
||||
color: '#E6463B',
|
||||
},
|
||||
statusTextInfo: {
|
||||
color: '#B138E6',
|
||||
},
|
||||
statusTextPendente: {
|
||||
color: '#C99700',
|
||||
},
|
||||
summaryImage: {
|
||||
width: '100%',
|
||||
height: 180,
|
||||
borderRadius: 12,
|
||||
marginBottom: 8,
|
||||
backgroundColor: '#E7ECF4',
|
||||
},
|
||||
destination: {
|
||||
marginTop: 16,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 24,
|
||||
marginBottom: 2,
|
||||
},
|
||||
dateText: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
refsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 8,
|
||||
},
|
||||
smallLabel: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 11,
|
||||
},
|
||||
smallValue: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 14,
|
||||
},
|
||||
priceRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#F3F6FC',
|
||||
borderRadius: 10,
|
||||
padding: 8,
|
||||
},
|
||||
priceLeft: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 13,
|
||||
},
|
||||
priceRight: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 13,
|
||||
},
|
||||
sectionHeader: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
sectionTitle: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
},
|
||||
sectionBody: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 14,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
marginTop: -4,
|
||||
marginBottom: 2,
|
||||
gap: 8,
|
||||
},
|
||||
rowLine: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingBottom: 8,
|
||||
},
|
||||
rowLineNoBorder: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
rowLabel: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 16,
|
||||
},
|
||||
rowTitle: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 13,
|
||||
flex: 1,
|
||||
},
|
||||
rowValue: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.light,
|
||||
fontSize: 15,
|
||||
textAlign: 'right',
|
||||
flex: 1,
|
||||
},
|
||||
priceBox: {
|
||||
marginTop: 6,
|
||||
backgroundColor: colors.azul,
|
||||
borderRadius: 12,
|
||||
padding: 10,
|
||||
},
|
||||
priceMain: {
|
||||
color: colors.branco,
|
||||
fontSize: 26,
|
||||
fontFamily: fonts.bold,
|
||||
marginBottom: 2,
|
||||
},
|
||||
priceSub: {
|
||||
color: colors.branco,
|
||||
fontSize: 12,
|
||||
fontFamily: fonts.medium,
|
||||
},
|
||||
empty: {
|
||||
marginTop: 10,
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 12,
|
||||
},
|
||||
extrasList: {
|
||||
gap: 10,
|
||||
},
|
||||
extrasItem: {
|
||||
backgroundColor: colors.background_2,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
},
|
||||
extrasItemText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 13,
|
||||
},
|
||||
|
||||
divider: {
|
||||
height: 1,
|
||||
backgroundColor: '#EDF1F7',
|
||||
marginVertical: 10,
|
||||
},
|
||||
blockBorderTop: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#EDF1F7',
|
||||
paddingTop: 10,
|
||||
marginTop: 4,
|
||||
},
|
||||
|
||||
refsBlock: {
|
||||
flexDirection: 'row',
|
||||
gap: 16,
|
||||
marginTop: 6,
|
||||
},
|
||||
refsCol: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
hotelRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
hotelImage: {
|
||||
width: 104,
|
||||
height: 126,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#E7ECF4',
|
||||
},
|
||||
hotelInfo: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
hotelStarsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 2,
|
||||
marginBottom: 2,
|
||||
},
|
||||
hotelName: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 16,
|
||||
marginBottom: 4,
|
||||
},
|
||||
hotelMetaLine: {
|
||||
fontSize: 13,
|
||||
lineHeight: 17,
|
||||
marginBottom:4,
|
||||
},
|
||||
hotelMetaLabel: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.semiBold,
|
||||
},
|
||||
hotelMetaValue: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
},
|
||||
|
||||
vooList: {
|
||||
gap: 10,
|
||||
},
|
||||
vooCard: {
|
||||
backgroundColor: colors.background_2,
|
||||
borderRadius: 14,
|
||||
padding: 12,
|
||||
},
|
||||
vooRouteRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
},
|
||||
vooSideCol: {
|
||||
flex: 1,
|
||||
},
|
||||
vooSideColRight: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
vooCode: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 28,
|
||||
lineHeight: 32,
|
||||
},
|
||||
vooCodeRight: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
vooMidCol: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 8,
|
||||
gap: 6,
|
||||
},
|
||||
vooDuration: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 11,
|
||||
},
|
||||
vooPathWrap: {
|
||||
width: 140,
|
||||
height: 16,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
vooPathLine: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 1,
|
||||
backgroundColor: colors.cinza,
|
||||
},
|
||||
vooPathIcon: {
|
||||
backgroundColor: '#EDEDED',
|
||||
paddingHorizontal: 5,
|
||||
},
|
||||
vooTime: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.light,
|
||||
fontSize: 15,
|
||||
marginTop: 2,
|
||||
},
|
||||
vooTimeRight: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
vooAirport: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.light,
|
||||
fontSize: 11,
|
||||
marginTop: 2,
|
||||
flexShrink: 1,
|
||||
},
|
||||
vooAirportRight: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
vooInfoBox: {
|
||||
flexDirection: 'row',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.cinza,
|
||||
borderRadius: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
paddingHorizontal: 20,
|
||||
marginTop: 12,
|
||||
marginBottom: 12,
|
||||
gap: 8,
|
||||
},
|
||||
vooInfoColLeft: {
|
||||
width: '50%',
|
||||
flex: 1,
|
||||
gap: 6,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
vooInfoColRight: {
|
||||
width: '50%',
|
||||
flex: 1,
|
||||
gap: 6,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
vooInfoDate: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 14,
|
||||
},
|
||||
vooLegRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
},
|
||||
vooLegLabel: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
vooMetaLine: {
|
||||
fontSize: 14,
|
||||
lineHeight: 17,
|
||||
},
|
||||
vooMetaLabel: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.semiBold,
|
||||
},
|
||||
vooMetaValue: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
},
|
||||
vooEscalasBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: '#E7ECF4',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
marginBottom: 10,
|
||||
},
|
||||
vooEscalasBadgeText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 14,
|
||||
},
|
||||
vooEscalaDivider: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginVertical: 10,
|
||||
},
|
||||
vooEscalaLine: {
|
||||
flex: 1,
|
||||
height: 1,
|
||||
backgroundColor: colors.cinza,
|
||||
},
|
||||
vooEscalaChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
backgroundColor: '#F0F3FA',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
vooEscalaChipText: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 11,
|
||||
},
|
||||
mapaBtn: {
|
||||
backgroundColor: colors.azul,
|
||||
borderRadius: 10,
|
||||
paddingVertical: 11,
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
mapaBtnText: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 12,
|
||||
},
|
||||
mapaBtnIcon: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
passageiroHeaderRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
},
|
||||
passageiroContainer: {
|
||||
marginVertical: 10,
|
||||
},
|
||||
passageiroSubtitle: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 14,
|
||||
},
|
||||
passageiroName: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 14,
|
||||
},
|
||||
passageiroBodyWrap: {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
passageiroBodyMeasure: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
},
|
||||
passageiroBody: {
|
||||
marginTop: 10,
|
||||
gap: 10,
|
||||
},
|
||||
twoCol: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
},
|
||||
twoColItem: {
|
||||
flex: 1,
|
||||
},
|
||||
fieldLabel: {
|
||||
color: '#4A6592',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 14,
|
||||
marginBottom: 4,
|
||||
},
|
||||
fieldBox: {
|
||||
backgroundColor: colors.background_2,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.cinza,
|
||||
borderRadius: 10,
|
||||
paddingVertical: 9,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
fieldBoxText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 13,
|
||||
},
|
||||
refsField: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
extrasText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 13,
|
||||
lineHeight: 19,
|
||||
},
|
||||
|
||||
tableHeader: {
|
||||
flexDirection: 'row',
|
||||
paddingBottom: 6,
|
||||
},
|
||||
tableRow: {
|
||||
flexDirection: 'row',
|
||||
paddingVertical: 8,
|
||||
},
|
||||
tableRowLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
tableCellLeft: {
|
||||
flex: 1.2,
|
||||
},
|
||||
tableCellMid: {
|
||||
flex: 1,
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
tableCellRight: {
|
||||
flex: 1.2,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
tableHeaderText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 14,
|
||||
},
|
||||
tableValueText: {
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 13,
|
||||
},
|
||||
valorSection: {
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 16,
|
||||
padding: 12,
|
||||
gap: 10,
|
||||
},
|
||||
valorInnerCard: {
|
||||
backgroundColor: colors.azul,
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
gap: 6,
|
||||
},
|
||||
valorAmount: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 36,
|
||||
},
|
||||
valorAmountLabel: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 16,
|
||||
opacity: 0.9,
|
||||
marginBottom: 8,
|
||||
marginTop: -10,
|
||||
},
|
||||
valorPagoLine: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 14,
|
||||
marginTop: 8,
|
||||
},
|
||||
valorProgressTrack: {
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
marginBottom: 14,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
valorProgressFill: {
|
||||
height: '100%',
|
||||
backgroundColor: colors.branco,
|
||||
borderRadius: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
paddingRight: 4,
|
||||
},
|
||||
valorProgressDot: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 8,
|
||||
backgroundColor: colors.vermelho,
|
||||
},
|
||||
valorFaltaRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
valorFaltaRowPago: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
valorPagoStatus: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
valorFaltaLabel: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 14,
|
||||
},
|
||||
valorFaltaBadge: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
valorFaltaBadgeText: {
|
||||
color: colors.branco,
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 14,
|
||||
},
|
||||
|
||||
documentoRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
documentoRowLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
documentoBadge: {
|
||||
backgroundColor: '#FFE2E0',
|
||||
borderRadius: 6,
|
||||
paddingVertical: 2,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
documentoBadgeText: {
|
||||
color: '#E6463B',
|
||||
fontFamily: fonts.bold,
|
||||
fontSize: 10,
|
||||
},
|
||||
documentoName: {
|
||||
flex: 1,
|
||||
color: colors.azul,
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 13,
|
||||
},
|
||||
offlineBanner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: '#4A6592',
|
||||
borderRadius: 10,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
offlineBannerText: {
|
||||
color: '#ffffff',
|
||||
fontFamily: fonts.medium,
|
||||
fontSize: 12,
|
||||
flex: 1,
|
||||
},
|
||||
syncLabel: {
|
||||
textAlign: 'center',
|
||||
color: '#9AA8BE',
|
||||
fontFamily: fonts.regular,
|
||||
fontSize: 11,
|
||||
marginTop: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user