143 lines
3.2 KiB
TypeScript
143 lines
3.2 KiB
TypeScript
import { StyleSheet, Dimensions, Platform } from 'react-native';
|
|
import { typography } from '@theme';
|
|
|
|
const { width } = Dimensions.get('window');
|
|
|
|
export const getStyles = (colors: any) =>
|
|
StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.primary,
|
|
},
|
|
scrollContainer: {
|
|
flexGrow: 1,
|
|
},
|
|
|
|
// ---------- Hero ----------
|
|
hero: {
|
|
backgroundColor: colors.primary,
|
|
paddingTop: Platform.OS === 'ios' ? 70 : 48,
|
|
paddingBottom: 56,
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
},
|
|
heroDecoCircleLg: {
|
|
position: 'absolute',
|
|
width: 220,
|
|
height: 220,
|
|
borderRadius: 110,
|
|
backgroundColor: 'rgba(255,255,255,0.06)',
|
|
top: -100,
|
|
right: -60,
|
|
},
|
|
heroDecoCircleSm: {
|
|
position: 'absolute',
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
backgroundColor: 'rgba(255,255,255,0.08)',
|
|
top: 30,
|
|
left: -50,
|
|
},
|
|
logoBadge: {
|
|
width: 68,
|
|
height: 68,
|
|
borderRadius: 20,
|
|
backgroundColor: 'rgba(255,255,255,0.95)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 16,
|
|
...Platform.select({
|
|
ios: {
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.15,
|
|
shadowRadius: 10,
|
|
},
|
|
android: { elevation: 4 },
|
|
}),
|
|
},
|
|
logoEmoji: {
|
|
fontSize: 32,
|
|
},
|
|
brandName: {
|
|
fontSize: typography.fontSize.xl,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: '#FFFFFF',
|
|
marginBottom: 4,
|
|
},
|
|
brandTagline: {
|
|
fontSize: typography.fontSize.sm,
|
|
color: 'rgba(255,255,255,0.85)',
|
|
},
|
|
|
|
// ---------- Form card ----------
|
|
formCard: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
borderTopLeftRadius: 32,
|
|
borderTopRightRadius: 32,
|
|
marginTop: -28,
|
|
paddingTop: 32,
|
|
paddingHorizontal: 24,
|
|
paddingBottom: 24,
|
|
},
|
|
headerContainer: {
|
|
marginBottom: 28,
|
|
},
|
|
title: {
|
|
fontSize: typography.fontSize.xxl,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: typography.fontSize.md,
|
|
color: colors.textSecondary,
|
|
},
|
|
formContainer: {
|
|
width: '100%',
|
|
},
|
|
|
|
// Phone prefix chip rendered via CustomInput's leftElement
|
|
prefixChip: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
prefixFlag: {
|
|
fontSize: 16,
|
|
marginRight: 6,
|
|
},
|
|
prefixText: {
|
|
fontSize: typography.fontSize.md,
|
|
fontWeight: typography.fontWeight.semibold,
|
|
color: colors.text,
|
|
},
|
|
|
|
helperText: {
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
marginTop: -12,
|
|
marginBottom: 20,
|
|
marginLeft: 4,
|
|
},
|
|
|
|
// ---------- Footer ----------
|
|
footerSpacer: {
|
|
flex: 1,
|
|
minHeight: 24,
|
|
},
|
|
termsText: {
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
lineHeight: 18,
|
|
marginTop: 20,
|
|
paddingHorizontal: 8,
|
|
},
|
|
termsLink: {
|
|
color: colors.primary,
|
|
fontWeight: typography.fontWeight.semibold,
|
|
},
|
|
});
|