@umituz/react-native-settings 4.23.131 → 4.23.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.131",
+  "version": "4.23.133",
   "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/StatsCard.tsx

@@ -1,11 +1,11 @@
 /**
  * StatsCard Component - Modern Design
- * Clean card-based stat display with emoji icons
+ * Clean card-based stat display with large emoji icons
  */
 
 import React from "react";
 import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
-import { useAppDesignTokens, AtomicText, useResponsive } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, useResponsive, withAlpha } from "@umituz/react-native-design-system";
 
 export interface StatsCardProps {
   value: number;
@@ -35,7 +35,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  const { getFontSize } = useResponsive();
+  const { getFontSize, getIconSize } = useResponsive();
 
   const finalAccentColor = accentColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
@@ -44,7 +44,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   const valueFontSize = getFontSize(48);
   const suffixFontSize = getFontSize(16);
   const labelFontSize = getFontSize(12);
-  const emojiSize = getFontSize(32);
+  const iconSize = getIconSize(56);
 
   return (
     <View style={[
@@ -61,17 +61,27 @@ export const StatsCard: React.FC<StatsCardProps> = ({
       },
       containerStyle
     ]}>
-      {/* Emoji Icon at Top */}
+      {/* Emoji Icon in Circle */}
       {icon && (
-        <AtomicText style={[
-          styles.emoji,
+        <View style={[
+          styles.iconContainer,
           {
-            fontSize: emojiSize,
-            marginBottom: tokens.spacing.sm,
+            width: iconSize,
+            height: iconSize,
+            backgroundColor: withAlpha(finalAccentColor, 0.15),
+            borderRadius: iconSize / 2,
+            marginBottom: tokens.spacing.md,
           }
         ]}>
-          {icon}
-        </AtomicText>
+          <AtomicText style={[
+            styles.emoji,
+            {
+              fontSize: iconSize * 0.55,
+            }
+          ]}>
+            {icon}
+          </AtomicText>
+        </View>
       )}
 
       {/* Large Value in Center */}
@@ -122,6 +132,10 @@ const styles = StyleSheet.create({
     minWidth: "45%",
     alignItems: "center",
   },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
   emoji: {
     textAlign: "center",
   },

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

@@ -1,6 +1,6 @@
 /**
  * StreakDisplay Component - Modern Design
- * Clean card-based design with emoji icons
+ * Clean card-based design with gradient fire icon
  */
 
 import React from "react";
@@ -36,7 +36,7 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
   subtextColor,
 }) => {
   const tokens = useAppDesignTokens();
-  const { getFontSize } = useResponsive();
+  const { getFontSize, getIconSize } = useResponsive();
 
   const finalPrimaryColor = primaryColor || tokens.colors.primary;
   const finalBackgroundColor = backgroundColor || tokens.colors.surface;
@@ -46,6 +46,7 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
   const streakLabelSize = getFontSize(13);
   const bestNumberSize = getFontSize(20);
   const bestLabelSize = getFontSize(11);
+  const iconSize = getIconSize(48);
 
   return (
     <View style={[
@@ -64,7 +65,24 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
     ]}>
       {/* Main Streak Section */}
       <View style={styles.mainSection}>
-        <AtomicText style={styles.emoji}>🔥</AtomicText>
+        {/* Fire Icon */}
+        <View style={[
+          styles.fireIcon,
+          {
+            width: iconSize,
+            height: iconSize,
+            backgroundColor: withAlpha(finalPrimaryColor, 0.15),
+            borderRadius: iconSize / 2,
+          }
+        ]}>
+          <AtomicText style={[
+            styles.fireEmoji,
+            { fontSize: iconSize * 0.6 }
+          ]}>
+            🔥
+          </AtomicText>
+        </View>
+
         <View style={styles.streakNumbers}>
           <View style={styles.currentStreak}>
             <AtomicText style={[
@@ -139,8 +157,12 @@ const styles = StyleSheet.create({
     gap: 16,
     flex: 1,
   },
-  emoji: {
-    fontSize: 40,
+  fireIcon: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  fireEmoji: {
+    textAlign: "center",
   },
   streakNumbers: {
     flex: 1,

package/src/domains/localization/scripts/translate-missing.js

@@ -19,6 +19,11 @@ async function translateMissing(targetDir, srcDir) {
 
   // Integrated Workflow: Ensure setup and sync
   const skipSync = process.argv.includes('--no-sync');
+  const forceRetranslate = process.argv.includes('--force');
+
+  if (forceRetranslate) {
+    console.log('⚠️  Force re-translation mode enabled. All keys will be re-translated.\n');
+  }
 
   if (!fs.existsSync(path.join(localesDir, 'index.ts'))) {
     console.log('🔄 Initializing localization setup...');
@@ -48,28 +53,28 @@ async function translateMissing(targetDir, srcDir) {
     if (!targetLang || targetLang === 'en') continue;
 
     console.log(`🌍 Translating ${langCode} (${langName})...`);
-    
+
     const targetPath = path.join(localesDir, file);
     const target = parseTypeScriptFile(targetPath);
-    
+
     const stats = { count: 0, checked: 0, translatedKeys: [] };
-    await translateObject(enUS, target, targetLang, '', stats);
-    
+    await translateObject(enUS, target, targetLang, '', stats, { forceRetranslate });
+
     // Clear progress line
     process.stdout.write('\r' + ' '.repeat(80) + '\r');
 
     if (stats.count > 0) {
       const content = generateTypeScriptContent(target, langCode);
       fs.writeFileSync(targetPath, content);
-      
+
       console.log(`      ✅ Successfully translated ${stats.count} keys:`);
-      
+
       // Detailed logging of translated keys
       const displayCount = Math.min(stats.translatedKeys.length, 15);
       stats.translatedKeys.slice(0, displayCount).forEach(item => {
         console.log(`         • ${item.key}: "${item.from}" → "${item.to}"`);
       });
-      
+
       if (stats.translatedKeys.length > displayCount) {
         console.log(`         ... and ${stats.translatedKeys.length - displayCount} more.`);
       }

package/src/domains/localization/scripts/utils/translator.js

@@ -32,7 +32,7 @@ async function translateText(text, targetLang) {
   }
 }
 
-function needsTranslation(value, enValue) {
+function needsTranslation(value, enValue, forceRetranslate = false) {
   if (typeof enValue !== 'string' || !enValue.trim()) return false;
   if (shouldSkipWord(enValue)) return false;
 
@@ -49,13 +49,25 @@ function needsTranslation(value, enValue) {
     return !isSingleWord;
   }
 
+  // Force re-translation if flag is set
+  if (forceRetranslate) return true;
+
+  // Detect outdated template patterns (e.g., {{appName}}, {{variable}})
+  if (value && typeof value === 'string') {
+    const hasTemplatePattern = value.includes('{{') && value.includes('}}');
+    if (hasTemplatePattern && !enValue.includes('{{')) {
+      return true;
+    }
+  }
+
   return false;
 }
 
-export async function translateObject(enObj, targetObj, targetLang, path = '', stats = { count: 0, checked: 0, translatedKeys: [] }) {
+export async function translateObject(enObj, targetObj, targetLang, path = '', stats = { count: 0, checked: 0, translatedKeys: [] }, options = {}) {
   const keys = Object.keys(enObj);
-  
+
   if (!stats.translatedKeys) stats.translatedKeys = [];
+  const { forceRetranslate = false } = options;
 
   for (const key of keys) {
     const enValue = enObj[key];
@@ -64,13 +76,13 @@ export async function translateObject(enObj, targetObj, targetLang, path = '', s
 
     if (typeof enValue === 'object' && enValue !== null) {
       if (!targetObj[key] || typeof targetObj[key] !== 'object') targetObj[key] = {};
-      await translateObject(enValue, targetObj[key], targetLang, currentPath, stats);
+      await translateObject(enValue, targetObj[key], targetLang, currentPath, stats, options);
     } else if (typeof enValue === 'string') {
       stats.checked++;
-      if (needsTranslation(targetValue, enValue)) {
+      if (needsTranslation(targetValue, enValue, forceRetranslate)) {
         // Show progress for translations
         process.stdout.write(`   \r      Progress: ${stats.checked} keys checked, ${stats.count} translated...`);
-        
+
         const translated = await translateText(enValue, targetLang);
         if (translated !== enValue) {
           targetObj[key] = translated;