fix-AddNewCard-Screen-added

atlp-rwanda · May 31, 2024 · c459567 · c459567
1 parent ae9ddb9
commit c459567
Show file tree

Hide file tree

Showing 31 changed files with 1,200 additions and 703 deletions.
diff --git a/app/(app)/ActionMenu/Booking/AddNewCard.tsx b/app/(app)/ActionMenu/Booking/AddNewCard.tsx
diff --git a/app/(app)/ActionMenu/Booking/BookingAppointment.tsx b/app/(app)/ActionMenu/Booking/BookingAppointment.tsx
@@ -19,6 +19,7 @@ import Typography from "@/constants/Typography";
 
 function BookingAppointment() {
   const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme("dark");
   const [selectedTime, setSelectedTime] = useState(null);
   const [selectedDate, setSelectedDate] = useState("");
 
@@ -27,8 +28,6 @@ function BookingAppointment() {
     console.log(time);
   };
   console.log(selectedTime);
-  //  documentation : https://hosseinshabani.github.io/react-native-modern-datepicker/?ref=retool-blog
-  // Function to generate time slots from 9:00 AM to 15:00 PM
   const generateTimeSlots = () => {
     const timeSlots = [];
     for (let hour = 9; hour <= 14; hour++) {
@@ -68,89 +67,78 @@ function BookingAppointment() {
     console.log(select);
   }
   const ios = Platform.OS === "ios";
+
   return (
-    <View style={{ flex: 1, backgroundColor: "white" }}>
-      <SafeAreaView style={{ marginBottom: ios ? 10 : 50 }}>
-        <StatusBar style="dark" />
-      </SafeAreaView>
-      <View style={{ flex: 1, justifyContent: "space-around" }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF",
+      }}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
+
+      <ScrollView showsVerticalScrollIndicator={false}>
         <View
           style={{
-            backgroundColor:
-              theme === "light" ? Colors.others.white : Colors.others.black,
+            padding: 20,
+            justifyContent: "space-between",
+            gap: 24,
           }}
         >
-          <Pressable
-            onPress={() => router.back()}
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 30,
-              paddingLeft: 20,
-              backgroundColor:
-                theme === "light" ? Colors.others.white : Colors.others.black,
-            }}
-          >
-            <MaterialIcons
-              name="arrow-back"
-              size={25}
-              style={{ alignSelf: "center" }}
-            />
+          <View style={{ gap: 24 }}>
             <Text
-              style={{
-                fontSize: 24,
-                fontWeight: "600",
-              }}
+              style={[
+                Typography.bold.xLarge,
+                { color: theme === "dark" ? "#FFFFFF" : "#212121" },
+              ]}
             >
-              Book Appointment
+              Select Date
             </Text>
-          </Pressable>
-          <ScrollView 
-          showsVerticalScrollIndicator={false}
-          style={{marginBottom: 30}}>
-
-          <View
-            style={{
-              padding: 20,
-              justifyContent: "space-between",
-            }}
-          >
-              <View style={{ gap: 10 }}>
-                <Text style={Typography.bold.xLarge}>Select Date</Text>
-                <View style={{ borderRadius: 20 }}>
-                  <DatePicker
-                    onSelectedChange={(date) => handleDate(date)}
-                    mode="calendar"
-                    options={{
-                      backgroundColor: Colors.transparent.blue,
-                      textHeaderColor: "#000",
-                      textDefaultColor: "#000",
-                      selectedTextColor: "#fff",
-                      mainColor: "#246BFD",
-                      textSecondaryColor: "#000",
-                      borderColor: "rgba(122, 146, 165, 0.1)",
-                    }}
-                    current="2020-07-13"
-                    style={{
-                      borderRadius: 20,
-                    }}
-                  />
-                </View>
-                <View style={{ gap: 10 }}>
-                  <Text style={Typography.bold.xLarge}>Select Date</Text>
-                  <View style={styles.change}>{generateTimeSlots()}</View>
-                </View>
-              </View>
+            <View style={{ borderRadius: 20 }}>
+              <DatePicker
+                onSelectedChange={(date) => handleDate(date)}
+                mode="calendar"
+                options={{
+                  backgroundColor:
+                    theme === "dark" ? "#1F222A" : Colors.transparent.blue,
+                  textHeaderColor: theme === "dark" ? "#FFFFFF" : "#212121",
+                  textDefaultColor: theme === "dark" ? "#FFFFFF" : "#212121",
+                  selectedTextColor: "#fff",
+                  mainColor: "#246BFD",
+                  textSecondaryColor: theme === "dark" ? "#FFFFFF" : "#212121",
+                  borderColor: "rgba(122, 146, 165, 0.1)",
+                }}
+                current="2020-07-13"
+                style={{
+                  borderRadius: 20,
+                }}
+              />
+            </View>
+            <View style={{ gap: 10 }}>
+              <Text
+                style={[
+                  Typography.bold.xLarge,
+                  { color: theme === "dark" ? "#FFFFFF" : "#212121" },
+                ]}
+              >
+                Select Date
+              </Text>
+              <View style={styles.change}>{generateTimeSlots()}</View>
+            </View>
+          </View>
 
-              <TouchableOpacity 
-              onPress={()=> router.push("(app)/ActionMenu/Booking/Select-package")}
-              style={styles.btn}>
-                <Text style={styles.btnText}>Next</Text>
-              </TouchableOpacity>
+          <View>
+            <TouchableOpacity
+              onPress={() =>
+                router.push("(app)/ActionMenu/Booking/Select-package")
+              }
+              style={styles.btn}
+            >
+              <Text style={styles.btnText}>Next</Text>
+            </TouchableOpacity>
           </View>
-          </ScrollView>
         </View>
-      </View>
+      </ScrollView>
     </View>
   );
 }
@@ -175,10 +163,12 @@ const styles = StyleSheet.create({
     borderColor: Colors.main.primary._500,
     borderWidth: 2,
     backgroundColor: "transparent",
-    padding: 5,
     borderRadius: 100,
-    marginVertical: 10,
-    marginHorizontal: "1%",
+    paddingHorizontal: 1,
+    paddingVertical: 2,
+    marginVertical: 8,
+    marginHorizontal: 5,
+    flexWrap: "nowrap",
   },
   buttonSelected: {
     backgroundColor: Colors.main.primary._500,
@@ -201,6 +191,8 @@ const styles = StyleSheet.create({
     padding: 18,
     borderRadius: 100,
     marginTop: 10,
+    shadowColor: "#246BFD",
+    elevation: 7,
   },
   btnText: {
     textAlign: "center",

diff --git a/app/(app)/ActionMenu/Booking/Doctor_details.tsx b/app/(app)/ActionMenu/Booking/Doctor_details.tsx
@@ -33,6 +33,14 @@ export const ReviewerCardComponent = () => {
 
 
 
+  const [likes, setLikes] = React.useState(0);
+
+  const handleLikes = () => {
+    setLikes(likes + 1);
+  };
+
+
+
   return (
     <View style={{ gap: 10, marginVertical: 10 }}>
       <View
@@ -134,7 +142,7 @@ export const ReviewerCardComponent = () => {
 
 const DoctorDetails = () => {
   const { theme, changeTheme } = useContext(ThemeContext);
-  changeTheme("light");
+  changeTheme("dark");
   return (
     <View
       style={{

diff --git a/app/(app)/ActionMenu/Booking/EnterYourPin.tsx b/app/(app)/ActionMenu/Booking/EnterYourPin.tsx
@@ -14,12 +14,14 @@ import { OtpInput } from "react-native-otp-entry";
 import { router } from "expo-router";
 import { useModal } from "@/ctx/ModalContext";
 import { ThemeContext } from "@/ctx/ThemeContext";
+import React from "react";
 
 export default function EnterYourPin() {
   const [isDark, setIsDark] = useState(false);
   const modal = useModal();
 
   const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme('light');
 
   async function handlePIN() {
     modal.show({
@@ -31,7 +33,7 @@ export default function EnterYourPin() {
             gap: 20,
             borderRadius: 48,
             backgroundColor:
-              theme === "light" ? Colors.others.white : Colors.dark._2,
+              theme === "light" ? Colors.others.white : '#181A20',
           }}
         >
           <Image source={require("@/assets/images/calendarmodal.png")} />
@@ -114,27 +116,16 @@ export default function EnterYourPin() {
 
   return (
     <>
-      <View style={isDark ? styles.containerdark : styles.container}>
+      <View style={[isDark ? styles.containerdark : styles.container,{backgroundColor:
+              theme === "light" ? Colors.others.white : '#181A20',}]}>
         <View style={isDark ? styles.headerdark : styles.header}>
-          <Pressable onPress={() => router.back()}>
-            <LeftArrow
-              fillColor={isDark ? Colors.others.white : Colors.grayScale._900}
-            />
-          </Pressable>
-          <Text
-            style={[
-              Typography.heading._4,
-              { color: isDark ? Colors.others.white : Colors.grayScale._900 },
-            ]}
-          >
-            Enter Your Pin
-          </Text>
+
         </View>
         <View style={{ gap: 60, alignItems: "center" }}>
           <Text
             style={[
               Typography.medium.xLarge,
-              { color: isDark ? Colors.others.white : Colors.grayScale._900 },
+              { color: theme === "dark" ? "#FFFFFF" : "#212121" },
             ]}
           >
             Enter your PIN to confirm appointment
@@ -147,11 +138,12 @@ export default function EnterYourPin() {
                 pinCodeContainerStyle: {
                   width: 83,
                   height: 61,
-                  backgroundColor: isDark
-                    ? Colors.dark._2
+
+                  backgroundColor: theme === 'dark'
+                    ? '#1F222A'
                     : Colors.grayScale._50,
                   borderRadius: 16,
-                  borderColor: isDark ? Colors.dark._3 : Colors.grayScale._200,
+                  borderColor: theme === 'dark' ? '#35383F' : Colors.grayScale._200,
                   borderWidth: 1,
                 },
                 focusedPinCodeContainerStyle: {
@@ -167,7 +159,7 @@ export default function EnterYourPin() {
                   paddingRight: 32,
                 },
                 pinCodeTextStyle: {
-                  color: isDark ? Colors.others.white : Colors.grayScale._900,
+                  color: theme === 'dark' ? Colors.others.white : Colors.grayScale._900,
                 },
               }}
             />