refactor: split app into modular src architecture

src/styles.js

@@ -0,0 +1,376 @@
+import { Platform, StyleSheet } from 'react-native';
+import { TAB_BAR_HEIGHT } from './constants';
+
+export const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+    backgroundColor: '#090d12',
+  },
+  flex: {
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: 14,
+    paddingTop: 12,
+    paddingBottom: TAB_BAR_HEIGHT + 18,
+    gap: 12,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  muted: {
+    color: '#8793a5',
+  },
+
+  tripPickerWrap: {
+    marginBottom: 6,
+  },
+  tripChipScroll: {
+    gap: 8,
+    paddingRight: 12,
+  },
+  tripChip: {
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    borderRadius: 12,
+    backgroundColor: '#121923',
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    minWidth: 120,
+  },
+  tripChipActive: {
+    backgroundColor: '#1d2a3a',
+    borderColor: '#60a5fa',
+  },
+  tripChipText: {
+    color: '#e2e8f0',
+    fontWeight: '700',
+  },
+  tripChipTextActive: {
+    color: '#bfdbfe',
+  },
+  tripChipSub: {
+    color: '#64748b',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  tripChipSubActive: {
+    color: '#93c5fd',
+  },
+
+  section: {
+    gap: 10,
+  },
+  sectionTitle: {
+    color: '#f1f5f9',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  sectionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 10,
+  },
+
+  card: {
+    backgroundColor: '#111827',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    padding: 12,
+    gap: 8,
+  },
+  cardActive: {
+    borderColor: '#60a5fa',
+  },
+  cardSoft: {
+    backgroundColor: '#0f172a',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 12,
+    gap: 10,
+  },
+  cardRow: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  cardTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  cardMeta: {
+    color: '#94a3b8',
+    marginTop: 3,
+    fontSize: 13,
+  },
+
+  fieldWrap: {
+    gap: 6,
+  },
+  label: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#243244',
+    borderRadius: 10,
+    backgroundColor: '#0b1220',
+    color: '#e5e7eb',
+    paddingHorizontal: 10,
+    paddingVertical: 11,
+  },
+
+  chipGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 7,
+  },
+  chip: {
+    borderRadius: 999,
+    paddingHorizontal: 11,
+    paddingVertical: 7,
+    borderWidth: 1,
+    borderColor: '#273449',
+    backgroundColor: '#0b1220',
+  },
+  chipActive: {
+    borderColor: '#60a5fa',
+    backgroundColor: '#172338',
+  },
+  chipText: {
+    color: '#cbd5e1',
+    fontWeight: '600',
+    fontSize: 12,
+  },
+  chipTextActive: {
+    color: '#bfdbfe',
+  },
+
+  primaryBtn: {
+    marginTop: 4,
+    borderRadius: 10,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    paddingVertical: 11,
+    paddingHorizontal: 12,
+  },
+  primaryBtnTight: {
+    borderRadius: 10,
+    backgroundColor: '#2563eb',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  primaryBtnText: {
+    color: '#fff',
+    fontWeight: '700',
+  },
+  secondaryBtn: {
+    marginTop: 4,
+    borderRadius: 10,
+    backgroundColor: '#1f2937',
+    alignItems: 'center',
+    paddingVertical: 11,
+    paddingHorizontal: 12,
+  },
+  secondaryBtnTight: {
+    borderRadius: 10,
+    backgroundColor: '#1f2937',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  secondaryBtnText: {
+    color: '#dbeafe',
+    fontWeight: '700',
+  },
+
+  inlineToggle: {
+    marginTop: 2,
+  },
+  inlineToggleText: {
+    color: '#cbd5e1',
+  },
+
+  stackButtons: {
+    gap: 7,
+  },
+  miniBtn: {
+    backgroundColor: '#1e293b',
+    borderRadius: 8,
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+  },
+  miniBtnDanger: {
+    backgroundColor: '#3b1d22',
+    borderRadius: 8,
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+  },
+  miniBtnText: {
+    color: '#e2e8f0',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+
+  itemCard: {
+    borderRadius: 14,
+    backgroundColor: '#111827',
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    overflow: 'hidden',
+    flexDirection: 'row',
+  },
+  itemAccent: {
+    width: 5,
+  },
+  itemMain: {
+    flex: 1,
+    padding: 12,
+    gap: 8,
+  },
+  itemTitle: {
+    color: '#f8fafc',
+    fontWeight: '700',
+    fontSize: 15,
+  },
+  itemMeta: {
+    color: '#94a3b8',
+    marginTop: 2,
+    fontSize: 13,
+  },
+
+  answerRow: {
+    marginTop: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  answerYes: {
+    backgroundColor: '#163223',
+    borderWidth: 1,
+    borderColor: '#1f7a4e',
+    borderRadius: 9,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  answerNo: {
+    backgroundColor: '#3b1d22',
+    borderWidth: 1,
+    borderColor: '#7f1d1d',
+    borderRadius: 9,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  answerText: {
+    color: '#f8fafc',
+    fontWeight: '700',
+  },
+  answerStateDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 99,
+    backgroundColor: '#475569',
+  },
+  answerStateDotOn: {
+    backgroundColor: '#22c55e',
+  },
+
+  snapshotWrap: {
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#1e293b',
+    paddingTop: 8,
+    gap: 7,
+  },
+  snapshotRow: {
+    paddingVertical: 3,
+  },
+  snapshotTitle: {
+    color: '#e2e8f0',
+    fontWeight: '600',
+  },
+
+  previewImage: {
+    width: '100%',
+    height: 150,
+    borderRadius: 10,
+    backgroundColor: '#111827',
+  },
+  previewImageSmall: {
+    width: '100%',
+    height: 120,
+    borderRadius: 10,
+    backgroundColor: '#111827',
+  },
+
+  tabBarWrap: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 10,
+    paddingBottom: Platform.OS === 'ios' ? 14 : 8,
+    backgroundColor: 'transparent',
+  },
+  tabBar: {
+    height: TAB_BAR_HEIGHT,
+    borderRadius: 16,
+    backgroundColor: '#0b1220',
+    borderWidth: 1,
+    borderColor: '#1f2937',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  tabItem: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  tabDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 99,
+    backgroundColor: '#334155',
+  },
+  tabDotActive: {
+    backgroundColor: '#60a5fa',
+  },
+  tabLabel: {
+    color: '#94a3b8',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  tabLabelActive: {
+    color: '#dbeafe',
+  },
+
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(2,6,23,0.72)',
+    justifyContent: 'flex-end',
+  },
+  modalKeyboardWrap: {
+    width: '100%',
+  },
+  modalCard: {
+    maxHeight: '87%',
+    backgroundColor: '#0f172a',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    borderWidth: 1,
+    borderColor: '#1e293b',
+    padding: 14,
+    gap: 8,
+  },
+  closeText: {
+    color: '#93c5fd',
+    fontWeight: '700',
+  },
+});