currect edit profile button

src/screens/SplashScreen.tsx

@@ -21,7 +21,7 @@ const SplashScreen = () => {
     try {
       const credentials = await Keychain.getGenericPassword();
       if (!credentials) {
-        Alert.alert("Error", "You are not logged in");
+        // Alert.alert("Error", "You are not logged in");
         return;
       }
       const token = credentials.password;

src/screens/home/UserProfileStatus.tsx

@@ -11,6 +11,7 @@ import {
 import * as Keychain from "react-native-keychain";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { BASE_URL } from "../../utils/ApiUrls";
+import colors from "../../components/colors";
 
 export type ApiResponse = {
     message: string;
@@ -136,13 +137,14 @@ const UserProfileStatus: React.FC = () => {
 
                             <TouchableOpacity
                                 style={[styles.button, { backgroundColor: "#ccc", marginTop: 8 }]}
-                                onPress={() => {     if (intervalId) {
-            clearInterval(intervalId);
-            setIntervalId(null);
-        }
+                                onPress={() => {
+                                    if (intervalId) {
+                                        clearInterval(intervalId);
+                                        setIntervalId(null);
+                                    }
 
-        setShowModal(false);
-    }}
+                                    setShowModal(false);
+                                }}
                             >
                                 <Text style={[styles.buttonText, { color: "#333" }]}>Close</Text>
                             </TouchableOpacity>
@@ -221,7 +223,7 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: "700",
         marginBottom: 10,
-        color: "#FF9500",
+        color: colors.primary,
     },
     modalText: {
         fontSize: 14,

src/screens/profile/BecomeOrg.tsx

@@ -9,12 +9,17 @@ import {
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
+  TouchableOpacity,
 } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { CustomInput, CustomButton } from "../../components/common/Custom";
 import colors from "../../components/colors";
+import { useNavigation } from "@react-navigation/native";
+import AppView from "../../components/AppView";
+import Ionicons from "@react-native-vector-icons/ionicons";
 
 const BecomeOrg = () => {
+  const navigation = useNavigation<any>();
   const [bankAccountNumber, setBankAccountNumber] = useState("");
   const [bankName, setBankName] = useState("");
   const [branchCode, setBranchCode] = useState("");
@@ -58,6 +63,7 @@ const BecomeOrg = () => {
         setBankAccountNumber("");
         setBankName("");
         setBranchCode("");
+        navigation.navigate("Home" as never);
       } else {
         Alert.alert("Error", result.message || "Failed to apply");
       }
@@ -70,7 +76,14 @@ const BecomeOrg = () => {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: colors.pastelPink }}>
+    <AppView barStyle="dark-content">
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.replace("Home" as never)} >
+          <Ionicons name="arrow-back" size={24} color={'#000'} />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>User Profile</Text>
+
+      </View>
       <KeyboardAvoidingView
         style={{ flex: 1 }}
         behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -121,7 +134,7 @@ const BecomeOrg = () => {
           )}
         </ScrollView>
       </KeyboardAvoidingView>
-    </SafeAreaView>
+    </AppView>
   );
 };
 
@@ -140,4 +153,17 @@ const styles = StyleSheet.create({
     textAlign: "center",
     color: colors.textDark,
   },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+  },
+  headerTitle: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: "#000"
+  },
 });

src/screens/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback} from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   StyleSheet,
   View,
@@ -243,35 +243,35 @@ const Profile = () => {
     }
   };
 
- const logout = async (navigation: any) => {
-  try {
-    const credentials = await Keychain.getGenericPassword();
+  const logout = async (navigation: any) => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
 
-    if (!credentials) {
-      Alert.alert("Info", "No user is currently logged in");
-      return;
+      if (!credentials) {
+        Alert.alert("Info", "No user is currently logged in");
+        return;
+      }
+
+      // Clear stored credentials
+      await Keychain.resetGenericPassword();
+      Alert.alert("Success", "You have been logged out");
+      navigation.replace("Login");
+    } catch (error) {
+      console.error("Logout error:", error);
+      Alert.alert("Error", "Failed to log out. Please try again.");
     }
+  };
 
-    // Clear stored credentials
-    await Keychain.resetGenericPassword();
-    Alert.alert("Success", "You have been logged out");
-    navigation.replace("Login");
-  } catch (error) {
-    console.error("Logout error:", error);
-    Alert.alert("Error", "Failed to log out. Please try again.");
-  }
-};
-
- const confirmLogout = (navigation: any) => {
-  Alert.alert(
-    "Logout",
-    "Are you sure you want to log out?",
-    [
-      { text: "Cancel", style: "cancel" },
-      { text: "Yes, Logout", style: "destructive", onPress: () => logout(navigation) },
-    ]
-  );
-};
+  const confirmLogout = (navigation: any) => {
+    Alert.alert(
+      "Logout",
+      "Are you sure you want to log out?",
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Yes, Logout", style: "destructive", onPress: () => logout(navigation) },
+      ]
+    );
+  };
 
 
   useFocusEffect(
@@ -281,7 +281,7 @@ const Profile = () => {
   );
 
   useEffect(() => {
-          userStatus();
+    userStatus();
     fetchUserProfile();
   }, []);
 
@@ -316,7 +316,7 @@ const Profile = () => {
         </TouchableOpacity>
       </View>
       <KeyboardAvoidingView
-        style={{ flex: 1 }}
+        // style={{ flex: 1 }}
         behavior={Platform.OS === "ios" ? "padding" : undefined}
       >
         <ScrollView
@@ -327,11 +327,11 @@ const Profile = () => {
           {/* Profile Card */}
           <View style={styles.profileCard}>
             {/* 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>
-                :
-                <SwitchNavigator role={statusData?.role || ''} status={statusData?.organizerStatus || ''} />} */}
+            { user?.role === "ORGANIZER" && user?.organizerStatus === "NOT_APPLIED" || "PENDING" ? (
+              <Text style={{ color: "#64748b", marginBottom: 16, textAlign: 'center', fontSize: 18 }}>Your Role: {user.role} | Organizer Status: {user.organizerStatus}</Text>
+            ) : (
+              <SwitchNavigator role={user?.role || ''} status={user?.organizerStatus === "NOT_APPLIED"  ? '' : user?.organizerStatus || ''} />
+            )}
             <View style={styles.profileImageSection}>
               <View style={styles.avatarContainer}>
                 <Image
@@ -358,12 +358,25 @@ const Profile = () => {
               <>
                 {/* Profile Details */}
                 <View style={styles.detailsSection}>
-                  <Text style={styles.sectionTitle}>Personal Information</Text>
-                  <View style={{ marginBottom: 16 }}>
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <View>
+                      <Text style={styles.sectionTitle}>Personal Information</Text>
+                      <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
+                      {/* <View style={{ marginBottom: 16 }}>
 
-                    <Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
+                        
+                      </View> */}
+                    </View>
+                    <View>
+                      <CustomButton
+                        title="Edit Profile"
+                        onPress={() => setEditing(true)}
+                        icon="create"
+                        style={styles.editButton}
+                        buttonBackground={colors.pastelBlue}
+                      />
+                    </View>
                   </View>
-
                   <View style={styles.detailRow}>
                     <Ionicons name="person" size={20} color={colors.pastelBlue} style={styles.detailIcon} />
                     <View>
@@ -419,15 +432,11 @@ const Profile = () => {
                       <Text style={styles.detailText}>{user.role || "User"}</Text>
                     </View>
                   </View>
-                </View>
 
-                <CustomButton
-                  title="Edit Profile"
-                  onPress={() => setEditing(true)}
-                  icon="create"
-                  style={styles.editButton}
-                  buttonBackground={colors.pastelBlue}
-                />
+
+
+
+                </View>
               </>
             ) : (
               <>
@@ -482,22 +491,24 @@ const Profile = () => {
                     onChangeText={(text) => setUser({ ...user, gender: text })}
                     icon="male-female"
                   />
-                </View>
-                <View style={styles.editButtons}>
-                  <CustomButton
-                    title="Save Changes"
-                    onPress={updateProfile}
-                    icon="save"
-                    style={styles.saveButton}
-                    buttonBackground="#10b981"
-                  />
-                  <CustomButton
-                    title="Cancel"
-                    onPress={() => setEditing(false)}
-                    icon="close"
-                    style={styles.cancelButton}
-                    buttonBackground="#f38080ff"
-                  />
+
+                  <View style={styles.editButtons}>
+                    <CustomButton
+                      title="Save Changes"
+                      onPress={updateProfile}
+                      icon="save"
+                      style={styles.saveButton}
+                      buttonBackground={colors.pastelBlue}
+                    />
+                    <CustomButton
+                      title="Cancel"
+                      onPress={() => setEditing(false)}
+                      icon="close"
+                      style={styles.cancelButton}
+                      buttonBackground=""
+                    />
+                  </View>
+
                 </View>
               </>
             )}
@@ -530,15 +541,8 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     padding: 16,
-    // paddingTop: 50,
-    // backgroundColor: "#6366f1",
     borderBottomLeftRadius: 20,
     borderBottomRightRadius: 20,
-    // elevation: 4,
-    // shadowColor: "#000",
-    // shadowOffset: { width: 0, height: 2 },
-    // shadowOpacity: 0.2,
-    // shadowRadius: 4,
   },
   headerTitle: {
     fontSize: 22,
@@ -598,13 +602,13 @@ const styles = StyleSheet.create({
     borderRadius: 25,
   },
   detailsSection: {
-    marginBottom: 24,
+    marginBottom: "40%",
   },
   sectionTitle: {
     fontSize: 18,
     fontWeight: "700",
     color: "#1e293b",
-    marginBottom: 16,
+    // marginBottom: 16,
     paddingBottom: 8,
     borderBottomWidth: 1,
     borderBottomColor: "#f1f5f9",
@@ -629,10 +633,10 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   editButton: {
-    marginTop: 8,
+    paddingHorizontal: 8,
   },
   editSection: {
-    marginBottom: 20,
+    marginBottom: '40%',
     flex: 1,
   },
   editButtons: {
@@ -643,6 +647,8 @@ const styles = StyleSheet.create({
   },
   cancelButton: {
     marginTop: 4,
+    borderWidth: 1,
+    borderColor: "#cbd5e1",
   },
   inputContainer: {
     marginBottom: 16,

src/screens/profile/SwitchNavigator.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { View, Text, StyleSheet, Switch } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import colors from "../../components/colors";
 
 type RootStackParamList = {
   BecomeOrg: undefined;
@@ -24,6 +25,10 @@ const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
 
     if (newValue) {
       navigation.navigate("BecomeOrg"); // Navigate when ON
+      setTimeout(() => {
+       setIsEnabled(false);  
+      }, 2000);
+      // Reset switch to OFF after navigation
     } else {
       navigation.navigate("Profile"); // Navigate when OFF
     }
@@ -40,8 +45,8 @@ const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
           : `Request Organizer Role ${status}`}
       </Text>
       <Switch
-        trackColor={{ false: "#767577", true: "#81b0ff" }}
-        thumbColor={isEnabled ? "#007AFF" : "#f4f3f4"}
+        trackColor={{ false: "#767577", true: colors.textLight }}
+        thumbColor={isEnabled ? colors.pastelBlue : "#f4f3f4"}
         ios_backgroundColor="#3e3e3e"
         onValueChange={toggleSwitch}
         value={isEnabled}