239 lines
4.6 KiB
TypeScript
239 lines
4.6 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
import { COLORS } from './colors';
|
|
|
|
export const getThemeStyles = (isDark: boolean) => {
|
|
const theme = isDark ? COLORS.DARK : COLORS.LIGHT;
|
|
|
|
return StyleSheet.create({
|
|
container: { backgroundColor: theme.background, flex: 1 },
|
|
text: { color: theme.text },
|
|
card: { backgroundColor: theme.card },
|
|
input: {
|
|
backgroundColor: theme.inputBackground,
|
|
color: theme.inputText,
|
|
borderColor: theme.inputBorder,
|
|
borderWidth: 1,
|
|
padding: 15,
|
|
borderRadius: 12,
|
|
fontSize: 16,
|
|
},
|
|
subtitle: { color: theme.subtitle },
|
|
tokenBox: { backgroundColor: theme.tokenBox },
|
|
|
|
// Dynamic brand color styles
|
|
headerTitle: {
|
|
color: theme.brand,
|
|
fontSize: 36,
|
|
fontWeight: '800',
|
|
textAlign: 'center',
|
|
marginBottom: 5,
|
|
},
|
|
button: {
|
|
backgroundColor: theme.brand,
|
|
padding: 18,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
marginTop: 35,
|
|
marginBottom: 10,
|
|
shadowColor: theme.brand,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 8,
|
|
},
|
|
avatar: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: theme.brand,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 15,
|
|
},
|
|
linkText: {
|
|
color: theme.brand,
|
|
fontWeight: '600',
|
|
},
|
|
buttonText: {
|
|
color: isDark ? COLORS.LIGHT.brand : '#ffffff',
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
}
|
|
});
|
|
};
|
|
|
|
export const commonStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
padding: 25,
|
|
paddingTop: 60,
|
|
paddingBottom: 40,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: 25,
|
|
},
|
|
logoContainer: {
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
logo: {
|
|
width: 100,
|
|
height: 100,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
marginBottom: 40,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
marginBottom: 30,
|
|
textAlign: 'center',
|
|
},
|
|
form: {
|
|
padding: 25,
|
|
borderRadius: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 10,
|
|
elevation: 5,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
marginBottom: 8,
|
|
marginTop: 15,
|
|
fontWeight: '600',
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.7,
|
|
},
|
|
card: {
|
|
padding: 25,
|
|
borderRadius: 20,
|
|
marginBottom: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
},
|
|
userInfo: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
avatarText: {
|
|
color: 'white',
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
},
|
|
value: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
},
|
|
tokenBox: {
|
|
padding: 15,
|
|
borderRadius: 10,
|
|
marginTop: 10,
|
|
},
|
|
token: {
|
|
fontSize: 12,
|
|
color: '#718096',
|
|
fontFamily: 'Courier',
|
|
marginTop: 5,
|
|
},
|
|
logoutButton: {
|
|
backgroundColor: 'white',
|
|
padding: 15,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: '#e2e8f0',
|
|
},
|
|
logoutText: {
|
|
color: '#e53e3e',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
tosContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 15,
|
|
},
|
|
tosText: {
|
|
marginLeft: 10,
|
|
fontSize: 14,
|
|
},
|
|
centered: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 20,
|
|
},
|
|
});
|
|
|
|
export const homeStyles = StyleSheet.create({
|
|
listContent: {
|
|
padding: 16,
|
|
paddingBottom: 100, // Space for FAB
|
|
},
|
|
docCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
marginBottom: 12,
|
|
borderWidth: 1,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
docIcon: {
|
|
marginRight: 16,
|
|
},
|
|
docInfo: {
|
|
flex: 1,
|
|
},
|
|
docName: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
marginBottom: 4,
|
|
},
|
|
docDate: {
|
|
fontSize: 12,
|
|
},
|
|
deleteBtn: {
|
|
padding: 8,
|
|
},
|
|
fab: {
|
|
position: 'absolute',
|
|
bottom: 24,
|
|
right: 24,
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 32,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 4.65,
|
|
elevation: 8,
|
|
},
|
|
loadingOverlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 1000,
|
|
},
|
|
});
|