diff --git a/src/pages/settings/ui/SettingsPage.tsx b/src/pages/settings/ui/SettingsPage.tsx index 3ec095e..a88f1af 100644 --- a/src/pages/settings/ui/SettingsPage.tsx +++ b/src/pages/settings/ui/SettingsPage.tsx @@ -1,28 +1,36 @@ import React, {useState} from 'react'; import {StyleSheet, Text, View, ScrollView} from 'react-native'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {ExportBackupButton, ImportBackupButton} from '@/features/backup-vault'; import {CategoryManagerModal} from '@/widgets/category-manager'; import {NoteStats} from '@/widgets/note-stats'; import {colors, spacing, typography} from '@/shared/config'; import {SettingsRow} from '@/shared/ui'; -const TECH_STACK: {label: string; value: string; icon?: string}[] = [ - {label: 'App', value: 'Secret (offline-first)', icon: 'shield-lock-outline'}, - {label: 'Version', value: '0.0.1', icon: 'tag-outline'}, - {label: 'Framework', value: 'React Native 0.85', icon: 'cellphone'}, - {label: 'Language', value: 'TypeScript', icon: 'language-typescript'}, - {label: 'Architecture', value: 'Feature-Sliced Design', icon: 'sitemap-outline'}, - {label: 'Storage', value: 'MMKV', icon: 'database-outline'}, - {label: 'Encryption', value: 'AES-256-CBC', icon: 'lock-outline'}, - {label: 'Navigation', value: 'React Navigation 7', icon: 'routes'}, - {label: 'Backup I/O', value: 'FS, Share, Document Picker', icon: 'folder-outline'}, +const TECH_STACK: {label: string; value: string}[] = [ + {label: 'App', value: 'Secret (offline-first)'}, + {label: 'Version', value: '0.0.1'}, + {label: 'Framework', value: 'React Native 0.85'}, + {label: 'Language', value: 'TypeScript'}, + {label: 'Architecture', value: 'Feature-Sliced Design'}, + {label: 'Storage', value: 'MMKV'}, + {label: 'Encryption', value: 'AES-256-CBC'}, + {label: 'Navigation', value: 'React Navigation 7'}, + {label: 'Backup I/O', value: 'FS, Share, Document Picker'}, ]; export function SettingsPage(): React.JSX.Element { const [isCategoryModalVisible, setCategoryModalVisible] = useState(false); + const insets = useSafeAreaInsets(); return ( - + Preferences @@ -50,13 +58,14 @@ export function SettingsPage(): React.JSX.Element { About - {TECH_STACK.map(item => ( - + {TECH_STACK.map((item, index) => ( + + {index > 0 ? : null} + + {item.label} + {item.value} + + ))} @@ -105,4 +114,29 @@ const styles = StyleSheet.create({ borderRadius: spacing.md, overflow: 'hidden', }, + aboutRow: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + gap: spacing.md, + paddingVertical: spacing.md, + paddingHorizontal: spacing.md, + }, + aboutLabel: { + flex: 1, + fontSize: typography.body.fontSize, + color: colors.textSecondary, + }, + aboutValue: { + flex: 1.2, + fontSize: typography.body.fontSize, + fontWeight: '500', + color: colors.primary, + textAlign: 'right', + }, + aboutDivider: { + height: 1, + backgroundColor: colors.border, + marginLeft: spacing.md, + }, }); diff --git a/src/shared/ui/SettingsRow.tsx b/src/shared/ui/SettingsRow.tsx index 72b284d..3b0b783 100644 --- a/src/shared/ui/SettingsRow.tsx +++ b/src/shared/ui/SettingsRow.tsx @@ -49,20 +49,29 @@ const styles = StyleSheet.create({ backgroundColor: colors.surfaceElevated, }, left: { + flex: 1, flexDirection: 'row', alignItems: 'center', + marginRight: spacing.sm, + minWidth: 0, }, right: { + flexShrink: 1, + maxWidth: '52%', flexDirection: 'row', alignItems: 'center', + justifyContent: 'flex-end', gap: spacing.sm, }, label: { fontSize: typography.body.fontSize, fontWeight: '500', + flexShrink: 1, }, value: { fontSize: typography.body.fontSize, color: colors.textSecondary, + textAlign: 'right', + flexShrink: 1, }, });