redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/components/Badge.tsx

@@ -10,49 +10,41 @@ type BadgeVariant =
   | "danger"
   | "info"
   | "primary";
-type BadgeSize = "sm" | "md";
+type BadgeSize = "sm" | "md" | "lg";
 
 interface BadgeProps {
   label: string;
   variant?: BadgeVariant;
   size?: BadgeSize;
   style?: StyleProp<ViewStyle>;
+  emoji?: string;
 }
 
-/**
- * Badge - Pill-shaped status indicator
- *
- * Variants:
- * - neutral: Gray badge for general labels
- * - success: Green badge for positive status
- * - warning: Orange/yellow badge for warnings
- * - danger: Red badge for errors or critical status
- * - info: Blue badge for informational status
- * - primary: Primary color badge
- *
- * Sizes:
- * - sm: 5px vertical, 10px horizontal, 11px font
- * - md: 6px vertical, 12px horizontal, 13px font (default)
- */
 export function Badge({
   label,
   variant = "neutral",
   size = "md",
   style,
+  emoji,
 }: BadgeProps) {
   const { colors } = useTheme();
 
   const sizeStyles = {
     sm: {
-      paddingVertical: 5,
-      paddingHorizontal: 10,
+      paddingVertical: 6,
+      paddingHorizontal: 12,
       fontSize: fontSize.xs,
     },
     md: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 14,
       fontSize: fontSize.sm,
     },
+    lg: {
+      paddingVertical: 10,
+      paddingHorizontal: 18,
+      fontSize: fontSize.base,
+    },
   };
 
   const variantStyles: Record<
@@ -64,24 +56,24 @@ export function Badge({
       color: colors.textSecondary,
     },
     success: {
-      backgroundColor: `${colors.success}20`, // 20% opacity
-      color: colors.success,
+      backgroundColor: colors.success,
+      color: colors.white,
     },
     warning: {
-      backgroundColor: `${colors.warning}20`,
-      color: colors.warning,
+      backgroundColor: colors.warning,
+      color: colors.black,
     },
     danger: {
-      backgroundColor: `${colors.danger}20`,
-      color: colors.danger,
+      backgroundColor: colors.danger,
+      color: colors.white,
     },
     info: {
-      backgroundColor: `${colors.info}20`,
-      color: colors.info,
+      backgroundColor: colors.info,
+      color: colors.white,
     },
     primary: {
-      backgroundColor: `${colors.primary}20`,
-      color: colors.primary,
+      backgroundColor: colors.primary,
+      color: colors.white,
     },
   };
 
@@ -103,10 +95,11 @@ export function Badge({
           {
             color: variantStyles[variant].color,
             fontSize: sizeStyles[size].fontSize,
-            fontWeight: fontWeight.medium,
+            fontWeight: fontWeight.bold,
           },
         ]}
       >
+        {emoji && `${emoji} `}
         {label}
       </Text>
     </View>
@@ -115,7 +108,7 @@ export function Badge({
 
 const styles = StyleSheet.create({
   badge: {
-    borderRadius: 999, // Full pill shape
+    borderRadius: 12,
     alignSelf: "flex-start",
   },
   label: {