@umituz/react-native-settings 4.23.129 → 4.23.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.129",
+  "version": "4.23.131",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/gamification/components/AchievementCard.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 
 export interface AchievementCardProps {
   title: string;
@@ -41,24 +41,44 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  
+  const { getFontSize, getIconSize } = useResponsive();
+
   const finalUnlockedColor = unlockedColor || tokens.colors.success;
   const finalLockedColor = lockedColor || tokens.colors.textDisabled;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
-  
+
   const accentColor = isUnlocked ? finalUnlockedColor : finalLockedColor;
+  const titleFontSize = getFontSize(16);
+  const descriptionFontSize = getFontSize(13);
+  const checkmarkFontSize = getFontSize(14);
+  const iconSize = getIconSize(48);
+  const checkmarkSize = getIconSize(24);
 
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor: finalBackgroundColor, borderColor: withAlpha(accentColor, 0.4) },
+        {
+          backgroundColor: finalBackgroundColor,
+          borderColor: withAlpha(accentColor, 0.4),
+          padding: tokens.spacing.md,
+          borderRadius: tokens.borders.radius.md,
+          gap: tokens.spacing.md,
+        },
         containerStyle,
       ]}
     >
-      <View style={[styles.iconContainer, { backgroundColor: withAlpha(accentColor, 0.2) }]}>
+      <View style={[
+        styles.iconContainer,
+        {
+          backgroundColor: withAlpha(accentColor, 0.2),
+          width: iconSize,
+          height: iconSize,
+          borderRadius: iconSize / 2,
+        }
+      ]}>
         {icon}
       </View>
 
@@ -66,22 +86,45 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
         <AtomicText
           style={[
             styles.title,
-            { color: isUnlocked ? finalTextColor : finalSubtextColor },
+            {
+              color: isUnlocked ? finalTextColor : finalSubtextColor,
+              fontSize: titleFontSize,
+            },
             titleStyle,
           ]}
         >
           {title}
         </AtomicText>
-        <AtomicText style={[styles.description, { color: finalSubtextColor }, descriptionStyle]}>
+        <AtomicText style={[
+          styles.description,
+          {
+            color: finalSubtextColor,
+            fontSize: descriptionFontSize,
+            marginTop: tokens.spacing.xs,
+          },
+          descriptionStyle
+        ]}>
           {description}
         </AtomicText>
 
         {!isUnlocked && (
-          <View style={[styles.progressBar, { backgroundColor: withAlpha(finalLockedColor, 0.4) }, progressBarStyle]}>
+          <View style={[
+            styles.progressBar,
+            {
+              backgroundColor: withAlpha(finalLockedColor, 0.4),
+              marginTop: tokens.spacing.sm,
+              borderRadius: tokens.borders.radius.xs,
+            },
+            progressBarStyle
+          ]}>
             <View
               style={[
                 styles.progressFill,
-                { width: `${progress}%`, backgroundColor: accentColor },
+                {
+                  width: `${progress}%`,
+                  backgroundColor: accentColor,
+                  borderRadius: tokens.borders.radius.xs,
+                },
               ]}
             />
           </View>
@@ -89,8 +132,24 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
       </View>
 
       {isUnlocked && (
-        <View style={[styles.checkmark, { backgroundColor: finalUnlockedColor }]}>
-          <AtomicText style={[styles.checkmarkText, { color: tokens.colors.onPrimary }]}>✓</AtomicText>
+        <View style={[
+          styles.checkmark,
+          {
+            backgroundColor: finalUnlockedColor,
+            width: checkmarkSize,
+            height: checkmarkSize,
+            borderRadius: checkmarkSize / 2,
+          }
+        ]}>
+          <AtomicText style={[
+            styles.checkmarkText,
+            {
+              color: tokens.colors.onPrimary,
+              fontSize: checkmarkFontSize,
+            }
+          ]}>
+            ✓
+          </AtomicText>
         </View>
       )}
     </View>
@@ -101,15 +160,9 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
     alignItems: "center",
-    padding: 12,
-    borderRadius: 12,
     borderWidth: 1,
-    gap: 12,
   },
   iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -117,32 +170,21 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-    fontSize: 16,
     fontWeight: "600",
   },
-  description: {
-    fontSize: 13,
-    marginTop: 2,
-  },
+  description: {},
   progressBar: {
     height: 4,
-    borderRadius: 2,
-    marginTop: 8,
     overflow: "hidden",
   },
   progressFill: {
     height: "100%",
-    borderRadius: 2,
   },
   checkmark: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
     justifyContent: "center",
     alignItems: "center",
   },
   checkmarkText: {
-    fontSize: 14,
     fontWeight: "bold",
   },
 });

package/src/domains/gamification/components/GamificationScreen/GamificationScreenWithConfig.tsx

@@ -54,7 +54,6 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
     streakProps: {
       current: streak.current,
       longest: streak.longest,
-      currentLabel: config.translations.currentStreak,
       bestLabel: config.translations.bestStreak,
       daysLabel: config.translations.days,
     },
@@ -62,12 +61,12 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
       {
         label: config.translations.pointsLabel,
         value: points,
-        icon: "star",
+        icon: "⭐",
       },
       {
         label: config.translations.totalCompletedLabel,
         value: totalTasksCompleted,
-        icon: "checkmark-circle",
+        icon: "✅",
       },
     ],
     achievements: achievementItems,

package/src/domains/gamification/components/LevelProgress.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 
 export interface LevelProgressProps {
   level: number;
@@ -49,39 +49,99 @@ export const LevelProgress: React.FC<LevelProgressProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  
+  const { getFontSize, getIconSize } = useResponsive();
+
   const finalPrimaryColor = primaryColor || tokens.colors.primary;
   const finalSecondaryColor = secondaryColor || tokens.colors.surfaceSecondary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
+  const titleFontSize = getFontSize(18);
+  const subtitleFontSize = getFontSize(14);
+  const badgeSize = getIconSize(52);
+  const badgeFontSize = getFontSize(20);
+  const progressBarHeight = getFontSize(10);
+
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      <View style={styles.header}>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.lg,
+        padding: tokens.spacing.lg,
+      },
+      containerStyle
+    ]}>
+      <View style={[styles.header, { marginBottom: tokens.spacing.md }]}>
         <View style={styles.titleSection}>
-          <AtomicText style={[styles.levelTitle, { color: finalTextColor }, titleStyle]}>
+          <AtomicText style={[
+            styles.levelTitle,
+            {
+              color: finalTextColor,
+              fontSize: titleFontSize,
+            },
+            titleStyle
+          ]}>
             {levelTitle}
           </AtomicText>
           {showPoints && (
-            <AtomicText style={[styles.subtitle, { color: finalSubtextColor }, subtitleStyle]}>
+            <AtomicText style={[
+              styles.subtitle,
+              {
+                color: finalSubtextColor,
+                fontSize: subtitleFontSize,
+                marginTop: tokens.spacing.xs,
+              },
+              subtitleStyle
+            ]}>
               {points} / {points + pointsToNext}
             </AtomicText>
           )}
         </View>
 
-        <View style={[styles.badge, { backgroundColor: withAlpha(finalPrimaryColor, 0.2), borderColor: withAlpha(finalPrimaryColor, 0.4) }, badgeStyle]}>
-          <AtomicText style={[styles.badgeText, { color: finalPrimaryColor }, badgeTextStyle]}>
+        <View style={[
+          styles.badge,
+          {
+            backgroundColor: withAlpha(finalPrimaryColor, 0.2),
+            borderColor: withAlpha(finalPrimaryColor, 0.4),
+            width: badgeSize,
+            height: badgeSize,
+            borderRadius: badgeSize / 2,
+            borderWidth: 2,
+          },
+          badgeStyle
+        ]}>
+          <AtomicText style={[
+            styles.badgeText,
+            {
+              color: finalPrimaryColor,
+              fontSize: badgeFontSize,
+            },
+            badgeTextStyle
+          ]}>
             {level}
           </AtomicText>
         </View>
       </View>
 
-      <View style={[styles.progressBar, { backgroundColor: finalSecondaryColor }, progressBarStyle]}>
+      <View style={[
+        styles.progressBar,
+        {
+          backgroundColor: finalSecondaryColor,
+          height: progressBarHeight,
+          borderRadius: tokens.borders.radius.sm,
+        },
+        progressBarStyle
+      ]}>
         <View
           style={[
             styles.progressFill,
-            { width: `${Math.min(100, progress)}%`, backgroundColor: finalPrimaryColor },
+            {
+              width: `${Math.min(100, progress)}%`,
+              backgroundColor: finalPrimaryColor,
+              borderRadius: tokens.borders.radius.sm,
+            },
             progressFillStyle,
           ]}
         />
@@ -91,46 +151,30 @@ export const LevelProgress: React.FC<LevelProgressProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    padding: 16,
-  },
+  container: {},
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12,
   },
   titleSection: {
     flex: 1,
   },
   levelTitle: {
-    fontSize: 18,
     fontWeight: "700",
   },
-  subtitle: {
-    fontSize: 14,
-    marginTop: 2,
-  },
+  subtitle: {},
   badge: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
     justifyContent: "center",
     alignItems: "center",
-    borderWidth: 2,
   },
   badgeText: {
-    fontSize: 18,
     fontWeight: "bold",
   },
   progressBar: {
-    height: 8,
-    borderRadius: 4,
     overflow: "hidden",
   },
   progressFill: {
     height: "100%",
-    borderRadius: 4,
   },
 });

package/src/domains/gamification/components/PointsBadge.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 
 export interface PointsBadgeProps {
   points: number;
@@ -27,20 +27,28 @@ export const PointsBadge: React.FC<PointsBadgeProps> = ({
   borderColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const { getFontSize } = useResponsive();
   const finalTextColor = textColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || withAlpha(finalTextColor, 0.1);
   const finalBorderColor = borderColor || withAlpha(finalTextColor, 0.2);
+  const fontSize = getFontSize(16);
 
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor: finalBackgroundColor, borderColor: finalBorderColor },
+        {
+          backgroundColor: finalBackgroundColor,
+          borderColor: finalBorderColor,
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.xs,
+          borderRadius: tokens.borders.radius.full,
+        },
         containerStyle,
       ]}
     >
       {icon}
-      <AtomicText style={[styles.text, { color: finalTextColor }, textStyle]}>
+      <AtomicText style={[styles.text, { color: finalTextColor, fontSize }, textStyle]}>
         {points}
       </AtomicText>
     </View>
@@ -52,13 +60,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 20,
     borderWidth: 1,
   },
   text: {
-    fontSize: 16,
     fontWeight: "bold",
   },
 });

package/src/domains/gamification/components/StatsCard.tsx

@@ -1,16 +1,16 @@
 /**
- * StatsCard Component
- * Displays a stat with icon - all text via props
+ * StatsCard Component - Modern Design
+ * Clean card-based stat display with emoji icons
  */
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, useResponsive } from "@umituz/react-native-design-system";
 
 export interface StatsCardProps {
   value: number;
   label: string;
-  icon: React.ReactNode | string;
+  icon?: React.ReactNode | string;
   suffix?: string;
   containerStyle?: ViewStyle;
   valueStyle?: TextStyle;
@@ -31,35 +31,86 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   labelStyle,
   accentColor,
   backgroundColor,
-  textColor,
+  textColor: _textColor,
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  
+  const { getFontSize } = useResponsive();
+
   const finalAccentColor = accentColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
-  const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
-  const renderedIcon = typeof icon === 'string' ? (
-    <AtomicIcon name={icon} size="sm" customColor={finalAccentColor} />
-  ) : icon;
+  const valueFontSize = getFontSize(48);
+  const suffixFontSize = getFontSize(16);
+  const labelFontSize = getFontSize(12);
+  const emojiSize = getFontSize(32);
 
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      <View style={[styles.iconContainer, { backgroundColor: withAlpha(finalAccentColor, 0.15) }]}>
-        {renderedIcon}
-      </View>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.xl,
+        padding: tokens.spacing.xl,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 3,
+      },
+      containerStyle
+    ]}>
+      {/* Emoji Icon at Top */}
+      {icon && (
+        <AtomicText style={[
+          styles.emoji,
+          {
+            fontSize: emojiSize,
+            marginBottom: tokens.spacing.sm,
+          }
+        ]}>
+          {icon}
+        </AtomicText>
+      )}
+
+      {/* Large Value in Center */}
       <View style={styles.valueRow}>
-        <AtomicText style={[styles.value, { color: finalTextColor }, valueStyle]}>
+        <AtomicText style={[
+          styles.value,
+          {
+            color: finalAccentColor,
+            fontSize: valueFontSize,
+            lineHeight: valueFontSize + 8,
+          },
+          valueStyle
+        ]}>
           {value}
         </AtomicText>
         {suffix && (
-          <AtomicText style={[styles.suffix, { color: finalSubtextColor }]}>{suffix}</AtomicText>
+          <AtomicText style={[
+            styles.suffix,
+            {
+              color: finalSubtextColor,
+              fontSize: suffixFontSize,
+            }
+          ]}>
+            {suffix}
+          </AtomicText>
         )}
       </View>
-      <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
-        {label}
+
+      {/* Small Label Below */}
+      <AtomicText style={[
+        styles.label,
+        {
+          color: finalSubtextColor,
+          fontSize: labelFontSize,
+          marginTop: tokens.spacing.xs,
+        },
+        labelStyle
+      ]}>
+        {label.toUpperCase()}
       </AtomicText>
     </View>
   );
@@ -69,16 +120,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     minWidth: "45%",
-    borderRadius: 12,
-    padding: 12,
-  },
-  iconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
     alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 8,
+  },
+  emoji: {
+    textAlign: "center",
   },
   valueRow: {
     flexDirection: "row",
@@ -86,14 +131,16 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   value: {
-    fontSize: 24,
-    fontWeight: "bold",
+    fontWeight: "800",
+    letterSpacing: -1,
+    textAlign: "center",
   },
   suffix: {
-    fontSize: 12,
+    fontWeight: "600",
   },
   label: {
-    fontSize: 12,
-    marginTop: 2,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textAlign: "center",
   },
 });

package/src/domains/gamification/components/StreakDisplay.tsx

@@ -1,16 +1,15 @@
 /**
- * StreakDisplay Component
- * Displays streak information - all text via props
+ * StreakDisplay Component - Modern Design
+ * Clean card-based design with emoji icons
  */
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 
 export interface StreakDisplayProps {
   current: number;
   longest: number;
-  currentLabel: string;
   bestLabel: string;
   daysLabel: string;
   icon?: React.ReactNode | string;
@@ -26,51 +25,101 @@ export interface StreakDisplayProps {
 export const StreakDisplay: React.FC<StreakDisplayProps> = ({
   current,
   longest,
-  currentLabel,
   bestLabel,
   daysLabel,
-  icon,
   containerStyle,
   numberStyle,
   labelStyle,
   primaryColor,
   backgroundColor,
-  textColor,
+  textColor: _textColor,
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  
+  const { getFontSize } = useResponsive();
+
   const finalPrimaryColor = primaryColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
-  const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
-  const renderedIcon = typeof icon === 'string' ? (
-    <AtomicIcon name={icon} size="md" customColor={finalPrimaryColor} />
-  ) : icon || <AtomicIcon name="flame" size="md" customColor={finalPrimaryColor} />;
+  const streakNumberSize = getFontSize(48);
+  const streakLabelSize = getFontSize(13);
+  const bestNumberSize = getFontSize(20);
+  const bestLabelSize = getFontSize(11);
 
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      <View style={styles.mainStreak}>
-        <View style={styles.iconContainer}>{renderedIcon}</View>
-        <View style={styles.streakInfo}>
-          <AtomicText style={[styles.number, { color: finalPrimaryColor }, numberStyle]}>
-            {current}
-          </AtomicText>
-          <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
-            {daysLabel}
-          </AtomicText>
+    <View style={[
+      styles.container,
+      {
+        backgroundColor: finalBackgroundColor,
+        borderRadius: tokens.borders.radius.xl,
+        padding: tokens.spacing.xl,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 3,
+      },
+      containerStyle
+    ]}>
+      {/* Main Streak Section */}
+      <View style={styles.mainSection}>
+        <AtomicText style={styles.emoji}>🔥</AtomicText>
+        <View style={styles.streakNumbers}>
+          <View style={styles.currentStreak}>
+            <AtomicText style={[
+              styles.streakNumber,
+              {
+                color: finalPrimaryColor,
+                fontSize: streakNumberSize,
+                lineHeight: streakNumberSize + 8,
+              },
+              numberStyle
+            ]}>
+              {current}
+            </AtomicText>
+            <AtomicText style={[
+              styles.streakLabel,
+              {
+                color: finalSubtextColor,
+                fontSize: streakLabelSize,
+                marginTop: tokens.spacing.xs,
+              },
+              labelStyle
+            ]}>
+              {daysLabel.toUpperCase()}
+            </AtomicText>
+          </View>
         </View>
-        <AtomicText style={[styles.currentLabel, { color: finalTextColor }]}>
-          {currentLabel}
-        </AtomicText>
       </View>
 
-      <View style={[styles.bestStreak, { backgroundColor: withAlpha(finalPrimaryColor, 0.2) }]}>
-        <AtomicText style={[styles.bestLabel, { color: finalSubtextColor }]}>
-          {bestLabel}
+      {/* Best Streak Badge */}
+      <View style={[
+        styles.bestBadge,
+        {
+          backgroundColor: withAlpha(finalPrimaryColor, 0.12),
+          borderRadius: tokens.borders.radius.lg,
+          paddingHorizontal: tokens.spacing.md,
+          paddingVertical: tokens.spacing.md,
+        }
+      ]}>
+        <AtomicText style={[
+          styles.bestLabel,
+          {
+            color: finalSubtextColor,
+            fontSize: bestLabelSize,
+          }
+        ]}>
+          {bestLabel.toUpperCase()}
         </AtomicText>
-        <AtomicText style={[styles.bestNumber, { color: finalPrimaryColor }]}>
+        <AtomicText style={[
+          styles.bestNumber,
+          {
+            color: finalPrimaryColor,
+            fontSize: bestNumberSize,
+            marginTop: tokens.spacing.xs / 2,
+          }
+        ]}>
           {longest}
         </AtomicText>
       </View>
@@ -80,50 +129,42 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 16,
-    padding: 16,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
   },
-  mainStreak: {
+  mainSection: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    gap: 16,
+    flex: 1,
   },
-  iconContainer: {
-    width: 40,
-    height: 40,
-    justifyContent: "center",
-    alignItems: "center",
+  emoji: {
+    fontSize: 40,
   },
-  streakInfo: {
-    alignItems: "center",
+  streakNumbers: {
+    flex: 1,
   },
-  number: {
-    fontSize: 32,
-    fontWeight: "bold",
+  currentStreak: {
+    alignItems: "flex-start",
   },
-  label: {
-    fontSize: 12,
-    textTransform: "uppercase",
+  streakNumber: {
+    fontWeight: "800",
+    letterSpacing: -1,
   },
-  currentLabel: {
-    fontSize: 14,
-    fontWeight: "500",
+  streakLabel: {
+    fontWeight: "600",
+    letterSpacing: 0.5,
   },
-  bestStreak: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 12,
+  bestBadge: {
     alignItems: "center",
+    minWidth: 70,
   },
   bestLabel: {
-    fontSize: 11,
-    textTransform: "uppercase",
+    fontWeight: "700",
+    letterSpacing: 0.5,
   },
   bestNumber: {
-    fontSize: 18,
-    fontWeight: "bold",
+    fontWeight: "800",
   },
 });