fix(favoriteDoctor-Screen): Enhance UI and add dark theme

atlp-rwanda · Jun 6, 2024 · fd63998 · fd63998
1 parent 651efb4
commit fd63998
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 79 deletions.
diff --git a/app/(app)/ActionMenu/FavoriteDoctorScreen.tsx b/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,9 +18,12 @@ 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';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
 
 
 interface imageMapProp{
@@ -95,7 +98,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]}>
@@ -237,7 +241,7 @@ const styles = StyleSheet.create({
         alignItems: "center",
         width:"100%",
          marginBottom: "7%",
-        marginTop: "8%",
+        marginTop: "18%",
     },
     foundDoctorView: {
         width: "100%",

diff --git a/app/(app)/Appointments/MessagingAppointment/index.tsx b/app/(app)/Appointments/MessagingAppointment/index.tsx
@@ -38,6 +38,7 @@ interface PatientType{
 
 function AppointmentMessaging() {
   const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme("light")
   const ios = Platform.OS === "ios";
 
 

diff --git a/components/DoctorComponent.tsx b/components/DoctorComponent.tsx
@@ -13,16 +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)
     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 } />
@@ -40,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}>
@@ -201,9 +203,15 @@ const styles = StyleSheet.create({
     horizontal: {
         width: "100%",
         borderWidth: 1,
-        borderColor:"#EEEEEE",
         marginBottom: "5%",
-         backgroundColor:"#EEEEEE"
+    },
+    horizontalLight: {
+        borderColor:"#EEEEEE"
+
+    },
+    horizontalDark: {
+        borderColor:"#35383F"
+
     },
     reviewView: {
        display: "flex",

diff --git a/components/FilterSearchComponent.tsx b/components/FilterSearchComponent.tsx
@@ -10,6 +10,8 @@ import { overlay } from 'react-native-paper';
 import DoctorComponent from './DoctorComponent';
 import Ratebtn from './Ratebtn';
 import { Rating } from 'react-native-elements';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
 
 
 interface iconMappingProp{
@@ -30,6 +32,12 @@ export const iconMapping:iconMappingProp = {
 
 
 function FilterPopup({ visible, onClose, cancel, }: RemovefavoritepopProps) {
+    const { theme, changeTheme } = useContext(ThemeContext)
+    const outerBackgroundColor = theme === "dark" ? styles.viewDark : styles.viewLight
+    const titleColor = theme === "dark" ? styles.whiteTitle : styles.introColor
+    const horizontalColor = theme === 'dark' ? styles.darkHorizontal : styles.greyHorizontal
+    const resetButtonColor = theme === "dark" ? "#35383F" : "#E9F0FF"
+    const resetbtnTextColor = theme === "dark" ? "white" : "#246BFD"
      const [selectedCategory, setSelectedCategory] = useState(data.categories[0])
     const [showpopUp, setShowPopup] = useState(false)
     const [selectedDoctor, setSelectedDoctor] = useState()
@@ -60,14 +68,14 @@ function FilterPopup({ visible, onClose, cancel, }: RemovefavoritepopProps) {
     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}>Filter</Text></View>
-                    <View style={styles.horizontal}></View>
+        <Animated.View style={[styles.outer,outerBackgroundColor,{ transform: [{ translateY: translateY.interpolate({ inputRange: [-1, 1], outputRange: [0, 300] }) }] }]}>
+            <View style={[styles.inner,outerBackgroundColor]}>
+                    <View style={styles.intro}><Text style={[styles.introText,titleColor]}>Filter</Text></View>
+                    <View style={[styles.horizontal,horizontalColor]}></View>
                     <View style={styles.displayComponent}>
                         <View style={styles.specialityView}>
-                            <View style={styles.titleView}><Text style={styles.title}>Speciality</Text></View>
-                            <View style={styles.categoryBtnView}>
+                            <View style={styles.titleView}><Text style={[styles.title,titleColor]}>Speciality</Text></View>
+                            <View style={[styles.categoryBtnView,outerBackgroundColor]}>
                 <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
                     contentContainerStyle={{
                         flexDirection: "row",
@@ -92,8 +100,8 @@ function FilterPopup({ visible, onClose, cancel, }: RemovefavoritepopProps) {
 
                             </View>
                             <View style={styles.rateView}>
-                                <View style={styles.titleView}><Text style={styles.title}>Rating</Text></View>
-                                <View style={styles.categoryBtnView}>
+                                <View style={styles.titleView}><Text style={[styles.title,titleColor]}>Rating</Text></View>
+                                <View style={[styles.categoryBtnView,outerBackgroundColor]}>
                                     <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.categoryScroll}
                                         contentContainerStyle={{
                                             flexDirection: "row",
@@ -124,13 +132,13 @@ function FilterPopup({ visible, onClose, cancel, }: RemovefavoritepopProps) {
 
 
                     </View>
-                    <View style={styles.horizontal}></View>
+                    <View style={[styles.horizontal,horizontalColor]}></View>
                 <View style={styles.btnView}>
                     <Removebtn
                         action={cancel} 
-                        backColor="#E9F0FF"
+                        backColor={ resetButtonColor}
                         text="Reset"
-                        textColor="#246BFD"
+                        textColor={resetbtnTextColor}
 
                     />
                     <Removebtn
@@ -169,7 +177,6 @@ const styles = StyleSheet.create({
         width: "100%",
         height: "45%",
         zIndex:1000,
-        backgroundColor: 'white',
         borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
        shadowColor: '#000',
@@ -181,6 +188,13 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "center",    
     },
+    viewDark: {
+         backgroundColor: '#1F222A',
+
+    },
+    viewLight: {
+         backgroundColor: 'white',
+    },
     intro: {
         width: "100%",
         height: 40,
@@ -192,13 +206,17 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     introText: {
-        color: "#212121",
         fontWeight: "bold",
         fontSize:20
     },
+    whiteTitle: {
+        color:"white"
+    },
+    introColor: {
+        color: "#212121",
+    },
     inner: {  
         width: "90%",
-        backgroundColor:"white"
     },
     btn: {
         height: 50,
@@ -239,7 +257,6 @@ const styles = StyleSheet.create({
 
     },
     title: {
-        color: "#212121",
         fontWeight: "500",
         fontSize:18
 
@@ -271,12 +288,17 @@ 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"
     },
     categoryScroll: {
 

diff --git a/components/FoundDoctorCount.tsx b/components/FoundDoctorCount.tsx
@@ -3,19 +3,24 @@ import { StyleSheet, Text, Image, View, TouchableHighlight, SafeAreaView, Button
 import Typography from '@/constants/Typography';
 import { SvgXml } from "react-native-svg"
 import { defaultIcon } from '@/assets/icons/Defaulticon';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
 
 interface foundDoctorProps{
     count: number,
 
 }
 
 function FoundDoctorCount({ count }: foundDoctorProps) {
-    const foundText=count===0 ?"0 found":`${count} founds`
+    const foundText = count === 0 ? "0 found" :count===1?"1 found": `${count} founds`
+    const { theme, changeTheme } = useContext(ThemeContext)
+    const textColor=theme==="dark"?styles.countTextWhite:styles.countText
+
     return (
         <View style={styles.outer}>
             <View style={styles.leftView}>
                 <View style={styles.countView}>
-                    <Text style={styles.countText} >{foundText}</Text>
+                    <Text style={[styles.countText,textColor]} >{foundText}</Text>
 
                 </View>
 
@@ -66,6 +71,10 @@ const styles = StyleSheet.create({
     countView: {
 
 
+    },
+    countTextWhite: {
+        color:"white"
+
     },
     countText: {
         color: "#212121",

diff --git a/components/HeaderComponent.tsx b/components/HeaderComponent.tsx
@@ -11,6 +11,11 @@ import { useContext } from 'react';
 import { searchWhiteIcon } from '@/assets/icons/SearchWhiteIcon';
 import { LeftArrowWhite } from '@/assets/icons/LeftArrowWhite';
 import { moreWhiteIcon } from '@/assets/icons/MoreWhite';
+import { ThemeContext } from '@/ctx/ThemeContext';
+import { useContext } from 'react';
+import { searchWhiteIcon } from '@/assets/icons/SearchWhiteIcon';
+import { LeftArrowWhite } from '@/assets/icons/LeftArrowWhite';
+import { moreWhiteIcon } from '@/assets/icons/MoreWhite';
 
 interface Headerprops{
     onSearchPressed: () => void,
@@ -27,7 +32,7 @@ function HeaderComponent({ onSearchPressed, headerText }: Headerprops) {
     return (
         <View style={styles.upperInner}>
             <View style={styles.upperLeft}>
-                <Pressable onPress={()=>router.back()}>
+                <Pressable onPress={()=>router.back()} style={styles.leftArrowVIew}>
                     <SvgXml xml={leftArrowIcon} />
                 </Pressable>
                 <View style={styles.NotificationView}>
@@ -61,6 +66,14 @@ const styles = StyleSheet.create({
          marginBottom: "5%",
         marginTop: "12%",
     },
+    leftArrowVIew: {
+       height: "100%",
+        width:"12%",
+        display: "flex",
+        flexDirection:"row",
+        justifyContent: "center",
+        alignItems: "center",
+    },
     searchComponent: {
 
     },
@@ -74,9 +87,10 @@ const styles = StyleSheet.create({
     upperLeft: {
         display: "flex",
         flexDirection: "row",
+        alignItems:"center",
         justifyContent: 'space-between',
         width: "70%",
-        height:"100%",
+        height: "100%",
     },
     searchView: {
         display: "flex",

diff --git a/components/Icons/Icons.ts b/components/Icons/Icons.ts
@@ -67,7 +67,8 @@ export const line = `<svg width="370" height="1" viewBox="0 0 380 1" fill="none"
 export const lineTwo = `<svg width="370" height="1" viewBox="0 0 380 1" fill="none" xmlns="http://www.w3.org/2000/svg">
 <line y1="0.5" x2="380" y2="0.5" stroke="#BDBDBD"/>
 </svg>
-`;
+`
+;
 
 export const VideoCall = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.13156 5.25H13.889C16.7147 5.25 18.6875 7.19721 18.6875 9.98773V18.0123C18.6875 20.8028 16.7147 22.75 13.889 22.75H7.13156C4.30586 22.75 2.33301 20.8028 2.33301 18.0123V9.98773C2.33301 7.19721 4.30586 5.25 7.13156 5.25ZM23.284 8.02548C23.7962 7.76491 24.397 7.79215 24.8858 8.1001C25.3747 8.40687 25.6663 8.93986 25.6663 9.52261V18.4781C25.6663 19.062 25.3747 19.5938 24.8858 19.9006C24.6187 20.0676 24.32 20.1529 24.019 20.1529C23.7682 20.1529 23.5173 20.0937 23.2828 19.974L21.555 19.1023C20.9156 18.7778 20.519 18.1263 20.519 17.4026V10.5969C20.519 9.87201 20.9156 9.22058 21.555 8.89841L23.284 8.02548Z" fill="url(#paint0_linear_5927_3915)"/>