From 95c58cfae69c30767b6199db3bf9bb8e338ee15c Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Thu, 11 Jun 2026 12:10:00 +0200
Subject: [PATCH] fix: multiple UX issues (black camera screen, layout
 proportions, sticker delete button scaling, save without reset)

---
 App.tsx                             |  2 +-
 src/components/DraggableSticker.tsx | 42 +++++++++++++++++++----------
 src/screens/PreviewScreen.tsx       |  7 +++--
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/App.tsx b/App.tsx
index 9d7d42df..be0b1582 100644
--- a/App.tsx
+++ b/App.tsx
@@ -150,7 +150,7 @@ export default function App() {
         <View 
           style={[
             StyleSheet.absoluteFill, 
-            (currentScreen === 'preview' || currentScreen === 'admin') && { opacity: 0, zIndex: -10, transform: [{ translateX: -10000 }] }
+            (currentScreen === 'preview' || currentScreen === 'admin') && { zIndex: -10 }
           ]} 
           pointerEvents={(currentScreen === 'preview' || currentScreen === 'admin') ? 'none' : 'auto'}
         >
diff --git a/src/components/DraggableSticker.tsx b/src/components/DraggableSticker.tsx
index 262691c1..80d7f030 100644
--- a/src/components/DraggableSticker.tsx
+++ b/src/components/DraggableSticker.tsx
@@ -121,6 +121,13 @@ export default function DraggableSticker({
     ],
   }));
 
+  const deleteBtnStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: 1 / scale.value },
+      { rotate: `-${rotation.value}rad` }, // keep it upright
+    ],
+  }));
+
   const isText = sticker.type === 'text';
 
   return (
@@ -134,13 +141,15 @@ export default function DraggableSticker({
           <Text style={styles.emojiText}>{sticker.content}</Text>
         )}
         {isSelected && (
-          <TouchableOpacity
-            style={styles.deleteBtn}
-            onPress={() => onDelete(sticker.id)}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-          >
-            <Text style={styles.deleteBtnText}>×</Text>
-          </TouchableOpacity>
+          <Animated.View style={[styles.deleteBtnWrapper, deleteBtnStyle]}>
+            <TouchableOpacity
+              style={styles.deleteBtn}
+              onPress={() => onDelete(sticker.id)}
+              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+            >
+              <Text style={styles.deleteBtnText}>×</Text>
+            </TouchableOpacity>
+          </Animated.View>
         )}
       </Animated.View>
     </GestureDetector>
@@ -177,17 +186,22 @@ const styles = StyleSheet.create({
     textShadowOffset: { width: 0, height: 0 },
     textShadowRadius: 6,
   },
-  deleteBtn: {
+  deleteBtnWrapper: {
     position: 'absolute',
-    top: 15,
-    right: 15,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+    top: 5,
+    right: 5,
+    zIndex: 200,
+    elevation: 25,
+  },
+  deleteBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     backgroundColor: THEME.colors.error,
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 200,
+    borderWidth: 2,
+    borderColor: '#fff',
   },
   deleteBtnText: {
     color: '#fff',
diff --git a/src/screens/PreviewScreen.tsx b/src/screens/PreviewScreen.tsx
index 96f410a0..6a1dce26 100644
--- a/src/screens/PreviewScreen.tsx
+++ b/src/screens/PreviewScreen.tsx
@@ -297,7 +297,6 @@ export default function PreviewScreen({
       setTimeout(() => {
         if (!mountedRef.current) return;
         setIsProcessing(false);
-        onReset();
       }, 1500);
     } catch (error: any) {
       if (!mountedRef.current) return;
@@ -393,7 +392,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.stripImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -415,7 +414,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.gridImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Grid Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -436,7 +435,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.duoImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Duo Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e.nativeEvent?.error || e)}