@umituz/react-native-settings 4.19.6 → 4.20.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.6",
+  "version": "4.20.1",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -58,28 +58,30 @@
     "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-community/datetimepicker": "^8.5.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@sentry/react-native": "^7.8.0",
     "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-filesystem": "^2.1.7",
-    "@umituz/react-native-firebase": "^1.13.28",
-    "@umituz/react-native-haptics": "^1.0.3",
+    "@umituz/react-native-filesystem": "latest",
+    "@umituz/react-native-firebase": "latest",
+    "@umituz/react-native-haptics": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-onboarding": "latest",
-    "@umituz/react-native-sentry": "^1.4.2",
+    "@umituz/react-native-sentry": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-tanstack": "latest",
-    "@umituz/react-native-uuid": "^1.2.2",
+    "@umituz/react-native-uuid": "latest",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-native": "^5.0.0",
     "expo-apple-authentication": "^8.0.8",
     "expo-application": "^7.0.8",
     "expo-clipboard": "^8.0.8",

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -8,7 +8,7 @@ import { AboutSettingItem } from './AboutSettingItem';
 import { AppInfo } from '../../domain/entities/AppInfo';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export interface AboutContentProps {
   /** App information to display */
@@ -18,7 +18,8 @@ export interface AboutContentProps {
 }
 
 const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -30,6 +31,8 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   appInfo,
   config,
 }) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const hasContactInfo = appInfo.developer || appInfo.contactEmail || appInfo.websiteUrl;
   const hasMoreInfo = appInfo.moreAppsUrl;
 
@@ -86,19 +89,19 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   content: {
-    paddingVertical: 8,
+    paddingVertical: 8 * tokens.spacingMultiplier,
   },
   section: {
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   sectionHeader: {
-    fontSize: 13,
+    fontSize: tokens.typography.labelSmall.responsiveFontSize,
     fontWeight: '600',
-    marginBottom: 8,
-    paddingHorizontal: 16,
+    marginBottom: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: 0.5 * tokens.spacingMultiplier,
   },
 });

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -26,7 +26,7 @@ export interface AboutHeaderProps {
   testID?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutHeader: React.FC<AboutHeaderProps> = ({
   appInfo,
@@ -37,7 +37,8 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   versionPrefix = "Version",
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -55,25 +56,25 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   header: {
     alignItems: 'center',
-    paddingVertical: 24,
-    paddingHorizontal: 16,
+    paddingVertical: 24 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     borderBottomWidth: 1,
   },
   appName: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineMedium.responsiveFontSize,
     fontWeight: 'bold',
-    marginBottom: 4,
+    marginBottom: 4 * tokens.spacingMultiplier,
   },
   version: {
-    fontSize: 16,
-    marginBottom: 8,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+    marginBottom: 8 * tokens.spacingMultiplier,
   },
   description: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     textAlign: 'center',
-    lineHeight: 20,
+    lineHeight: 20 * tokens.spacingMultiplier,
   },
 });

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -45,7 +45,7 @@ export interface AboutSettingItemProps {
   chevronColor?: string;
 }
 
-import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   icon,
@@ -63,7 +63,8 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   testID,
   chevronColor,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   // Memoize container type to prevent unnecessary re-renders
@@ -79,7 +80,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       disabled && styles.disabled,
       containerStyle
     ];
-  }, [disabled, containerStyle, colors.surface]);
+  }, [disabled, containerStyle, colors.surface, styles]);
 
   // Memoize icon container styles
   const iconContainerStyles = useMemo(() => {
@@ -87,7 +88,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.iconContainer,
       iconContainerStyle
     ];
-  }, [iconContainerStyle]);
+  }, [iconContainerStyle, styles]);
 
   // Memoize chevron styles
   const chevronStyles = useMemo(() => {
@@ -95,7 +96,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.chevron,
       { color: chevronColor || colors.textSecondary }
     ];
-  }, [chevronColor, colors.textSecondary]);
+  }, [chevronColor, colors.textSecondary, styles]);
 
   // Memoize press handler to prevent unnecessary re-renders
   const handlePress = useCallback(() => {
@@ -129,7 +130,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
         )}
       </View>
     );
-  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary]);
+  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary, styles]);
 
   // Memoize value rendering
   const renderValue = useMemo(() => {
@@ -140,7 +141,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
     return (
       <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>{value}</Text>
     );
-  }, [value, valueStyle, colors.textSecondary]);
+  }, [value, valueStyle, colors.textSecondary, styles]);
 
   // Memoize chevron rendering
   const renderChevron = useMemo(() => {
@@ -168,18 +169,18 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
+    paddingVertical: 12 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
   },
   disabled: {
     opacity: 0.5,
   },
   iconContainer: {
-    marginRight: 12,
+    marginRight: 12 * tokens.spacingMultiplier,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -187,22 +188,22 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     fontWeight: '500',
   },
   description: {
-    fontSize: 14,
-    marginTop: 2,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
+    marginTop: 2 * tokens.spacingMultiplier,
   },
   value: {
-    fontSize: 16,
-    marginRight: 8,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+    marginRight: 8 * tokens.spacingMultiplier,
     flexShrink: 1,
     textAlign: 'right',
     maxWidth: '60%',
   },
   chevron: {
-    fontSize: 20,
+    fontSize: 20 * tokens.spacingMultiplier,
     fontWeight: '300',
   },
 });

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -38,7 +38,7 @@ export interface AboutScreenProps {
 }
 
 import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useResponsiveDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export const AboutScreen: React.FC<AboutScreenProps> = ({
   config,
@@ -51,7 +51,8 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   footerComponent,
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   const { appInfo, loading, error } = useAboutInfo({
@@ -91,7 +92,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
         {footerComponent}
       </View>
     );
-  }, [footerComponent, colors.border]);
+  }, [footerComponent, colors.border, styles]);
 
   // Memoize content rendering
   const renderContent = useCallback(() => {
@@ -114,7 +115,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
       { backgroundColor: colors.backgroundPrimary },
       containerStyle
     ];
-  }, [containerStyle, colors.backgroundPrimary]);
+  }, [containerStyle, colors.backgroundPrimary, styles]);
 
   const texts = config.texts || {};
 
@@ -164,7 +165,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
     <ScrollView
       style={containerStyles}
       testID={testID}
-      contentContainerStyle={{ paddingBottom: 32 }}
+      contentContainerStyle={{ paddingBottom: 32 * tokens.spacingMultiplier }}
     >
       {renderHeader()}
       {renderContent()}
@@ -173,23 +174,23 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flex: 1,
   },
   footer: {
-    paddingVertical: 16,
-    paddingHorizontal: 16,
+    paddingVertical: 16 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     borderTopWidth: 1,
   },
   loadingText: {
     textAlign: 'center',
-    fontSize: 16,
-    marginTop: 20,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    marginTop: 20 * tokens.spacingMultiplier,
   },
   errorText: {
     textAlign: 'center',
-    fontSize: 16,
-    marginTop: 20,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    marginTop: 20 * tokens.spacingMultiplier,
   },
 });

package/src/domains/appearance/presentation/components/AppearanceHeader.tsx

@@ -59,9 +59,9 @@ export const AppearanceHeader: React.FC<AppearanceHeaderProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     header: {
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.sm,
+      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/AppearancePreview.tsx

@@ -106,35 +106,35 @@ export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     previewSection: {
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
     previewContainer: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12,
-      padding: tokens.spacing.md,
+      borderRadius: 12 * tokens.spacingMultiplier,
+      padding: tokens.spacing.md * tokens.spacingMultiplier,
       borderLeftWidth: 4,
       borderLeftColor: tokens.colors.primary,
     },
     previewColorRow: {
       flexDirection: "row",
       flexWrap: "wrap",
-      gap: tokens.spacing.md,
-      marginTop: tokens.spacing.sm,
+      gap: tokens.spacing.md * tokens.spacingMultiplier,
+      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
     },
     previewColorItem: {
       alignItems: "center",
     },
     previewColorCircle: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      marginBottom: tokens.spacing.xs,
+      width: 32 * tokens.spacingMultiplier,
+      height: 32 * tokens.spacingMultiplier,
+      borderRadius: 16 * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
       borderWidth: 1,
       borderColor: tokens.colors.border,
     },

package/src/domains/appearance/presentation/components/ColorPicker.tsx

@@ -10,7 +10,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
-  useResponsiveDesignTokens,
+  useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 
 interface ColorPickerProps {
@@ -26,7 +26,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   onValueChange,
   colors,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
 
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
@@ -84,7 +84,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       marginBottom: 16,

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -166,21 +166,21 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl,
+      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     sectionHeader: {
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "flex-start",
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
     titleContainer: {
       flex: 1,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -99,12 +99,12 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl,
+      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -8,7 +8,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { ThemeMode } from "../../types";
 
 interface ThemeOptionProps {
@@ -30,7 +30,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   isSelected,
   onSelect,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
   const iconName = mode === "dark" ? "moon-outline" : mode === "light" ? "sunny-outline" : "desktop-outline";
 
@@ -41,7 +41,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
     >
       <View style={styles.header}>
         <View style={styles.iconContainer}>
-          <AtomicIcon name={iconName} customSize={24} customColor={tokens.colors.primary} />
+          <AtomicIcon name={iconName} customSize={24 * tokens.spacingMultiplier} customColor={tokens.colors.primary} />
         </View>
         <View style={styles.textContainer}>
           <AtomicText type="titleLarge" color="primary">
@@ -53,7 +53,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
         </View>
         <AtomicIcon
           name={isSelected ? "checkmark-circle-outline" : "ellipse-outline"}
-          customSize={24}
+          customSize={24 * tokens.spacingMultiplier}
           customColor={isSelected ? tokens.colors.primary : tokens.colors.secondary}
         />
       </View>
@@ -89,13 +89,13 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12,
-      padding: 16,
-      marginBottom: 16,
+      borderRadius: 12 * tokens.spacingMultiplier,
+      padding: 16 * tokens.spacingMultiplier,
+      marginBottom: 16 * tokens.spacingMultiplier,
       borderWidth: 2,
       borderColor: tokens.colors.border,
     },
@@ -105,34 +105,34 @@ const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
     header: {
       flexDirection: "row",
       alignItems: "center",
-      marginBottom: 12,
+      marginBottom: 12 * tokens.spacingMultiplier,
     },
     iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
+      width: 48 * tokens.spacingMultiplier,
+      height: 48 * tokens.spacingMultiplier,
+      borderRadius: 24 * tokens.spacingMultiplier,
       backgroundColor: `${tokens.colors.primary}15`,
       justifyContent: "center",
       alignItems: "center",
-      marginRight: 12,
+      marginRight: 12 * tokens.spacingMultiplier,
     },
     textContainer: {
       flex: 1,
     },
     description: {
-      marginBottom: 12,
-      lineHeight: 20,
+      marginBottom: 12 * tokens.spacingMultiplier,
+      lineHeight: 20 * tokens.spacingMultiplier,
     },
     featuresContainer: {
       backgroundColor: `${tokens.colors.primary}08`,
-      borderRadius: 8,
-      padding: 12,
+      borderRadius: 8 * tokens.spacingMultiplier,
+      padding: 12 * tokens.spacingMultiplier,
     },
     featuresTitle: {
-      marginBottom: 8,
+      marginBottom: 8 * tokens.spacingMultiplier,
     },
     feature: {
-      marginBottom: 4,
-      lineHeight: 18,
+      marginBottom: 4 * tokens.spacingMultiplier,
+      lineHeight: 18 * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -7,7 +7,7 @@
 
 import React, { useMemo, useCallback } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
   AppearanceHeader,
@@ -63,7 +63,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   containerStyle,
   contentContainerStyle,
 }) => {
-  const tokens = useResponsiveDesignTokens();
+  const tokens = useAppDesignTokens();
   const { themeMode } = useAppearance();
   const {
     localCustomColors,
@@ -211,7 +211,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       flex: 1,
@@ -221,7 +221,7 @@ const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.md,
-      paddingBottom: tokens.spacing.xl,
+      padding: tokens.spacing.md * tokens.spacingMultiplier,
+      paddingBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
   });