feat: update color scheme and styles across components for improved UI consistency

components/settings/SettingsSection.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { StyleSheet, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
+import { Colors } from "@/constants/Colors";
 
 interface SettingsSectionProps {
   children: React.ReactNode;
@@ -9,12 +10,7 @@ interface SettingsSectionProps {
   focusable?: boolean;
 }
 
-export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
-  children, 
-  onFocus, 
-  onBlur, 
-  focusable = false 
-}) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
@@ -28,20 +24,12 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   };
 
   if (!focusable) {
-    return (
-      <ThemedView style={styles.section}>
-        {children}
-      </ThemedView>
-    );
+    return <ThemedView style={styles.section}>{children}</ThemedView>;
   }
 
   return (
     <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable
-        style={styles.sectionPressable}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      >
+      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
         {children}
       </Pressable>
     </ThemedView>
@@ -57,10 +45,10 @@ const styles = StyleSheet.create({
     borderColor: "#333",
   },
   sectionFocused: {
-    borderColor: "#007AFF",
+    borderColor: Colors.dark.primary,
     backgroundColor: "#007AFF10",
   },
   sectionPressable: {
     width: "100%",
   },
-});
+});