UI improvements: safe area fixes, loading screen, and action sheet enhancements

.gitignore

@@ -71,3 +71,4 @@ test-ledger/
 # General cache directories
 **/Cache/
 **/cache/
+x1-app icons

android/components/SimpleActionSheet.js

@@ -38,6 +38,12 @@ const SimpleActionSheet = forwardRef(
     const [visible, setVisible] = useState(false);
     const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
     const opacity = useRef(new Animated.Value(0)).current;
+
+    // Calculate backdrop color based on backgroundColor
+    // If it's easter egg mode (#111827), use a matching backdrop
+    const backdropColor = backgroundColor === "#111827" 
+      ? "rgba(17, 24, 39, 0.5)" 
+      : "rgba(0, 0, 0, 0.5)";
 
     const panResponder = useRef(
       PanResponder.create({
@@ -146,7 +152,7 @@ const SimpleActionSheet = forwardRef(
           {/* Backdrop */}
           <TouchableWithoutFeedback onPress={handleBackdropPress}>
             <Animated.View
-              style={[styles.backdrop, { opacity }]}
+              style={[styles.backdrop, { opacity, backgroundColor: backdropColor }]}
               pointerEvents="auto"
             />
           </TouchableWithoutFeedback>
@@ -162,6 +168,12 @@ const SimpleActionSheet = forwardRef(
                 borderTopRightRadius: cornerRadius,
                 paddingBottom: 20 + insets.bottom,
                 transform: [{ translateY }],
+                // Shadow/glow effect - more visible in both modes
+                shadowColor: backgroundColor === "#111827" ? "#888888" : "#AAAAAA",
+                shadowOffset: { width: 0, height: -4 },
+                shadowOpacity: backgroundColor === "#111827" ? 0.4 : 0.6,
+                shadowRadius: 16,
+                elevation: 20,
               },
             ]}
           >
@@ -185,7 +197,7 @@ const styles = StyleSheet.create({
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    // backgroundColor will be set dynamically based on easter egg mode
   },
   sheet: {
     height: SCREEN_HEIGHT * 0.9,

android/screens/ActivityScreen.js

@@ -29,7 +29,11 @@ export default function ActivityScreen({
         </TouchableOpacity>
       </View>
 
-      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+      <ScrollView 
+        style={styles.content} 
+        contentContainerStyle={transactions.length === 0 ? styles.emptyStateScrollContent : undefined}
+        showsVerticalScrollIndicator={false}
+      >
         {transactions.length === 0 ? (
           <View style={styles.emptyStateContainer}>
             <Text style={styles.emptyStateText}>No transactions yet</Text>
@@ -128,7 +132,15 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
-    padding: 16,
+  },
+  emptyStateScrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    paddingTop: 0,
+  },
+  emptyStateSpacer: {
+    height: 40,
   },
   activityCard: {
     backgroundColor: "#0a0a0a",
@@ -181,16 +193,21 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    paddingVertical: 60,
+    paddingBottom: 40,
+    paddingHorizontal: 32,
   },
   emptyStateText: {
     color: "#FFFFFF",
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 8,
+    textAlign: "center",
+    width: "100%",
   },
   emptyStateSubtext: {
     color: "#999999",
     fontSize: 14,
+    textAlign: "center",
+    width: "100%",
   },
 });