redesign take 1

apps/mobile/src/components/Badge.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+import { useTheme } from "../contexts/ThemeContext";
+import { fontSize, fontWeight } from "../styles/typography";
+
+type BadgeVariant =
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "primary";
+type BadgeSize = "sm" | "md";
+
+interface BadgeProps {
+  label: string;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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,
+}: BadgeProps) {
+  const { colors } = useTheme();
+
+  const sizeStyles = {
+    sm: {
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      fontSize: fontSize.xs,
+    },
+    md: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      fontSize: fontSize.sm,
+    },
+  };
+
+  const variantStyles: Record<
+    BadgeVariant,
+    { backgroundColor: string; color: string }
+  > = {
+    neutral: {
+      backgroundColor: colors.surfaceElevated,
+      color: colors.textSecondary,
+    },
+    success: {
+      backgroundColor: `${colors.success}20`, // 20% opacity
+      color: colors.success,
+    },
+    warning: {
+      backgroundColor: `${colors.warning}20`,
+      color: colors.warning,
+    },
+    danger: {
+      backgroundColor: `${colors.danger}20`,
+      color: colors.danger,
+    },
+    info: {
+      backgroundColor: `${colors.info}20`,
+      color: colors.info,
+    },
+    primary: {
+      backgroundColor: `${colors.primary}20`,
+      color: colors.primary,
+    },
+  };
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: variantStyles[variant].backgroundColor,
+          paddingVertical: sizeStyles[size].paddingVertical,
+          paddingHorizontal: sizeStyles[size].paddingHorizontal,
+        },
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          {
+            color: variantStyles[variant].color,
+            fontSize: sizeStyles[size].fontSize,
+            fontWeight: fontWeight.medium,
+          },
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    borderRadius: 999, // Full pill shape
+    alignSelf: "flex-start",
+  },
+  label: {
+    textAlign: "center",
+  },
+});