UI: Larger touch targets and shift components up for better ergonomics

src/components/FramePicker.tsx

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     fontStyle: 'italic',
   },
   title: {
-    fontSize: 13,
+    fontSize: 16,
     fontWeight: 'bold',
     color: THEME.colors.textMuted,
     letterSpacing: 1,
@@ -101,9 +101,9 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   frameThumb: {
-    width: 80,
+    width: 120,
     alignItems: 'center',
-    padding: 4,
+    padding: 6,
     borderRadius: THEME.borderRadius.sm,
     borderWidth: 1,
     borderColor: 'transparent',
@@ -113,8 +113,8 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(40, 223, 255, 0.1)',
   },
   noFrameBox: {
-    width: 66,
+    width: 100,
-    height: 44,
+    height: 66,
     backgroundColor: THEME.colors.surfaceSecondary,
     borderRadius: 4,
     justifyContent: 'center',
@@ -123,18 +123,18 @@ const styles = StyleSheet.create({
     borderColor: THEME.colors.border,
   },
   noFrameText: {
-    fontSize: 20,
+    fontSize: 28,
     color: THEME.colors.textMuted,
   },
   thumbImage: {
-    width: 66,
+    width: 100,
-    height: 44,
+    height: 66,
     borderRadius: 4,
   },
   frameName: {
-    fontSize: 10,
+    fontSize: 13,
     color: THEME.colors.textMuted,
-    marginTop: 3,
+    marginTop: 6,
     textAlign: 'center',
   },
 });

src/components/StickerTray.tsx

@@ -93,13 +93,13 @@ export default function StickerTray({
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    bottom: 0,
+    bottom: 40,
     left: 0,
     right: 0,
     backgroundColor: 'rgba(13, 13, 26, 0.95)',
     borderTopWidth: 1,
     borderTopColor: THEME.colors.border,
-    paddingBottom: 8,
+    paddingBottom: 16,
     zIndex: 500,
   },
   header: {
@@ -110,7 +110,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
   },
   headerTitle: {
-    fontSize: 13,
+    fontSize: 16,
     fontWeight: 'bold',
     color: THEME.colors.textMuted,
     letterSpacing: 1,
@@ -128,16 +128,16 @@ const styles = StyleSheet.create({
   dateBtn: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 6,
+    gap: 8,
     backgroundColor: THEME.colors.surfaceSecondary,
-    paddingVertical: 5,
+    paddingVertical: 10,
-    paddingHorizontal: 10,
+    paddingHorizontal: 16,
     borderRadius: THEME.borderRadius.sm,
     borderWidth: 1,
     borderColor: THEME.colors.border,
   },
   dateBtnText: {
-    fontSize: 12,
+    fontSize: 15,
     color: THEME.colors.accent,
     fontWeight: '600',
   },
@@ -146,15 +146,15 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
   },
   emojiBtn: {
-    width: 44,
+    width: 60,
-    height: 44,
+    height: 60,
     justifyContent: 'center',
     alignItems: 'center',
-    marginHorizontal: 2,
+    marginHorizontal: 4,
     borderRadius: THEME.borderRadius.sm,
     backgroundColor: 'rgba(255, 255, 255, 0.05)',
   },
   emojiText: {
-    fontSize: 28,
+    fontSize: 40,
   },
 });

src/screens/PreviewScreen.tsx

@@ -589,7 +589,7 @@ export default function PreviewScreen({
           >
             <FontAwesomeIcon
               icon={faFaceGrinStars}
-              size={16}
+              size={22}
               color={showStickerTray ? THEME.colors.text : THEME.colors.accent}
             />
             <Text style={[styles.editToolText, showStickerTray && styles.editToolTextActive]}>
@@ -612,7 +612,7 @@ export default function PreviewScreen({
             >
               <FontAwesomeIcon
                 icon={faBorderAll}
-                size={16}
+                size={22}
                 color={selectedFrameId !== null ? THEME.colors.text : THEME.colors.accent}
               />
               <Text style={[styles.editToolText, selectedFrameId !== null && styles.editToolTextActive]}>
@@ -692,9 +692,10 @@ const styles = StyleSheet.create({
   },
   previewPanel: {
     flex: 1.2,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     padding: THEME.spacing.md,
+    paddingTop: 60,
     backgroundColor: '#030308',
   },
   viewShotContainer: {
@@ -803,9 +804,9 @@ const styles = StyleSheet.create({
   editToolBtn: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 6,
+    gap: 8,
-    paddingVertical: 8,
+    paddingVertical: 12,
-    paddingHorizontal: 14,
+    paddingHorizontal: 20,
     borderRadius: THEME.borderRadius.round,
     borderWidth: 1,
     borderColor: THEME.colors.border,
@@ -816,7 +817,7 @@ const styles = StyleSheet.create({
     borderColor: THEME.colors.accent,
   },
   editToolText: {
-    fontSize: 13,
+    fontSize: 16,
     fontWeight: '600',
     color: THEME.colors.accent,
   },