201 lines
No EOL
3.6 KiB
JavaScript
201 lines
No EOL
3.6 KiB
JavaScript
import { StyleSheet } from 'react-native';
|
|
|
|
export const colors = {
|
|
|
|
primary: '#8A4FFF',
|
|
secondary: '#FFD700',
|
|
background: '#2A1B3D',
|
|
white: '#FFFFFF',
|
|
purple: {
|
|
dark: '#1A0B2E',
|
|
medium: '#431E6E',
|
|
light: '#8A4FFF'
|
|
},
|
|
gold: {
|
|
light: '#FFD700',
|
|
medium: '#DAA520',
|
|
dark: '#B8860B'
|
|
}
|
|
};
|
|
|
|
const glassEffect = {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
backdropFilter: 'blur(10px)',
|
|
};
|
|
|
|
export const globalStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
// Other global container styles
|
|
},
|
|
backgroundArcImage: {
|
|
position: 'absolute',
|
|
width: '355px',
|
|
height: '380px',
|
|
|
|
// Other global background image styles
|
|
},
|
|
backgroundImage: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
// Other global background image styles
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
// Other global safe area styles
|
|
},
|
|
topNavContainer: {
|
|
width: '100%',
|
|
backgroundColor: 'transparent',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
innerNavContainer: {
|
|
width: '90%',
|
|
paddingTop: 20,
|
|
marginTop: -30,
|
|
borderRadius: 20,
|
|
height: 85,
|
|
marginLeft: '5%',
|
|
marginRight: '5%',
|
|
paddingRight: '20px',
|
|
|
|
paddingLeft: '20px',
|
|
backgroundColor: 'white',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
logoImage: {
|
|
left: 8,
|
|
top:4,
|
|
width: 80,
|
|
height: 20,
|
|
},
|
|
instagramIcon: {
|
|
right: 10,
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
|
|
link:{
|
|
color:'white'
|
|
},
|
|
|
|
headerView:{
|
|
display: 'inline'
|
|
|
|
},
|
|
logo: {
|
|
width: 48,
|
|
height: 48,
|
|
marginLeft: 8,
|
|
marginRight: 12,
|
|
borderRadius: 8,
|
|
backgroundColor: '#f0f0f0',
|
|
},
|
|
// Layout styles
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white'
|
|
},
|
|
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
|
|
backgroundImage: {
|
|
top:0,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
resizeMode: 'cover',
|
|
},
|
|
backgroundImageForm: {
|
|
|
|
},
|
|
|
|
|
|
contentContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
|
|
},
|
|
|
|
card: {
|
|
width: '100%',
|
|
maxWidth: 400,
|
|
padding: 15,
|
|
borderRadius: 15,
|
|
...glassEffect,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
},
|
|
|
|
// Text styles
|
|
title: {
|
|
fontSize: 18,
|
|
flexWrap: 'nowrap',
|
|
fontWeight: '600',
|
|
marginBottom: 8,
|
|
textAlign: 'center',
|
|
color: colors.white,
|
|
letterSpacing: 0.5,
|
|
},
|
|
|
|
subtitle: {
|
|
fontSize: 14,
|
|
marginBottom: 25,
|
|
textAlign: 'center',
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
letterSpacing: 0.3,
|
|
},
|
|
|
|
// Input styles
|
|
input: {
|
|
width: '90%',
|
|
height: 38,
|
|
textAlign: 'center',
|
|
borderRadius: 8,
|
|
paddingHorizontal: 15,
|
|
marginBottom: 5,
|
|
marginRight: '5%',
|
|
marginLeft: '5%',
|
|
fontSize: 16,
|
|
backgroundColor: 'white',
|
|
color: colors.gray,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.15)',
|
|
},
|
|
button: {
|
|
marginTop: 20,
|
|
paddingVertical: 12,
|
|
marginLeft:16,
|
|
marginRight: 16,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#A855F7', // fallback color
|
|
// Add gradient-like effect using background image
|
|
backgroundImage: 'linear-gradient(to right, #7859a9, #deb99b)',
|
|
},
|
|
buttonText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
disabledButton: {
|
|
opacity: 0.7,
|
|
},
|
|
// Particle effects container
|
|
particleContainer: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
pointerEvents: 'none',
|
|
},
|
|
|
|
|
|
}) |