From 303c1ce88381f04f6806f954d1b10e1c2a7c85c3 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Sat, 3 May 2025 19:57:17 +0530
Subject: [PATCH] Refactor LogoSourceSettings layout and styling for improved
 usability

Adjust the layout and styling of the LogoSourceSettings component to enhance visual consistency and user experience. Changes include updated padding, margins, and font sizes for various elements, as well as the introduction of a new content container style for better scroll performance. These refinements aim to create a more cohesive and user-friendly interface.
---
 src/screens/LogoSourceSettings.tsx | 58 +++++++++++++++---------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/screens/LogoSourceSettings.tsx b/src/screens/LogoSourceSettings.tsx
index f3d67dff..7f51efcf 100644
--- a/src/screens/LogoSourceSettings.tsx
+++ b/src/screens/LogoSourceSettings.tsx
@@ -460,7 +460,7 @@ const LogoSourceSettings = () => {
         <StatusBar barStyle="light-content" />
         
         {/* Header */}
-        <View style={[styles.header, { paddingTop: Platform.OS === 'android' ? insets.top : 0 }]}>
+        <View style={styles.header}>
           <TouchableOpacity 
             onPress={handleBack}
             style={styles.backButton}
@@ -469,11 +469,11 @@ const LogoSourceSettings = () => {
             <MaterialIcons name="arrow-back" size={24} color={colors.white} />
           </TouchableOpacity>
           <Text style={styles.headerTitle}>Logo Source</Text>
-          <View style={styles.headerRight} />
         </View>
         
         <ScrollView 
           style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={true}
           scrollEventThrottle={32}
           decelerationRate="normal"
@@ -638,46 +638,46 @@ const LogoSourceSettings = () => {
     header: {
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 12,
-      height: 48,
-      backgroundColor: colors.elevation2,
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 16 : 16,
+      backgroundColor: colors.darkBackground,
     },
     backButton: {
-      width: 36,
-      height: 36,
-      alignItems: 'center',
-      justifyContent: 'center',
+      padding: 4,
     },
     headerTitle: {
-      color: colors.white,
-      fontSize: 18,
+      fontSize: 22,
       fontWeight: '600',
+      marginLeft: 16,
+      color: colors.white,
     },
     headerRight: {
-      width: 36,
+      width: 24,
     },
     scrollView: {
       flex: 1,
     },
+    scrollContent: {
+      paddingHorizontal: 16,
+      paddingBottom: 24,
+    },
     descriptionContainer: {
-      padding: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: 'rgba(255,255,255,0.1)',
+      marginBottom: 16,
     },
     description: {
-      color: colors.text,
-      fontSize: 14,
-      lineHeight: 20,
+      color: colors.mediumEmphasis,
+      fontSize: 15,
+      lineHeight: 22,
     },
     showSelectorContainer: {
-      padding: 12,
-      paddingBottom: 6,
+      marginBottom: 16,
     },
     selectorLabel: {
-      color: colors.text,
-      fontSize: 14,
-      marginBottom: 8,
+      color: colors.highEmphasis,
+      fontSize: 16,
+      fontWeight: '500',
+      marginBottom: 12,
     },
     showsScrollContent: {
       paddingRight: 16,
@@ -714,8 +714,8 @@ const LogoSourceSettings = () => {
       fontWeight: '600',
     },
     optionsContainer: {
-      padding: 10,
-      gap: 10,
+      marginBottom: 16,
+      gap: 12,
     },
     optionCard: {
       backgroundColor: colors.elevation2,
@@ -772,10 +772,10 @@ const LogoSourceSettings = () => {
       alignItems: 'center',
     },
     infoBox: {
-      margin: 10,
-      padding: 10,
+      marginBottom: 16,
+      padding: 12,
       backgroundColor: 'rgba(255,255,255,0.05)',
-      borderRadius: 6,
+      borderRadius: 8,
       borderLeftWidth: 3,
       borderLeftColor: colors.primary,
     },