redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/components/MinimalCard.tsx

@@ -8,28 +8,22 @@ import {
 } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
-type CardVariant = "default" | "elevated" | "bordered";
+type CardVariant = "default" | "elevated" | "bordered" | "gradient";
 
 interface MinimalCardProps {
   children: React.ReactNode;
   variant?: CardVariant;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  padding?: number;
 }
 
-/**
- * MinimalCard - Clean card component without gradients
- *
- * Variants:
- * - default: Subtle shadow on surface background
- * - elevated: More prominent shadow
- * - bordered: Border instead of shadow
- */
 export function MinimalCard({
   children,
   variant = "default",
   onPress,
   style,
+  padding = 20,
 }: MinimalCardProps) {
   const { colors } = useTheme();
 
@@ -37,13 +31,20 @@ export function MinimalCard({
     styles.base,
     {
       backgroundColor: colors.surface,
+      padding: padding,
     },
     variant === "default" && styles.default,
-    variant === "elevated" && styles.elevated,
+    variant === "elevated" && {
+      ...styles.elevated,
+      backgroundColor: colors.surfaceElevated,
+    },
     variant === "bordered" && {
       borderWidth: 1,
       borderColor: colors.border,
     },
+    variant === "gradient" && {
+      backgroundColor: colors.surfaceElevated,
+    },
     style,
   ];
 
@@ -52,7 +53,7 @@ export function MinimalCard({
       <TouchableOpacity
         style={cardStyles}
         onPress={onPress}
-        activeOpacity={0.7}
+        activeOpacity={0.85}
       >
         {children}
       </TouchableOpacity>
@@ -64,21 +65,20 @@ export function MinimalCard({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 12,
-    padding: 16,
+    borderRadius: 20,
   },
   default: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 1,
-  },
-  elevated: {
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.08,
     shadowRadius: 8,
-    elevation: 2,
+    elevation: 3,
+  },
+  elevated: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 6,
   },
 });