Fix: Doctor search and filter screens styling (#55)

What does this PR do?

This Pr fixes some designs that were not responsive on all devices and
also add the modal to open when someone clicks on the filter icon on the
search input

**Tasks to be completed**

- [x] Fix the modal component to be responsive in all devices as in some
it was somehow not fitting the screen as intended
- [x] change the position where someone has to click to open the filter
modal

How to test this manually 

click on the fix filter modal on the first screen that appears and you
will be directed to the doctors found and click on the filter icon to
open the modal

Author: Adadie

app/(tabs)/index.tsx

@@ -116,12 +116,12 @@ const Home = () => {
         <Text className="text-[20px] font-['UrbanistBold']">Top Doctors</Text>
         <TouchableOpacity activeOpacity={0.8}>
 
-          <Text className="text-[16px] font-['Urbanist-Bold'] text-primary-500" onPress={() => {
-            router.push("/Doctors/topDoctors");
-          }}>
-            See All
-          </Text>
-        </TouchableOpacity>
+<Text className="text-[16px] font-['UrbanistBold'] text-lightblue" onPress={() => {
+  router.push("/Doctors/topDoctors");
+}}>
+  See All
+</Text>
+</TouchableOpacity>
       </View>
       <FlatList
         data={roleFilters}

app/Doctors/doctorsFound.tsx

@@ -1,30 +1,13 @@
 
 import DoctorCard from "../../components/cards/doctCard";
 import { NavigationHeader } from "@/components/NavigationHeader";
-import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import DocButton from "../../components/cards/DocButtons";
-import ReviewButtons from "../../components/cards/ReviewButtons";
 import React, { useState } from "react";
-import { StyleSheet, View, Image, TouchableOpacity, Text, ScrollView, Modal } from "react-native";
-import { useFonts } from "expo-font";
+import { View, Image, Text, ScrollView } from "react-native";
 import { SearchInput } from "../../components/searchinput2";
-
 export default function DoctorDetails() {
-  const [isVisible, setIsVisible] = useState(false);
   const [selectedCategory, setSelectedCategory] = useState("all");
-  const toggleModal = () => {
-    setIsVisible(!isVisible);
-  }
-  let [fontsLoaded] = useFonts({
-    UrbanistBold: require("../../assets/fonts/Urbanist-Bold.ttf"),
-    UrbanistMedium: require("../../assets/fonts/Urbanist-Regular.ttf"),
-    UrbanistSemiBold: require("../../assets/fonts/Urbanist-SemiBold.ttf"),
-    UrbanistRegular: require("../../assets/fonts/Urbanist-Regular.ttf"),
-  });
-  if (!fontsLoaded) {
-    return null;
-  }
   const docCards = [
     {
       name: "Dr. Randy Wigham",
@@ -51,7 +34,7 @@ export default function DoctorDetails() {
       image: require("../../assets/doctors/like.png"),
       stars: "4.8",
       reviews: "6,362",
-      images: require("../../assets/doctors/doc1.png"),
+      images: require("../../assets/doctors/doc2.png"),
     },
     {
       name: "Dr. Elijah Baranick",
@@ -79,182 +62,30 @@ export default function DoctorDetails() {
 
 
   return (
-    <View style={styles.mainContainer}>
+    <View className="flex-1 bg-white">
       <ScrollView showsVerticalScrollIndicator={false}>
         <View className="flex-1 bg-white px-4 py-5">
           <View className="pt-10">
 
-            <View className="flex-row">
+            <View className="flex-row justify-around">
               <NavigationHeader title="" />
               <SearchInput />
             </View>
 
             <DocButton selectedCategory={selectedCategory} onCategorySelect={setSelectedCategory} />
           </View>
-          <View style={styles.found}>
-            <Text style={styles.btnTxt}>489 founds</Text>
+          <View className="px-[10px] my-[15px] flex-row justify-between">
+            <Text className="text-[#212121] text-[20px] font-UrbanistRegular">489 founds</Text>
             <View className="flex-row">
-              <Text style={styles.default} onPress={toggleModal}>Default  </Text>
+              <Text className="text-[#246BFD] text-[16px] font-UrbanistRegular">Default </Text>
               <Image source={require("../../assets/doctors/arrows.png")} />
             </View>
           </View>
           {filteredDocCards.map((spot, index) => (
             <DoctorCard key={index} {...spot} />
           ))}
-
-          <Modal
-            visible={isVisible}
-            animationType="fade"
-            transparent={true}
-            onRequestClose={toggleModal}
-          >
-            <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}>
-              <View style={{ backgroundColor: 'white', borderTopRightRadius: 48, borderTopLeftRadius: 48 }}>
-                <Text style={styles.title2}>Filter</Text>
-                <Text style={styles.line}></Text>
-                <View>
-                  <Text style={styles.subtitles}>Speciality
-                  </Text>
-                  <DocButton selectedCategory={selectedCategory} onCategorySelect={setSelectedCategory} />
-                  <Text style={styles.subtitles}>Rating
-                  </Text>
-                  <ReviewButtons />
-                  <Text style={styles.line}></Text>
-                </View>
-                <View style={styles.btns}>
-                  <TouchableOpacity style={styles.regularBn} onPress={() => {
-                    setIsVisible(false)
-                  }}>
-                    <Text style={styles.buttonText}>Reset</Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity style={styles.activeBn} onPress={() => {
-                    setIsVisible(false)
-                  }}>
-                    <Text style={styles.activeTxt}>Apply</Text>
-                  </TouchableOpacity>
-
-
-                </View>
-              </View>
-            </View>
-          </Modal>
         </View>
       </ScrollView>
     </View>
   )
 }
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  activeBtn: {
-    backgroundColor: "#246BFD",
-    paddingVertical: 8,
-    paddingHorizontal: 20,
-    borderRadius: 100,
-  },
-  activeText: {
-    color: "#FFFFFF",
-    fontFamily: "UrbanistRegular"
-  },
-  btns: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    margin: 10,
-
-  },
-  title: {
-    textAlign: "center",
-    fontSize: 24,
-    fontFamily: "UrbanistBold"
-  },
-
-  btnText: {
-    color: "#246BFD",
-  },
-  images: {
-    width: 28,
-    height: 28,
-    marginHorizontal: 10,
-    marginTop: 15,
-  },
-  title2: {
-    fontSize: 24,
-    color: "#212121",
-    textAlign: "center",
-    fontFamily: "UrbanistBold",
-    marginVertical: 10,
-  },
-  found: {
-    paddingHorizontal: 10,
-    marginVertical: 15,
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  default: {
-    color: "#246BFD",
-    fontSize: 16,
-    fontFamily: "UrbanistRegular"
-  },
-  titleResult: {
-    fontSize: 24,
-    paddingVertical: 15,
-  },
-  activeBn: {
-    backgroundColor: "#246BFD",
-    width: 184,
-    height: 58,
-    paddingHorizontal: 18,
-    paddingVertical: 16,
-    borderRadius: 100,
-  },
-  activeTxt: {
-    color: "#FFFFFF",
-    textAlign: "center",
-    fontFamily: "UrbanistBold",
-    fontSize: 16,
-  },
-  regularBn: {
-    backgroundColor: "#E9F0FF",
-    width: 184,
-    height: 58,
-    paddingVertical: 18,
-    paddingHorizontal: 16,
-    borderRadius: 100,
-    marginHorizontal: 1,
-  },
-  line: {
-    marginVertical: 15,
-    borderWidth: 0.3,
-    paddingHorizontal: 50,
-    height: 0,
-    backgroundColor: "#EEEEEE",
-    opacity: 0.1,
-  },
-  buttonText: {
-    color: "#246BFD",
-    textAlign: "center",
-    fontFamily: "UrbanistBold",
-    fontSize: 16,
-  },
-  buttons: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginVertical: 10,
-    marginHorizontal: 15,
-  },
-  subtitles: {
-    color: "#212121",
-    fontSize: 18,
-    marginVertical: 15,
-    marginLeft: 20,
-    fontFamily: "UrbanistBold"
-  },
-  btnTxt: {
-    color: "#212121",
-    fontSize: 20,
-    fontFamily: "UrbanistRegular"
-
-  }
-});

app/Doctors/favoriteDoctors.tsx

@@ -5,7 +5,7 @@ import DocButton from "@/components/cards/DocButtons";
 import { Icon } from "@/components/Icon";
 import React, { useState } from "react";
 
-import { StyleSheet, View, Image, ScrollView, TouchableOpacity, Text, ImageSourcePropType, Modal } from "react-native";
+import { StyleSheet, View, Image, ScrollView, TouchableOpacity, TouchableWithoutFeedback,Text, ImageSourcePropType, Modal } from "react-native";
 type cardSpot = {
   name: string;
   role: string;
@@ -24,15 +24,6 @@ export default function DoctorDetails() {
     setIsVisible(!isVisible);
     setSelectedSpot(spot);
   };
-  let [fontsLoaded] = useFonts({
-    UrbanistBold: require("../../assets/fonts/Urbanist-Bold.ttf"),
-    UrbanistMedium: require("../../assets/fonts/Urbanist-Regular.ttf"),
-    UrbanistSemiBold: require("../../assets/fonts/Urbanist-SemiBold.ttf"),
-    UrbanistRegular: require("../../assets/fonts/Urbanist-Regular.ttf"),
-  });
-  if (!fontsLoaded) {
-    return null;
-  }
   const docCards = [
     {
       name: "Dr. Travis Westaby",
@@ -126,15 +117,17 @@ export default function DoctorDetails() {
             transparent={true}
             onRequestClose={toggleModal}
           >
-            <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }}>
+                <TouchableWithoutFeedback onPress={() => setIsVisible(false)}>
+            <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' }} >
+            <TouchableWithoutFeedback>
               <View style={{ backgroundColor: 'white', borderTopRightRadius: 48, borderTopLeftRadius: 48 }}>
                 <Text style={styles.title}>Remove from favorite?</Text>
                 <Text style={styles.line}></Text>
                 {selectedSpot && (
                   <>
                     <View className="bg-white rounded-3xl p-4 m-4" style={styles.card1}>
                       <View className="flex-row justify-between w-full">
-                        <Image source={selectedSpot.images} />
+                        <Image source={selectedSpot.images} className="w-28 h-28"/>
                         <View style={styles.details}>
                           <Text style={styles.title1}>{selectedSpot.name}</Text>
                           <Text style={styles.line}></Text>
@@ -167,8 +160,11 @@ export default function DoctorDetails() {
                   </>
                 )}
               </View>
+              </TouchableWithoutFeedback>
             </View>
+            </TouchableWithoutFeedback>
           </Modal>
+          
         </View>
       </ScrollView>
     </View>

app/Doctors/searchDoctor.tsx

@@ -4,8 +4,7 @@ import { StatusBar } from "expo-status-bar";
 import { NavigationHeader } from "@/components/NavigationHeader";
 import DocButton from "../../components/cards/DocButtons";
 import React, { useState, useEffect } from "react";
-import {
-  StyleSheet, View, Image, TouchableOpacity, Text, Animated,
+import { View, Image,  Animated,
   Easing
 } from "react-native";
 import { SearchInput } from "../../components/searchinput2";
@@ -42,30 +41,17 @@ export default function searchDoctor() {
 
     <View className="flex-1 bg-white px-4 py-5">
       <View className="pt-10 ">
-        <View className="flex-row py-2">
+        <View className="flex-row justify-around">
           <NavigationHeader title="" />
           <SearchInput />
         </View>
         <DocButton selectedCategory={selectedCategory} onCategorySelect={setSelectedCategory} />
       </View>
-      <View style={styles.loading}>
+      <View className="flex-1 justify-center items-center">
         <View>
 
           <Animated.View style={{ transform: [{ rotate }] }}><Image source={require("../../assets/doctors/loading.png")} /></Animated.View>
         </View>
       </View>
     </View>)
 }
-const styles = StyleSheet.create({
-  images: {
-    width: 28,
-    height: 28,
-    marginHorizontal: 10,
-    marginTop: 15,
-  },
-  loading: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  }
-})