feat(ui): disable IPFS method, simplify filters, replace theme switch with picker, tweak typography & add Elevation

Author: StringNick

app/auth.tsx

@@ -7,15 +7,15 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useState } from 'react';
 import {
-  Alert,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
+    Alert,
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
 } from 'react-native';
 
 type AuthMethod = StorageBackendType;
@@ -152,22 +152,21 @@ export default function AuthScreen() {
                 </Text>
               </TouchableOpacity>
 
-              <TouchableOpacity
+              <View
                 style={[
                   styles.methodButton,
                   styles.disabledMethodButton,
-                  activeMethod === 'ipfs' && styles.activeMethodButton,
+                  { opacity: 0.5 },
                 ]}
-                onPress={() => setActiveMethod('ipfs')}
               >
                 <View style={styles.methodButtonContent}>
-                  <IconSymbol name="globe" size={18} color={activeMethod === 'ipfs' ? '#FFFFFF' : '#6B7280'} />
-                  <Text style={[styles.methodText, activeMethod === 'ipfs' && styles.activeMethodText]}>IPFS</Text>
+                  <IconSymbol name="globe" size={18} color="#6B7280" />
+                  <Text style={styles.methodText}>IPFS</Text>
                 </View>
                 <View style={styles.soonBadge}>
                   <Text style={styles.soonText}>Soon</Text>
                 </View>
-              </TouchableOpacity>
+              </View>
             </View>
 
             <View style={styles.formContainer}>

app/index.tsx

@@ -1,30 +1,30 @@
 import { NoteCard } from '@/components/NoteCard';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import {
-  getThemeColors,
-  Animations,
-  Colors,
-  Spacing,
-  createTextStyle,
-  Typography,
-  BorderRadius,
-  Shadows,
+    Animations,
+    BorderRadius,
+    Colors,
+    createTextStyle,
+    getThemeColors,
+    Shadows,
+    Spacing,
+    Typography,
 } from '@/constants/DesignSystem';
 import { useStorage } from '@/contexts/StorageContext';
 import { useTheme } from '@/contexts/ThemeContext';
 import type { Note } from '@/types/storage';
 import { useRouter } from 'expo-router';
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  Alert,
-  Animated,
-  FlatList,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
+    Alert,
+    Animated,
+    FlatList,
+    StatusBar,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -182,9 +182,8 @@ export default function HomeScreen() {
 
       {/* Filter Tabs - Minimal */}
       <View style={styles.filterTabs}>
-        {['All', 'Recent', 'Favorites'].map(filter => {
+        {['All'].map(filter => {
           const isActive = activeFilter === filter;
-          const isComingSoon = filter === 'Recent' || filter === 'Favorites';
           return (
             <TouchableOpacity
               key={filter}
@@ -193,16 +192,8 @@ export default function HomeScreen() {
                 {
                   backgroundColor: isActive ? (isDark ? colors.text.primary : colors.text.primary) : 'transparent',
                 },
-                isComingSoon && styles.disabledFilterTab,
               ]}
-              onPress={() => {
-                if (isComingSoon) {
-                  Alert.alert('Coming Soon', `${filter} filter will be available soon!`);
-                } else {
-                  setActiveFilter(filter);
-                }
-              }}
-              disabled={isComingSoon && isActive}
+              onPress={() => setActiveFilter(filter)}
             >
               <Text
                 style={[
@@ -218,11 +209,6 @@ export default function HomeScreen() {
               >
                 {filter}
               </Text>
-              {isComingSoon && (
-                <View style={styles.soonBadgeSmall}>
-                  <Text style={styles.soonTextSmall}>Soon</Text>
-                </View>
-              )}
             </TouchableOpacity>
           );
         })}

app/settings.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '@/contexts/ThemeContext';
 import Constants from 'expo-constants';
 import { router } from 'expo-router';
 import React, { useState } from 'react';
-import { Alert, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
+import { Alert, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 interface SettingItemProps {
@@ -161,23 +161,22 @@ export default function SettingsScreen() {
           <Text style={[styles.sectionTitle, { color: colors.text.tertiary }]}>APPEARANCE</Text>
           <View style={styles.sectionContent}>
             <SettingItem
-              icon={'moon' as any}
-              title="Dark Mode"
-              subtitle={theme === 'system' ? 'Following system theme' : 'Toggle dark theme'}
+              icon={'circle.lefthalf.filled' as any}
+              title="Theme"
+              subtitle={theme === 'system' ? 'Following system' : theme === 'dark' ? 'Dark' : 'Light'}
               colors={colors}
-              rightElement={
-                <Switch
-                  value={theme === 'dark' || (theme === 'system' && isDark)}
-                  onValueChange={handleThemeChange}
-                  trackColor={{
-                    false: isDark ? Colors.neutral.gray700 : Colors.neutral.gray300,
-                    true: Colors.primary.purple,
-                  }}
-                  thumbColor={isDark ? Colors.neutral.white : Colors.neutral.white}
-                  ios_backgroundColor={isDark ? Colors.neutral.gray700 : Colors.neutral.gray300}
-                />
-              }
-              showChevron={false}
+              onPress={() => {
+                Alert.alert(
+                  'Theme',
+                  'Choose your preferred theme',
+                  [
+                    { text: 'Light', onPress: () => setTheme('light') },
+                    { text: 'Dark', onPress: () => setTheme('dark') },
+                    { text: 'System', onPress: () => setTheme('system') },
+                    { text: 'Cancel', style: 'cancel' },
+                  ]
+                );
+              }}
             />
           </View>
         </View>

constants/DesignSystem.ts

@@ -145,12 +145,12 @@ export const Typography = {
 
   // Font Sizes
   sizes: {
-    xs: 10,
-    sm: 12,
-    base: 14,
-    md: 16,
-    lg: 18,
-    xl: 20,
+    xs: 11,
+    sm: 13,
+    base: 16,
+    md: 17,
+    lg: 19,
+    xl: 21,
     '2xl': 24,
     '3xl': 28,
     '4xl': 32,
@@ -160,9 +160,9 @@ export const Typography = {
 
   // Line Heights
   lineHeights: {
-    tight: 1.2,
-    normal: 1.5,
-    relaxed: 1.75,
+    tight: 1.25,
+    normal: 1.6,
+    relaxed: 1.8,
   },
 
   // Letter Spacing
@@ -189,6 +189,39 @@ export const Spacing = {
   '6xl': 80,
 };
 
+// === ELEVATION ===
+// Semantic elevation levels for layered surfaces
+export const Elevation = {
+  flat: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  card: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  modal: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.12,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  float: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 4,
+  },
+};
+
 // === BORDER RADIUS ===
 // Enhanced with modern rounded values
 export const BorderRadius = {