fix(favoriteDoctor-Screen):add dark theme to remove from favorite popUp

app/(app)/ActionMenu/FavoriteDoctorScreen.tsx

@@ -1,5 +1,5 @@
 import React,{ReactElement, useState} from 'react';
-import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, StatusBar, Dimensions,TextInput, ScrollView, Pressable} from 'react-native'
+import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button, Alert, Platform, Dimensions,TextInput, ScrollView, Pressable} from 'react-native'
 import { Feather } from '@expo/vector-icons';
 import { AntDesign } from '@expo/vector-icons';
 import { Ionicons } from '@expo/vector-icons';
@@ -18,6 +18,7 @@ import FoundDoctorCount from '@/components/FoundDoctorCount';
 import NofoundComponent from '@/components/NofoundComponent';
 import RemovefavoritePopup from '@/components/RemovefavoritePopup';
 import FilterPopup from '@/components/FilterSearchComponent';
+import { StatusBar } from 'expo-status-bar';
 import NotFoundScreen from '@/app/+not-found';
 import { ThemeContext } from '@/ctx/ThemeContext';
 import { useContext } from 'react';
@@ -70,7 +71,6 @@ function DoctorScreen() {
     const [selectedDoctor, setSelectedDoctor] = useState()
     const [showFilter, setShowfilter] = useState(false)
     const { theme, changeTheme } = useContext(ThemeContext)
-    changeTheme("dark")
     const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
     const scrollbackColor=theme === "dark" ? styles.scrollDark : styles.scrollLight
 
@@ -96,7 +96,8 @@ function DoctorScreen() {
 
     const filteredDoctors=searchTerm.length>0 ? selectedCategory.Doctors.filter(doctor=>doctor.name.toLowerCase().includes(searchTerm)):selectedCategory.Doctors
     return (
-        <SafeAreaView style={[styles.container,containerStyle]}>
+        <SafeAreaView style={[styles.container, containerStyle]}>
+           <StatusBar style={theme === "dark" ? "light" : "dark"} />
             <View>
 
                 <View style={[styles.upper,containerStyle]}>

components/DoctorComponent.tsx

@@ -13,17 +13,18 @@ interface DoctorComponentProps{
     star: ReactElement,
     rate: string,
     review: string,
-    remove:()=>void
+    remove: () => void,
+    backgroundStyle?:any
 }
-function DoctorComponent({ imageSource, name, iconComponent, professionalTitle, hospital, star, rate, review, remove }: DoctorComponentProps) {
+function DoctorComponent({ imageSource, name, iconComponent, professionalTitle, hospital, star, rate, review, remove,backgroundStyle }: DoctorComponentProps) {
     const { theme, changeTheme } = useContext(ThemeContext)
-    changeTheme("dark")
     const containerStyle = theme === "dark" ? styles.outerDark : styles.outerLight
     const nameColor = theme === "dark" ? styles.textDark : styles.textLight
     const descriptionColor = theme === "dark" ? styles.descriptionDark : styles.descriptionLight
+    const horizontalColor=theme==="dark"?styles.horizontalDark:styles.horizontalLight
 
     return (
-        <View style={[styles.outer,containerStyle]}>
+        <View style={[styles.outer,containerStyle,backgroundStyle]}>
             <View style={styles.inner}>
                 <View style={styles.profileView}>
                     <Image source={imageSource } />
@@ -41,7 +42,7 @@ function DoctorComponent({ imageSource, name, iconComponent, professionalTitle,
 
                         </Pressable>
                     </View>
-                    <View style={styles.horizontal}></View>
+                    <View style={[styles.horizontal,horizontalColor]}></View>
                     <View style={styles.lowerView}>
                         <View style={styles.professionalView}>
                             <View style={styles.proNameView}>

components/RemovefavoritePopup.tsx

@@ -7,6 +7,8 @@ import { star } from '@/assets/icons/star';
 import Removebtn from './Removebtn';
 import { overlay } from 'react-native-paper';
 import DoctorComponent from './DoctorComponent';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
 
 interface imageMapProp{
     [key:string]:ReturnType<typeof require>
@@ -37,6 +39,15 @@ const imageMap: imageMapProp = {
 
 
 function RemovefavoritePopup({ visible, onClose, cancel, doctor }: RemovefavoritepopProps) {
+    const { theme, changeTheme } = useContext(ThemeContext)
+    changeTheme("dark")
+    const viewBackgroundColor = theme === "dark" ? styles.viewDark : styles.viewLight
+    const titleColor = theme === "dark" ? styles.whiteTitle : styles.introColor
+    const horizontalColor = theme === 'dark' ? styles.darkHorizontal : styles.greyHorizontal
+    const cancelButtonColor = theme === "dark" ? "#35383F" : "#E9F0FF"
+    const cancelbtnTextColor = theme === "dark" ? "white" : "#246BFD"
+    const doctorComponenetColor = theme === "dark" ? "#181A20" : "white"
+    const componentViewColor=theme==="dark"?styles.componenetViewdark:styles.componentView
     const [showpopUp, setShowPopup] = useState(false)
     const [selectedDoctor,setSelectedDoctor]=useState()
      const handleRemove = (doctor:any) => {
@@ -63,13 +74,13 @@ function RemovefavoritePopup({ visible, onClose, cancel, doctor }: Removefavorit
     if(!visible) return null
     return (
         <SafeAreaView style={styles.overlay}>
-        <Animated.View style={[styles.outer,{ transform: [{ translateY: translateY.interpolate({ inputRange: [-1, 1], outputRange: [0, 300] }) }] }]}>
-            <View style={styles.inner}>
-                    <View style={styles.intro}><Text style={styles.introText}>Remove From Favorites?</Text></View>
-                    <View style={styles.horizontal}></View>
+        <Animated.View style={[styles.outer,viewBackgroundColor,{ transform: [{ translateY: translateY.interpolate({ inputRange: [-1, 1], outputRange: [0, 300] }) }] }]}>
+            <View style={[styles.inner,viewBackgroundColor]}>
+                    <View style={styles.intro}><Text style={[styles.introText,titleColor]}>Remove From Favorites?</Text></View>
+                    <View style={[styles.horizontal,horizontalColor]}></View>
                     <View style={styles.displayComponent}>
 
-                        <View  style={styles.componentView}>
+                        <View  style={[styles.componentView,componentViewColor]}>
                                         <DoctorComponent
 
                                             imageSource={imageMap[doctor.imageSource]}
@@ -80,17 +91,18 @@ function RemovefavoritePopup({ visible, onClose, cancel, doctor }: Removefavorit
                                             star={iconMapping[doctor.star]}
                                             review={doctor.review}
                                             rate={doctor.rate}
-                                            remove={()=>handleRemove(doctor)}
+                                          remove={() => handleRemove(doctor)}
+                                backgroundStyle={{backgroundColor: doctorComponenetColor }}
 
                                         />
                                     </View>
                 </View>
                 <View style={styles.btnView}>
                     <Removebtn
                         action={cancel} 
-                        backColor="#E9F0FF"
+                        backColor={cancelButtonColor}
                         text="Cancel"
-                        textColor="#246BFD"
+                        textColor={cancelbtnTextColor}
 
                     />
                     <Removebtn
@@ -124,12 +136,19 @@ const styles = StyleSheet.create({
         justifyContent: 'flex-end',
          zIndex: 1000,
 
+    },
+    viewDark: {
+        backgroundColor: '#1F222A',
+
+    },
+    viewLight: {
+         backgroundColor: '#FAFAFA',
+
     },
     outer: {
         width: "100%",
         height: "40%",
         zIndex:1000,
-        backgroundColor: '#FAFAFA',
         borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
        shadowColor: '#000',
@@ -152,14 +171,18 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: 'center',
     },
+    whiteTitle: {
+        color: "white", 
+    },
+    introColor: {
+         color: "#212121",  
+    },
     introText: {
-        color: "#212121",
         fontWeight: "bold",
         fontSize:20
     },
     inner: {  
         width: "90%",
-        backgroundColor:"#FAFAFA"
     },
     displayComponent: {
 
@@ -170,6 +193,10 @@ const styles = StyleSheet.create({
         justifyContent: "space-between",
         alignItems:'center'      
     },
+    componenetViewdark: {
+        backgroundColor:"#181A20"
+
+    },
     componentView: {
         backgroundColor:"#FDFDFD",
         marginBottom: "5%",
@@ -182,12 +209,25 @@ const styles = StyleSheet.create({
         alignItems: "center",
         zIndex:10000
     },
+    darkHorizontal: {
+        borderColor:"#35383E",    
+    },
+    greyHorizontal: {
+        borderColor:"#EEEEEE",
+
+    },
     horizontal: {
         width: "100%",
         borderWidth: 1,
-        borderColor:"#EEEEEE",
         marginBottom: "6%",
-         backgroundColor:"#EEEEEE"
+    },
+    btnDark: {
+        backgroundColor:"#35383F"
+
+    },
+    btnLight: {
+        backgroundColor:"#E9F0FF"
+
     }
 
 })