currect edit profile button

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,