redesign take 1

apps/mobile/src/components/IconContainer.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+
+type IconContainerVariant = "plain" | "subtle" | "colored";
+type IconContainerSize = "sm" | "md" | "lg";
+
+interface IconContainerProps {
+  children: React.ReactNode;
+  variant?: IconContainerVariant;
+  size?: IconContainerSize;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * IconContainer - Clean container for icons with subtle backgrounds
+ *
+ * Variants:
+ * - plain: No background, just the icon
+ * - subtle: Light background (surfaceSecondary)
+ * - colored: Custom background color (pass backgroundColor prop)
+ *
+ * Sizes:
+ * - sm: 32px circle
+ * - md: 40px circle (default)
+ * - lg: 48px circle
+ */
+export function IconContainer({
+  children,
+  variant = "subtle",
+  size = "md",
+  backgroundColor,
+  style,
+}: IconContainerProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
+    sm: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+    },
+    md: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+    },
+    lg: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+    },
+  };
+
+  const getBackgroundColor = (): string | undefined => {
+    if (variant === "colored" && backgroundColor) {
+      return backgroundColor;
+    }
+    if (variant === "subtle") {
+      return colors.surfaceElevated;
+    }
+    return "transparent";
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        sizeStyles[size],
+        { backgroundColor: getBackgroundColor() },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});