@umituz/react-native-settings 1.8.2 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/SettingItem.tsx

@@ -49,6 +49,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
+  const spacing = tokens.spacing;
 
   return (
     <>
@@ -166,6 +167,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    marginLeft: 68,
+    marginLeft: 80,
   },
 });

package/src/presentation/components/SettingsSection.tsx

@@ -20,6 +20,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
+  const spacing = tokens.spacing;
 
   return (
     <View style={styles.container}>
@@ -40,18 +41,20 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginBottom: 24,
+    marginTop: 0,
+    marginBottom: 32,
   },
   title: {
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: "700",
     textTransform: "uppercase",
-    letterSpacing: 1,
+    letterSpacing: 1.2,
     paddingHorizontal: 16,
-    paddingBottom: 8,
+    paddingBottom: 12,
+    marginBottom: 0,
   },
   content: {
-    borderRadius: 12,
+    borderRadius: 16,
     marginHorizontal: 16,
     overflow: "hidden",
   },

package/src/presentation/components/UserProfileHeader.tsx

@@ -36,6 +36,7 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const tokens = useAppDesignTokens();
   const navigation = useNavigation();
   const colors = tokens.colors;
+  const spacing = tokens.spacing;
 
   const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
   const finalUserId = userId || "Unknown";
@@ -94,11 +95,12 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingHorizontal: 20,
+    paddingVertical: 20,
     marginHorizontal: 16,
     marginTop: 0,
-    borderRadius: 12,
+    marginBottom: 0,
+    borderRadius: 16,
     borderWidth: 1,
   },
   content: {
@@ -107,13 +109,13 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   avatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    borderWidth: 2,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    borderWidth: 2.5,
   },
   textContainer: {
-    marginLeft: 12,
+    marginLeft: 16,
     flex: 1,
   },
   name: {

package/src/presentation/screens/SettingsScreen.tsx

@@ -59,6 +59,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;
+  const spacing = tokens.spacing;
 
   const normalizedConfig = normalizeSettingsConfig(config);
   const features = useFeatureDetection(normalizedConfig, navigation);
@@ -79,21 +80,24 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
         contentContainerStyle={[
           styles.scrollContent,
           {
-            paddingTop: insets.top + 16,
-            paddingBottom: 100,
+            paddingTop: insets.top + spacing.md,
+            paddingBottom: spacing.xxxl + spacing.xl,
+            paddingHorizontal: 0,
           },
         ]}
         showsVerticalScrollIndicator={false}
       >
         {showUserProfile && (
-          <UserProfileHeader
-            displayName={userProfile?.displayName}
-            userId={userProfile?.userId}
-            isGuest={userProfile?.isGuest}
-            avatarUrl={userProfile?.avatarUrl}
-            accountSettingsRoute={userProfile?.accountSettingsRoute}
-            onPress={userProfile?.onPress}
-          />
+          <View style={styles.profileContainer}>
+            <UserProfileHeader
+              displayName={userProfile?.displayName}
+              userId={userProfile?.userId}
+              isGuest={userProfile?.isGuest}
+              avatarUrl={userProfile?.avatarUrl}
+              accountSettingsRoute={userProfile?.accountSettingsRoute}
+              onPress={userProfile?.onPress}
+            />
+          </View>
         )}
 
         {features.appearance && (
@@ -154,6 +158,10 @@ const styles = StyleSheet.create({
   scrollContent: {
     flexGrow: 1,
   },
+  profileContainer: {
+    marginBottom: 32,
+    paddingHorizontal: 0,
+  },
   emptyContainer: {
     paddingVertical: 24,
   },