redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/components/IconContainer.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";
 
 type IconContainerVariant = "plain" | "subtle" | "colored";
-type IconContainerSize = "sm" | "md" | "lg";
+type IconContainerSize = "sm" | "md" | "lg" | "xl";
 
 interface IconContainerProps {
   children: React.ReactNode;
@@ -13,19 +13,6 @@ interface IconContainerProps {
   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",
@@ -37,19 +24,24 @@ export function IconContainer({
 
   const sizeStyles: Record<IconContainerSize, ViewStyle> = {
     sm: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
+      width: 36,
+      height: 36,
+      borderRadius: 10,
     },
     md: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-    },
-    lg: {
       width: 48,
       height: 48,
-      borderRadius: 24,
+      borderRadius: 14,
+    },
+    lg: {
+      width: 56,
+      height: 56,
+      borderRadius: 16,
+    },
+    xl: {
+      width: 64,
+      height: 64,
+      borderRadius: 18,
     },
   };