themming and try to create awesome theme

src/screens/profile/Profile.tsx

@@ -16,12 +16,12 @@ import {
 import * as Keychain from "react-native-keychain";
 import { Ionicons } from "@react-native-vector-icons/ionicons";
 import { launchImageLibrary } from "react-native-image-picker";
-import { base_URL } from "../../utils/ApiUrls";
 import { CustomButton, CustomInput } from "../../components/common/Custom";
 import colors from "../../components/colors";
 import SwitchNavigator from "./SwitchNavigator";
 import { useFocusEffect } from "@react-navigation/native";
 import { ApiResponse } from "../home/UserProfileStatus";
+import { BASE_URL } from "../../utils/ApiUrls";
 
 
 
@@ -64,7 +64,7 @@ const Profile = () => {
 
       setFetching(true);
       const response = await fetch(
-        `${base_URL}user/profile/view`,
+        `${BASE_URL}user/profile/view`,
         {
           method: "GET",
           headers: {
@@ -98,7 +98,7 @@ const Profile = () => {
       const token = credentials.password;
 
       const response = await fetch(
-        `${base_URL}user/profile/update`,
+        `${BASE_URL}user/profile/update`,
         {
           method: "PUT",
           headers: {
@@ -169,7 +169,7 @@ const Profile = () => {
       } as any);
 
       const response = await fetch(
-        `${base_URL}user/update/userImg`,
+        `${BASE_URL}user/update/userImg`,
         {
           method: "PUT",
           headers: {
@@ -216,7 +216,7 @@ const Profile = () => {
 
       setLoading(true);
       setError(null);
-      const response = await fetch(`${base_URL}user/profile/status`, {
+      const response = await fetch(`${BASE_URL}user/profile/status`, {
         method: "GET",
         headers: {
           Accept: "*/*",
@@ -275,7 +275,7 @@ const Profile = () => {
 
   return (
     <View style={styles.container}>
-      <StatusBar backgroundColor="#6366f1" barStyle="light-content" />
+      <StatusBar barStyle="light-content" />
 
       {/* Header */}
       <View style={styles.header}>
@@ -298,7 +298,7 @@ const Profile = () => {
             {/* Profile Image Section */}
             {
               statusData?.role && statusData?.organizerStatus ?
-                <Text style={{ color: "#64748b", marginBottom: 16 , textAlign:'center', fontSize:18}}>Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}</Text>
+                <Text style={{ color: "#64748b", marginBottom: 16, textAlign: 'center', fontSize: 18 }}>Your Role: {statusData.role} | Organizer Status: {statusData.organizerStatus}</Text>
                 :
                 <SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />}
             <View style={styles.profileImageSection}>
@@ -481,7 +481,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.pastelBlue,
-    marginBottom: '30%',
+    paddingBottom: '30%',
   },
   loadingContainer: {
     flex: 1,
@@ -500,19 +500,19 @@ const styles = StyleSheet.create({
     alignItems: "center",
     padding: 16,
     paddingTop: 50,
-    backgroundColor: "#6366f1",
+    // backgroundColor: "#6366f1",
     borderBottomLeftRadius: 20,
     borderBottomRightRadius: 20,
-    elevation: 4,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
+    // elevation: 4,
+    // shadowColor: "#000",
+    // shadowOffset: { width: 0, height: 2 },
+    // shadowOpacity: 0.2,
+    // shadowRadius: 4,
   },
   headerTitle: {
     fontSize: 22,
     fontWeight: "700",
-    color: "#fff"
+    color: "#000"
   },
   refreshButton: {
     padding: 4,