redesign take 1

apps/mobile/src/components/MinimalCard.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+  StyleProp,
+} from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type CardVariant = "default" | "elevated" | "bordered";
+
+interface MinimalCardProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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,
+}: MinimalCardProps) {
+  const { colors } = useTheme();
+
+  const cardStyles = [
+    styles.base,
+    {
+      backgroundColor: colors.surface,
+    },
+    variant === "default" && styles.default,
+    variant === "elevated" && styles.elevated,
+    variant === "bordered" && {
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        style={cardStyles}
+        onPress={onPress}
+        activeOpacity={0.7}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={cardStyles}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: 12,
+    padding: 16,
+  },
+  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,
+  },
+});