@umituz/react-native-settings 4.19.6 → 4.20.1

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -78,38 +78,38 @@ export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      marginHorizontal: tokens.spacing.md,
-      marginTop: 8,
-      marginBottom: 8,
-      borderRadius: 12,
+      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+      paddingVertical: tokens.spacing.md * tokens.spacingMultiplier,
+      marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+      marginTop: 8 * tokens.spacingMultiplier,
+      marginBottom: 8 * tokens.spacingMultiplier,
+      borderRadius: 12 * tokens.spacingMultiplier,
     },
 
     headerRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginBottom: 12,
+      marginBottom: 12 * tokens.spacingMultiplier,
     },
 
     iconContainer: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
+      width: 40 * tokens.spacingMultiplier,
+      height: 40 * tokens.spacingMultiplier,
+      borderRadius: 20 * tokens.spacingMultiplier,
       alignItems: 'center',
       justifyContent: 'center',
-      marginRight: 12,
+      marginRight: 12 * tokens.spacingMultiplier,
     },
 
     title: {
       flex: 1,
       fontWeight: tokens.typography.labelLarge.fontWeight as any,
-      fontSize: tokens.typography.labelLarge.fontSize,
+      fontSize: tokens.typography.labelLarge.responsiveFontSize,
     },
 
     shortMessage: {
-      lineHeight: 18,
-      paddingLeft: 52, // Align with title (40px icon + 12px margin)
-      fontSize: 13,
+      lineHeight: 18 * tokens.spacingMultiplier,
+      paddingLeft: 52 * tokens.spacingMultiplier, // Align with title (40px icon + 12px margin)
+      fontSize: 13 * tokens.spacingMultiplier, // Or tokens.typography.bodySmall.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -81,8 +81,8 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 20,
-      paddingVertical: 16,
+      paddingHorizontal: 20 * tokens.spacingMultiplier,
+      paddingVertical: 16 * tokens.spacingMultiplier,
       borderBottomWidth: 1,
     },
 
@@ -91,11 +91,11 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
 
     modalContentContainer: {
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
 
     modalText: {
-      lineHeight: 24,
-      fontSize: 15,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: 15 * tokens.spacingMultiplier, // or tokens.typography.bodyMedium.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -68,7 +68,7 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
               },
             ]}
           >
-            <AtomicIcon name={iconName as any} color="warning" size="lg" />
+            <AtomicIcon name={iconName as any} color="warning" size="xl" />
           </View>
         </View>
 
@@ -95,27 +95,27 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.lg,
-      paddingTop: tokens.spacing.xl,
+      padding: tokens.spacing.lg * tokens.spacingMultiplier,
+      paddingTop: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     iconHeader: {
       alignItems: 'center',
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     iconContainer: {
-      width: 72,
-      height: 72,
-      borderRadius: 36,
+      width: 72 * tokens.spacingMultiplier,
+      height: 72 * tokens.spacingMultiplier,
+      borderRadius: 36 * tokens.spacingMultiplier,
       alignItems: 'center',
       justifyContent: 'center',
       borderWidth: 2,
     },
     title: {
       textAlign: 'center',
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     content: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
       textAlign: 'left',
     },
   });

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 import { FAQCategory as FAQCategoryType } from '../../domain/entities/FAQEntity';
 import { FAQItemComponent, FAQItemStyles } from './FAQItem';
 
@@ -29,18 +29,26 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
     onToggleItem,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    marginBottom: tokens.spacing.lg,
+                    marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
                 },
                 titleContainer: {
-                    marginBottom: tokens.spacing.md,
-                    paddingHorizontal: tokens.spacing.md,
+                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+                    paddingHorizontal: tokens.spacing.lg * tokens.spacingMultiplier,
+                    flexDirection: 'row',
+                    alignItems: 'center',
                 },
+                titleLine: {
+                    flex: 1,
+                    height: 1,
+                    backgroundColor: tokens.colors.border,
+                    marginLeft: tokens.spacing.md * tokens.spacingMultiplier,
+                }
             }),
         [tokens]
     );
@@ -49,12 +57,13 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.titleContainer}>
                 <AtomicText
-                    type="headlineSmall"
-                    color="textPrimary"
-                    style={customStyles?.titleStyle}
+                    type="labelLarge"
+                    color="textSecondary"
+                    style={[{ textTransform: 'uppercase', letterSpacing: 1, fontWeight: '700' }, customStyles?.titleStyle]}
                 >
                     {category.title}
                 </AtomicText>
+                <View style={styles.titleLine} />
             </View>
             {category.items.map((item, index) => (
                 <FAQItemComponent

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export interface FAQEmptyStateStyles {
     container?: ViewStyle;
@@ -28,7 +28,7 @@ export const FAQEmptyState: React.FC<FAQEmptyStateProps> = ({
     icon = '❓',
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { FAQItem as FAQItemType } from '../../domain/entities/FAQEntity';
 
 export interface FAQItemStyles {
@@ -32,36 +32,49 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
     onToggle,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    marginHorizontal: tokens.spacing.md,
-                    marginBottom: tokens.spacing.xs,
-                    borderRadius: 12,
+                    marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+                    borderRadius: 20 * tokens.spacingMultiplier,
                     backgroundColor: tokens.colors.surface,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: isExpanded ? tokens.colors.primary : tokens.colors.border,
+                    overflow: 'hidden',
                 },
                 header: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    padding: tokens.spacing.md,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: tokens.spacing.lg * tokens.spacingMultiplier,
                 },
                 content: {
                     flex: 1,
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.md * tokens.spacingMultiplier,
+                },
+                questionText: {
+                    fontWeight: '700',
                 },
                 answerContainer: {
-                    paddingHorizontal: tokens.spacing.md,
-                    paddingBottom: tokens.spacing.md,
+                    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 * 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',
                 },
             }),
-        [tokens]
+        [tokens, isExpanded]
     );
 
     return (
@@ -69,22 +82,24 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
             <TouchableOpacity
                 onPress={onToggle}
                 style={[styles.header, customStyles?.header]}
-                activeOpacity={0.7}
+                activeOpacity={0.8}
             >
                 <View style={[styles.content, customStyles?.content]}>
                     <AtomicText
                         type="bodyLarge"
-                        color="textPrimary"
-                        style={customStyles?.questionStyle}
-                        numberOfLines={isExpanded ? undefined : 2}
+                        color={isExpanded ? "primary" : "textPrimary"}
+                        style={[styles.questionText, customStyles?.questionStyle]}
                     >
                         {item.question}
                     </AtomicText>
                 </View>
-                <AtomicIcon
-                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                    size={20}
-                />
+                <View style={styles.iconContainer}>
+                    <AtomicIcon
+                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                        size={20}
+                        color={isExpanded ? "onPrimary" : "textSecondary"}
+                    />
+                </View>
             </TouchableOpacity>
 
             {isExpanded && (
@@ -92,7 +107,7 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
                     <AtomicText
                         type="bodyMedium"
                         color="textSecondary"
-                        style={customStyles?.answerStyle}
+                        style={[{ lineHeight: 22 * tokens.spacingMultiplier }, customStyles?.answerStyle]}
                     >
                         {item.answer}
                     </AtomicText>

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

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicIcon } from '@umituz/react-native-design-system';
 
 export interface FAQSearchBarStyles {
     container?: ViewStyle;
@@ -26,27 +26,28 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     placeholder,
     styles: customStyles,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    const tokens = useAppDesignTokens();
 
     const styles = useMemo(
         () =>
             StyleSheet.create({
                 container: {
-                    flexDirection: 'row' as const,
-                    alignItems: 'center' as const,
-                    backgroundColor: tokens.colors.surface,
-                    borderRadius: 12,
-                    paddingHorizontal: tokens.spacing.sm,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: tokens.colors.surfaceSecondary || tokens.colors.backgroundSecondary,
+                    borderRadius: 16 * tokens.spacingMultiplier,
+                    paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
                     borderWidth: 1,
-                    borderColor: tokens.colors.border,
+                    borderColor: tokens.colors.borderLight,
+                    height: 48 * tokens.spacingMultiplier,
                 },
                 iconContainer: {
-                    marginRight: tokens.spacing.xs,
+                    marginRight: tokens.spacing.sm * tokens.spacingMultiplier,
                 },
                 input: {
                     flex: 1,
-                    paddingVertical: tokens.spacing.sm,
-                    fontSize: 16,
+                    height: '100%',
+                    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
                     color: tokens.colors.textPrimary,
                 },
             }),
@@ -56,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} />
+                <AtomicIcon name="search" size="md" color="textSecondary" />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}

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

@@ -5,8 +5,8 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { useResponsiveDesignTokens, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,9 +45,10 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
-  const tokens = useResponsiveDesignTokens();
-  const { searchQuery, setSearchQuery, filteredCategories, hasResults } =
-    useFAQSearch(categories);
+  const tokens = useAppDesignTokens();
+  const { width: windowWidth } = useWindowDimensions();
+  const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
+  const { searchQuery, setSearchQuery, filteredCategories, hasResults } = useFAQSearch(categories);
   const { isExpanded, toggleExpansion } = useFAQExpansion();
 
   const styles = useMemo(
@@ -55,12 +56,9 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
       StyleSheet.create({
         container: {
           flex: 1,
-          backgroundColor: tokens.colors.backgroundPrimary,
         },
         header: {
-          padding: tokens.spacing.md,
-          borderBottomWidth: 1,
-          borderBottomColor: tokens.colors.border,
+          padding: tokens.spacing.md * tokens.spacingMultiplier,
         },
         content: {
           flex: 1,
@@ -81,12 +79,13 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     }
 
     return (
-      <ScrollView
-        style={[styles.content, customStyles?.content]}
-        showsVerticalScrollIndicator={false}
-      >
+      <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText type="headlineMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.sm }}>
+          <AtomicText
+            type="headlineMedium"
+            color="textPrimary"
+            style={{ marginBottom: tokens.spacing.md * tokens.spacingMultiplier, fontWeight: '700' }}
+          >
             {headerTitle}
           </AtomicText>
           <FAQSearchBar
@@ -97,30 +96,41 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
           />
         </View>
 
-        {filteredCategories.map((category) => (
-          <FAQCategoryComponent
-            key={category.id}
-            category={category}
-            isExpanded={isExpanded}
-            onToggleItem={toggleExpansion}
-            styles={customStyles?.category}
-          />
-        ))}
-      </ScrollView>
+        <ScrollView
+          style={[styles.content, customStyles?.content]}
+          contentContainerStyle={{ paddingVertical: tokens.spacing.md * tokens.spacingMultiplier }}
+          showsVerticalScrollIndicator={false}
+        >
+          {filteredCategories.map((category) => (
+            <FAQCategoryComponent
+              key={category.id}
+              category={category}
+              isExpanded={isExpanded}
+              onToggleItem={toggleExpansion}
+              styles={customStyles?.category}
+            />
+          ))}
+          <View style={{ height: tokens.spacing.xl * 2 * tokens.spacingMultiplier }} />
+        </ScrollView>
+      </View>
     );
   };
 
   if (renderHeader) {
     return (
-      <View style={[styles.container, customStyles?.container]}>
-        {renderHeader({ onBack: onBack || (() => { }) })}
-        {renderContent()}
+      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+        <View style={[styles.container, customStyles?.container]}>
+          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+            {renderHeader({ onBack: onBack || (() => { }) })}
+          </View>
+          {renderContent()}
+        </View>
       </View>
     );
   }
 
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout edges={['bottom']} scrollable={false} maxWidth={contentMaxWidth}>
       <View style={[styles.container, customStyles?.container]}>
         {renderContent()}
       </View>

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

@@ -5,7 +5,7 @@
 
 import React, { useState } from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
-import { useResponsiveDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { useFeedbackForm } from "../hooks/useFeedbackForm";
 
@@ -29,7 +29,8 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     initialType,
     isSubmitting = false,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    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

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
@@ -31,7 +31,8 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     subtitle,
     texts,
 }) => {
-    const tokens = useResponsiveDesignTokens();
+    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,
     },
 });