@umituz/react-native-settings 4.20.0 → 4.20.1

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -38,9 +38,9 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
         () =>
             StyleSheet.create({
                 container: {
-                    marginHorizontal: tokens.spacing.md,
-                    marginBottom: tokens.spacing.sm,
-                    borderRadius: 20,
+                    marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+                    borderRadius: 20 * tokens.spacingMultiplier,
                     backgroundColor: tokens.colors.surface,
                     borderWidth: 1,
                     borderColor: isExpanded ? tokens.colors.primary : tokens.colors.border,
@@ -49,26 +49,26 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                 header: {
                     flexDirection: 'row',
                     alignItems: 'center',
-                    padding: tokens.spacing.lg,
+                    padding: tokens.spacing.lg * tokens.spacingMultiplier,
                 },
                 content: {
                     flex: 1,
-                    marginRight: tokens.spacing.md,
+                    marginRight: tokens.spacing.md * tokens.spacingMultiplier,
                 },
                 questionText: {
                     fontWeight: '700',
                 },
                 answerContainer: {
-                    paddingHorizontal: tokens.spacing.lg,
-                    paddingBottom: tokens.spacing.lg,
+                    paddingHorizontal: tokens.spacing.lg * tokens.spacingMultiplier,
+                    paddingBottom: tokens.spacing.lg * tokens.spacingMultiplier,
                     borderTopWidth: 1,
                     borderTopColor: tokens.colors.borderLight,
                     backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
                 },
                 iconContainer: {
-                    width: 36,
-                    height: 36,
-                    borderRadius: 18,
+                    width: 36 * tokens.spacingMultiplier,
+                    height: 36 * tokens.spacingMultiplier,
+                    borderRadius: 18 * tokens.spacingMultiplier,
                     backgroundColor: isExpanded ? tokens.colors.primary : tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -107,7 +107,7 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                     <AtomicText
                         type="bodyMedium"
                         color="textSecondary"
-                        style={[{ lineHeight: 22 }, customStyles?.answerStyle]}
+                        style={[{ lineHeight: 22 * tokens.spacingMultiplier }, customStyles?.answerStyle]}
                     >
                         {item.answer}
                     </AtomicText>

package/src/domains/faqs/presentation/components/FAQSearchBar.tsx

@@ -35,19 +35,19 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
                     flexDirection: 'row',
                     alignItems: 'center',
                     backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
-                    borderRadius: 16,
-                    paddingHorizontal: tokens.spacing.md,
+                    borderRadius: 16 * tokens.spacingMultiplier,
+                    paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
                     borderWidth: 1,
                     borderColor: tokens.colors.borderLight,
-                    height: 48,
+                    height: 48 * tokens.spacingMultiplier,
                 },
                 iconContainer: {
-                    marginRight: tokens.spacing.sm,
+                    marginRight: tokens.spacing.sm * tokens.spacingMultiplier,
                 },
                 input: {
                     flex: 1,
                     height: '100%',
-                    fontSize: 16,
+                    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
                     color: tokens.colors.textPrimary,
                 },
             }),
@@ -57,7 +57,7 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     return (
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.iconContainer}>
-                <AtomicIcon name="search" size={18} color="textSecondary" />
+                <AtomicIcon name="search" size="md" color="textSecondary" />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -58,7 +58,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           flex: 1,
         },
         header: {
-          padding: tokens.spacing.md,
+          padding: tokens.spacing.md * tokens.spacingMultiplier,
         },
         content: {
           flex: 1,
@@ -84,7 +84,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           <AtomicText
             type="headlineMedium"
             color="textPrimary"
-            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
+            style={{ marginBottom: tokens.spacing.md * tokens.spacingMultiplier, fontWeight: '700' }}
           >
             {headerTitle}
           </AtomicText>
@@ -98,7 +98,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
 
         <ScrollView
           style={[styles.content, customStyles?.content]}
-          contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
+          contentContainerStyle={{ paddingVertical: tokens.spacing.md * tokens.spacingMultiplier }}
           showsVerticalScrollIndicator={false}
         >
           {filteredCategories.map((category) => (
@@ -110,7 +110,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
               styles={customStyles?.category}
             />
           ))}
-          <View style={{ height: tokens.spacing.xl * 2 }} />
+          <View style={{ height: tokens.spacing.xl * 2 * tokens.spacingMultiplier }} />
         </ScrollView>
       </View>
     );

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -30,6 +30,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     isSubmitting = false,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
     const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");
@@ -48,7 +49,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
 
     const renderRating = () => (
         <View style={styles.ratingContainer}>
-            <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
+            <AtomicText type="bodyMedium" style={{ marginBottom: 8 * tokens.spacingMultiplier, color: tokens.colors.textSecondary }}>
                 {texts.ratingLabel}
             </AtomicText>
             <View style={styles.stars}>
@@ -60,7 +61,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                     >
                         <AtomicIcon
                             name={star <= rating ? "star" : "star-outline"}
-                            customSize={32}
+                            customSize={32 * tokens.spacingMultiplier}
                             customColor={star <= rating ? tokens.colors.warning : tokens.colors.border}
                         />
                     </TouchableOpacity>
@@ -142,46 +143,47 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     container: {
         width: "100%",
     },
     typeContainer: {
-        marginBottom: 24,
+        marginBottom: 24 * tokens.spacingMultiplier,
     },
     typeScroll: {
-        gap: 8,
+        gap: 8 * tokens.spacingMultiplier,
     },
     typeButton: {
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 20,
+        paddingHorizontal: 16 * tokens.spacingMultiplier,
+        paddingVertical: 8 * tokens.spacingMultiplier,
+        borderRadius: 20 * tokens.spacingMultiplier,
         borderWidth: 1,
-        gap: 6,
+        gap: 6 * tokens.spacingMultiplier,
     },
     ratingContainer: {
         alignItems: "center",
-        marginBottom: 24,
+        marginBottom: 24 * tokens.spacingMultiplier,
     },
     stars: {
         flexDirection: "row",
-        gap: 8,
+        gap: 8 * tokens.spacingMultiplier,
     },
     starButton: {
-        padding: 4,
+        padding: 4 * tokens.spacingMultiplier,
     },
     inputContainer: {
-        marginBottom: 24,
+        marginBottom: 24 * tokens.spacingMultiplier,
     },
     textArea: {
         textAlignVertical: "top",
-        minHeight: 120,
+        minHeight: 120 * tokens.spacingMultiplier,
         borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
-        fontSize: 16,
+        borderRadius: 8 * tokens.spacingMultiplier,
+        padding: 12 * tokens.spacingMultiplier,
+        fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     submitButton: {
         width: "100%",

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -32,6 +32,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     texts,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
 
     return (
         <BaseModal visible={visible} onClose={onClose}>
@@ -46,7 +47,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
                                 {title}
                             </AtomicText>
                             {subtitle && (
-                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
+                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 * tokens.spacingMultiplier }}>
                                     {subtitle}
                                 </AtomicText>
                             )}
@@ -77,7 +78,8 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 };
 
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     safeArea: {
         flex: 1,
     },
@@ -88,20 +90,20 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        padding: 16,
+        padding: 16 * tokens.spacingMultiplier,
         borderBottomWidth: 1,
     },
     headerText: {
         flex: 1,
     },
     closeButton: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
+        width: 36 * tokens.spacingMultiplier,
+        height: 36 * tokens.spacingMultiplier,
+        borderRadius: 18 * tokens.spacingMultiplier,
         justifyContent: "center",
         alignItems: "center",
     },
     content: {
-        padding: 20,
+        padding: 20 * tokens.spacingMultiplier,
     },
 });

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -220,18 +220,18 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
 const createLegalScreenStyles = (tokens: DesignTokens) => {
   return StyleSheet.create({
     header: {
-      paddingBottom: tokens.spacing.lg,
-      paddingTop: tokens.spacing.md,
+      paddingBottom: tokens.spacing.lg * tokens.spacingMultiplier,
+      paddingTop: tokens.spacing.md * tokens.spacingMultiplier,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.xs,
+      marginTop: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     section: {
-      marginTop: tokens.spacing.md,
+      marginTop: tokens.spacing.md * tokens.spacingMultiplier,
     },
     sectionHeader: {
-      marginBottom: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
+      marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -71,12 +71,13 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'PrivacyPolicyScreen',
-      'privacy-policy-styles',
-      createPrivacyPolicyStyles
+      cacheKey,
+      () => createPrivacyPolicyStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,34 +171,36 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   );
 });
 
-const createPrivacyPolicyStyles = () => {
+const createPrivacyPolicyStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24,
+      marginBottom: 24 * tokens.spacingMultiplier,
     },
     text: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32,
+      marginTop: 32 * tokens.spacingMultiplier,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16,
+      marginBottom: 16 * tokens.spacingMultiplier,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8,
+      marginTop: 8 * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -71,12 +71,13 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'TermsOfServiceScreen',
-      'terms-of-service-styles',
-      createTermsOfServiceStyles
+      cacheKey,
+      () => createTermsOfServiceStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,34 +171,36 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   );
 });
 
-const createTermsOfServiceStyles = () => {
+const createTermsOfServiceStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
     },
     scrollContent: {
       flexGrow: 1,
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
     content: {
       flex: 1,
     },
     title: {
-      marginBottom: 24,
+      marginBottom: 24 * tokens.spacingMultiplier,
     },
     text: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
-      marginTop: 32,
+      marginTop: 32 * tokens.spacingMultiplier,
       alignItems: "center",
     },
     urlText: {
-      marginBottom: 16,
+      marginBottom: 16 * tokens.spacingMultiplier,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
-      marginTop: 8,
+      marginTop: 8 * tokens.spacingMultiplier,
     },
   });
 };

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -24,10 +24,14 @@ export const StarRating: React.FC<StarRatingProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
     const [internalRating, setInternalRating] = useState(rating);
 
     const filledColor = activeColor || tokens.colors.warning || "#FFD700";
     const emptyColor = inactiveColor || tokens.colors.border || "#E0E0E0";
+    
+    // Scale the size
+    const responsiveSize = size * tokens.spacingMultiplier;
 
     const handlePress = (index: number) => {
         if (disabled) return;
@@ -48,7 +52,7 @@ export const StarRating: React.FC<StarRatingProps> = ({
                 >
                     <AtomicIcon
                         name={index < (onRatingChange ? internalRating : rating) ? "star" : "star-outline"}
-                        customSize={size}
+                        customSize={responsiveSize}
                         customColor={index < (onRatingChange ? internalRating : rating) ? filledColor : emptyColor}
                     />
                 </TouchableOpacity>
@@ -57,13 +61,14 @@ export const StarRating: React.FC<StarRatingProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
-        gap: 4,
+        gap: 4 * tokens.spacingMultiplier,
     },
     starContainer: {
-        padding: 4,
+        padding: 4 * tokens.spacingMultiplier,
     },
 });

package/src/domains/video-tutorials/index.ts

@@ -4,5 +4,6 @@
 
 export * from "./types";
 export * from "./presentation/screens/VideoTutorialsScreen";
+export * from "./presentation/components/VideoTutorialCard";
 export * from "./presentation/hooks";
 export * from "./infrastructure/services/video-tutorial.service";

package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -20,6 +20,7 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   horizontal = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -107,16 +108,17 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   container: {
-    borderRadius: 12,
+    borderRadius: 12 * tokens.spacingMultiplier,
     borderWidth: 1,
-    marginBottom: 12,
+    marginBottom: 12 * tokens.spacingMultiplier,
     overflow: "hidden",
   },
   horizontalContainer: {
-    width: 280,
-    marginRight: 12,
+    width: 280 * tokens.spacingMultiplier,
+    marginRight: 12 * tokens.spacingMultiplier,
     marginBottom: 0,
   },
   imageContainer: {
@@ -124,56 +126,56 @@ const styles = StyleSheet.create({
   },
   thumbnail: {
     width: "100%",
-    height: 180,
+    height: 180 * tokens.spacingMultiplier,
   },
   horizontalThumbnail: {
-    height: 140,
+    height: 140 * tokens.spacingMultiplier,
   },
   durationBadge: {
     position: "absolute",
-    bottom: 8,
-    right: 8,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
+    bottom: 8 * tokens.spacingMultiplier,
+    right: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 6 * tokens.spacingMultiplier,
+    paddingVertical: 2 * tokens.spacingMultiplier,
+    borderRadius: 4 * tokens.spacingMultiplier,
   },
   durationText: {
     color: "white",
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     fontWeight: "500",
   },
   featuredBadge: {
     position: "absolute",
-    top: 8,
-    left: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
+    top: 8 * tokens.spacingMultiplier,
+    left: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 8 * tokens.spacingMultiplier,
+    paddingVertical: 4 * tokens.spacingMultiplier,
+    borderRadius: 4 * tokens.spacingMultiplier,
   },
   featuredText: {
-    fontSize: 11,
+    fontSize: 11 * tokens.spacingMultiplier,
     fontWeight: "600",
   },
   content: {
-    padding: 12,
+    padding: 12 * tokens.spacingMultiplier,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.titleMedium.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 6,
+    marginBottom: 6 * tokens.spacingMultiplier,
   },
   horizontalTitle: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 8,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    lineHeight: 20 * tokens.spacingMultiplier,
+    marginBottom: 8 * tokens.spacingMultiplier,
   },
   horizontalDescription: {
-    fontSize: 12,
-    lineHeight: 16,
-    marginBottom: 6,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
+    lineHeight: 16 * tokens.spacingMultiplier,
+    marginBottom: 6 * tokens.spacingMultiplier,
   },
   metadata: {
     flexDirection: "row",
@@ -181,11 +183,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   category: {
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
   difficulty: {
-    fontSize: 12,
+    fontSize: 12 * tokens.spacingMultiplier,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
 });

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -68,6 +68,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
       customFeaturedTutorials,
     }) => {
       const tokens = useAppDesignTokens();
+      const styles = getStyles(tokens);
 
       const featuredQuery = useFeaturedTutorials(maxFeaturedCount);
       const allQuery = useVideoTutorials();
@@ -169,30 +170,31 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
     },
   );
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   title: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineLarge.responsiveFontSize,
     fontWeight: "600",
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   section: {
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   sectionTitle: {
-    fontSize: 18,
+    fontSize: tokens.typography.titleLarge.responsiveFontSize,
     fontWeight: "500",
-    marginBottom: 12,
+    marginBottom: 12 * tokens.spacingMultiplier,
   },
   horizontalList: {
-    paddingRight: 16,
+    paddingRight: 16 * tokens.spacingMultiplier,
   },
   verticalList: {
-    paddingBottom: 16,
+    paddingBottom: 16 * tokens.spacingMultiplier,
   },
   errorContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 20,
+    padding: 20 * tokens.spacingMultiplier,
   },
 });