Merge pull request #116 from atlp-rwanda/fix-doctor-details

Fixes and Enhancements to Doctor Details Screen
atlp-rwanda · May 31, 2024 · c1cab0a · c1cab0a
2 parents d2873ee + 09516ee
commit c1cab0a
Showing 15 changed files with 955 additions and 487 deletions.
diff --git a/app/(app)/ActionMenu/Booking/Doctor_details.tsx b/app/(app)/ActionMenu/Booking/Doctor_details.tsx
diff --git a/app/(app)/ActionMenu/Booking/SelectPayment.tsx b/app/(app)/ActionMenu/Booking/SelectPayment.tsx
@@ -66,7 +66,7 @@ export default function SelectPayment() {
                 : Colors.others.white,
             opacity: 8,
           }}
-          onPress={() => {}}
+          onPress={() => router.push('(app)/ActionMenu/Booking/AddNewCard')}
           // shadowColor={Colors.main.primary._100}
         />
         <Button

diff --git a/app/(app)/ActionMenu/Booking/_layout.tsx b/app/(app)/ActionMenu/Booking/_layout.tsx
@@ -13,7 +13,13 @@ export default function BookingLayout() {
           name="BookingAppointment"
           options={{ headerShown: false }}
         />
-        <Stack.Screen name="Doctor_details" options={{ headerShown: false }} />
+        <Stack.Screen name="Doctor_details" options={{ header: () => (
+            <Header
+              title="Dr. Jenny Watson"
+              options={{
+              }}
+            />
+          ), }} />
         <Stack.Screen
           name="DoctorRatingAndReview"
           options={{ headerShown: false }}
@@ -22,6 +28,7 @@ export default function BookingLayout() {
         <Stack.Screen name="Select-package" options={{ headerShown: false }} />
         <Stack.Screen name="Patient-details" options={{ headerShown: false }} />
         <Stack.Screen name="EnterYourPin" options={{ headerShown: false }} />
+        <Stack.Screen name="AddNewCard" options={{ headerShown: false }} />
         <Stack.Screen
           name="SelectPayment"
           options={{ header: () => <Header title="Payments" /> }}

diff --git a/app/(auth)/SignIn&SignOut/LetsYouIn.tsx b/app/(auth)/SignIn&SignOut/LetsYouIn.tsx
@@ -1,88 +1,155 @@
 import * as React from "react";
-import { StyleSheet, Text, View, Image, TouchableOpacity, Pressable } from "react-native";
-import { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Pressable,
+} from "react-native";
+import { useState, useContext } from "react";
 import { LeftArrow } from "@/components/UI/Icons";
 import { router } from "expo-router";
 import Typography from "../../../constants/Typography";
 import { Colors } from "../../../constants/Colors";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import { StatusBar } from "expo-status-bar";
+import {
+  BackArrow,
+  blackArrow,
+  OrLine,
+  greyOrLine,
+  BlackApple,
+  WhiteApple,
+} from "@/components/Icons/Icons";
+import { SvgXml } from "react-native-svg";
 
 const LetsYouIn = () => {
   const [visible, setVisible] = React.useState(false);
   const hideDialog = () => setVisible(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
+  changeTheme("dark");
 
   return (
-    <View style={styles.container}>
-      <Pressable 
-      onPress={()=> router.back()}
-      style={styles.arrow}>
-        <LeftArrow fillColor={"#23272f"} />
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF" },
+      ]}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
+      <Pressable onPress={() => router.back()} style={styles.arrow}>
+        <SvgXml xml={theme === "dark" ? BackArrow : blackArrow} />
       </Pressable>
 
       <Image source={require("../../../assets/icons/FrameOne.png")} />
 
-      <View style={styles.middlePart}>
-        <View style={styles.midPartOne}>
-          <Text
-            style={[Typography.heading._1, { color: Colors.grayScale._900 }]}
-          >
-            Let's you in
-          </Text>
-        </View>
+      <View style={styles.midPartOne}>
+        <Text
+          style={[
+            Typography.heading._1,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
+        >
+          Let's you in
+        </Text>
+      </View>
 
+      <View style={styles.middlePart}>
         <View style={styles.Buttons}>
-          <TouchableOpacity style={styles.middleButton}>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
             <Image source={require("../../../assets/icons/facebook.png")} />
-            <Text style={[Typography.semiBold.large]}>
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
               Continue with facebook
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.middleButton}>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
             <Image source={require("../../../assets/icons/Google.png")} />
-            <Text style={[Typography.semiBold.large]}>
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
               Continue with Google
             </Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.middleButton}>
-            <Image source={require("../../../assets/icons/AppleIcon.png")} />
-            <Text style={[Typography.semiBold.large]}>Continue with Apple</Text>
+          <TouchableOpacity
+            style={[
+              styles.middleButton,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
+            <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple } />
+            <Text
+              style={[
+                Typography.semiBold.large,
+                { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+              ]}
+            >
+              Continue with Apple
+            </Text>
           </TouchableOpacity>
         </View>
       </View>
 
-      <Image source={require("../../../assets/icons/OR.png")} />
+      <SvgXml xml={theme === "dark" ? OrLine : greyOrLine} />
 
-      <TouchableOpacity 
-      onPress={()=> router.push("/(auth)/SignIn&SignOut/YourProfile")}
-      style={styles.signinBtn}>
+      <TouchableOpacity
+        onPress={() => router.push("/(auth)/SignIn&SignOut/YourProfile")}
+        style={styles.signinBtn}
+      >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
           Sign in with password
         </Text>
       </TouchableOpacity>
 
-      <Text style={[Typography.regular.medium]}>
-        Don't have an account?
+      <View style={{ flexDirection: "row", gap: 5 }}>
+        <Text
+          style={[
+            Typography.regular.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
+          ]}
+        >
+          Don't have an account?
+        </Text>
         <Text
-          style={styles.signupText}
+          style={[Typography.semiBold.medium, { color: "#246DFB" }]}
           onPress={() =>
             router.replace("/(auth)/SignIn&SignOut/SignUpBlankForm")
           }
         >
           Sign up
         </Text>
-      </Text>
+      </View>
     </View>
   );
 };
 
 export default LetsYouIn;
 
 const styles = StyleSheet.create({
-  signupText: {
-    color: "#246BFD",
-    fontWeight: "600",
-  },
+  //   signupText: {
+  //     color: "#246BFD",
+  //     fontWeight: "600",
+  //   },
   signText: {
     fontSize: 16,
     color: "#FFFFFF",
@@ -95,6 +162,8 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     justifyContent: "center",
     alignItems: "center",
+    shadowColor: "#246BFD",
+    elevation: 10,
   },
   textBtn: {
     fontSize: 16,
@@ -104,7 +173,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 15,
     borderWidth: 1,
-    borderColor: "#eeeeee",
     justifyContent: "center",
     alignItems: "center",
     padding: 15,
@@ -127,7 +195,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   middlePart: {
-    gap: 30,
+    gap: 24,
   },
   arrow: {
     alignSelf: "flex-start",
@@ -141,7 +209,7 @@ const styles = StyleSheet.create({
     gap: 20,
     paddingTop: 24,
     paddingLeft: 24,
-    paddingBottom: 48,
+    paddingBottom: 24,
     paddingRight: 24,
     // borderWidth: 4,
     // borderColor: 'red',

diff --git a/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignInBlankForm.tsx
diff --git a/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx b/app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import {
   StyleSheet,
   Text,
@@ -19,6 +19,16 @@ import { router } from "expo-router";
 import Typography from "../../../constants/Typography";
 import { Colors } from "../../../constants/Colors";
 import { StatusBar } from "expo-status-bar";
+import { ThemeContext } from "@/ctx/ThemeContext";
+import {
+  BackArrow,
+  blackArrow,
+  DarkContinueLine,
+  LightContinueLine,
+  BlackApple,
+  WhiteApple
+} from "@/components/Icons/Icons";
+import { SvgXml } from "react-native-svg";
 
 const Signup = () => {
   const [email, setEmail] = useState("");
@@ -27,6 +37,9 @@ const Signup = () => {
   const [isChecked, setIsChecked] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [passwordFocused, setPasswordFocused] = useState(false);
+  const { theme, changeTheme } = useContext(ThemeContext);
+
+  changeTheme("dark");
 
   const handleEmailChange = (text: string) => {
     setEmail(text);
@@ -42,33 +55,41 @@ const Signup = () => {
 
   const handleEmailFocused = () => {
     setIsFocused(true);
-  }
+  };
   const handleEmailBlur = () => {
     setIsFocused(false);
-  }
-  const handlePasswordFocused = () =>{
+  };
+  const handlePasswordFocused = () => {
     setPasswordFocused(true);
-  }
+  };
   const handlePasswordBlur = () => {
     setPasswordFocused(false);
-  }
+  };
 
   return (
-    <View style={styles.container}>
-      <StatusBar style="light"/>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === "dark" ? "#181A20" : "#FFFFFF" },
+      ]}
+    >
+      <StatusBar style={theme === "dark" ? "light" : "dark"} />
       <TouchableOpacity
         style={styles.arrow}
         onPress={() => router.replace("/(auth)/SignIn&SignOut/LetsYouIn")}
       >
-        <LeftArrow fillColor={"#23272f"} />
+        <SvgXml xml={theme === "dark" ? BackArrow : blackArrow} />
       </TouchableOpacity>
 
       <Image source={require("../../../assets/icons/HeartPlus.png")} />
 
       <View style={styles.middlePart}>
         <View style={styles.midPartOne}>
           <Text
-            style={[Typography.heading._3, { color: Colors.grayScale._900 }]}
+            style={[
+              Typography.heading._3,
+              { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+            ]}
           >
             Create new account
           </Text>
@@ -77,44 +98,69 @@ const Signup = () => {
 
       <View style={styles.Buttons}>
         <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
           keyboardVerticalOffset={60}
         >
-          <View style={[styles.inputOne, isFocused && styles.inputOneFocused]}>
-            <Image source={require("../../../assets/icons/Message.png")} style={[styles.icon, isFocused && styles.iconFocused]}/>
-            <TextInput
-              style={[styles.email, isFocused && styles.emailFocused]}
-              placeholder="Email"
-              keyboardType="email-address"
-              placeholderTextColor="rgba(45, 45, 45, 0.5)"
-              value={email}
-              onChangeText={handleEmailChange}
-              onFocus={handleEmailFocused}
-              onBlur={handleEmailBlur}
-            />
-          </View>
+          <View style={{ gap: 20 }}>
+            <View
+              style={[
+                styles.inputOne,
+                isFocused && styles.inputOneFocused,
+                { backgroundColor: theme === "dark" ? "#1F222A" : Colors.grayScale._50 },
+              ]}
+            >
+              <Image
+                source={require("../../../assets/icons/Message.png")}
+                style={[styles.icon, isFocused && styles.iconFocused]}
+              />
+              <TextInput
+                style={[styles.email, isFocused && styles.emailFocused]}
+                placeholder="Email"
+                keyboardType="email-address"
+                placeholderTextColor="#9E9E9E"
+                value={email}
+                onChangeText={handleEmailChange}
+                onFocus={handleEmailFocused}
+                onBlur={handleEmailBlur}
+              />
+            </View>
 
-          <View style={[styles.inputOne, passwordFocused && styles.inputOneFocused]}>
-            <Image source={require("../../../assets/icons/Lock.png")} style={[styles.icon, passwordFocused && styles.iconFocused]}/>
-            <TextInput
-              style={styles.email}
-              placeholder="Password"
-              placeholderTextColor="rgba(45, 45, 45, 0.5)"
-              secureTextEntry={secureTextEntry}
-              value={password}
-              onChangeText={handlePasswordChange}
-              onFocus={handlePasswordFocused}
-              onBlur={handlePasswordBlur}
-            />
-            <View style={[styles.passwordInputContainer, passwordFocused && styles.passwordInputContainerFocused]}>
-              <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
-                <Ionicons
-                  name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
-                  size={24}
-                  color={passwordFocused ? "#246BFD" : "gray"}
-                  style={styles.eye}
-                />
-              </TouchableWithoutFeedback>
+            <View
+              style={[
+                styles.inputOne,
+                passwordFocused && styles.inputOneFocused,
+                { backgroundColor: theme === "dark" ? "#1F222A" : Colors.grayScale._50 },
+              ]}
+            >
+              <Image
+                source={require("../../../assets/icons/Lock.png")}
+                style={[styles.icon, passwordFocused && styles.iconFocused]}
+              />
+              <TextInput
+                style={styles.email}
+                placeholder="Password"
+                placeholderTextColor="#9E9E9E"
+                secureTextEntry={secureTextEntry}
+                value={password}
+                onChangeText={handlePasswordChange}
+                onFocus={handlePasswordFocused}
+                onBlur={handlePasswordBlur}
+              />
+              <View
+                style={[
+                  styles.passwordInputContainer,
+                  passwordFocused && styles.passwordInputContainerFocused,
+                ]}
+              >
+                <TouchableWithoutFeedback onPress={togglePasswordVisibility}>
+                  <Ionicons
+                    name={secureTextEntry ? "eye-outline" : "eye-off-outline"}
+                    size={24}
+                    color={passwordFocused ? "#246BFD" : "gray"}
+                    style={styles.eye}
+                  />
+                </TouchableWithoutFeedback>
+              </View>
             </View>
           </View>
         </KeyboardAvoidingView>
@@ -125,48 +171,84 @@ const Signup = () => {
           value={isChecked}
           onValueChange={setIsChecked}
           style={styles.checkbox}
-
+          color="#246BFD"
         />
         <Text
-          style={[Typography.semiBold.medium, { color: Colors.grayScale._900 }]}
+          style={[
+            Typography.semiBold.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._900 },
+          ]}
         >
           Remember me
         </Text>
       </View>
 
-      <Pressable 
-      onPress={()=> router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
-      style={styles.signinBtn}>
+      <TouchableOpacity
+        onPress={() => router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
+        style={styles.signinBtn}
+      >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
           Sign up
         </Text>
-      </Pressable>
+      </TouchableOpacity>
 
-      <Image source={require("../../../assets/icons/continue.png")} />
+      <SvgXml xml={theme === "dark" ? DarkContinueLine : LightContinueLine} />
 
       <View style={styles.overCont}>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/facebook.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/Google.png")} />
-        </View>
-        <View style={styles.smallCont}>
-          <Image source={require("../../../assets/icons/AppleIcon.png")} />
-        </View>
-      </View>
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE' },
+            ]}
+          >
+            <Image source={require("../../../assets/icons/facebook.png")} />
+          </View>
+        </TouchableOpacity>
 
-      <View>
-        <Text style={[Typography.regular.medium]}>
-          Already have an account? 
-          <Text
-           style={[Typography.semiBold.medium, {color:Colors.main.primary._500, marginLeft: 10}]}
-            onPress={() =>
-              router.replace("/(auth)/SignIn&SignOut/SignInBlankForm")
-            }
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
           >
-            Sign In
-          </Text>
+            <Image source={require("../../../assets/icons/Google.png")} />
+          </View>
+        </TouchableOpacity>
+
+        <TouchableOpacity>
+          <View
+            style={[
+              styles.smallCont,
+              { backgroundColor: theme === "dark" ? "#1F222A" : "#FFFFFF", borderColor: theme === 'dark' ? '#35383F' : '#EEEEEE'  },
+            ]}
+          >
+            <SvgXml xml={theme === 'dark' ? WhiteApple : BlackApple} />
+
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ gap: 3, flexDirection: "row" }}>
+        <Text
+          style={[
+            Typography.regular.medium,
+            { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
+          ]}
+        >
+          Already have an account?
+        </Text>
+        <Text
+          style={[
+            Typography.semiBold.medium,
+            { color: Colors.main.primary._500, marginLeft: 10 },
+          ]}
+          onPress={() =>
+            router.replace("/(auth)/SignIn&SignOut/SignInBlankForm")
+          }
+        >
+          Sign In
         </Text>
       </View>
     </View>
@@ -176,14 +258,13 @@ const Signup = () => {
 export default Signup;
 
 const styles = StyleSheet.create({
-
   inputOneFocused: {
     borderColor: "#246BFD",
     borderWidth: 2,
   },
   emailFocused: {
     color: "#212121",
-    fontSize: 16
+    fontSize: 16,
   },
   iconFocused: {
     tintColor: "#246BFD",
@@ -228,7 +309,6 @@ const styles = StyleSheet.create({
     width: 80,
     height: 60,
     backgroundColor: "#FFFFFF",
-    borderColor: "#eeeeee",
     borderWidth: 1,
     borderRadius: 16,
     justifyContent: "center",
@@ -254,14 +334,14 @@ const styles = StyleSheet.create({
   },
   inputOne: {
     borderRadius: 16,
-    backgroundColor: "#FAFAFA",
-    width: 380,
+    width: 360,
     height: 60,
     padding: 8,
     flexDirection: "row",
     paddingLeft: 20,
     alignItems: "center",
     gap: 10,
+
   },
   email: {
     fontSize: 16,
@@ -271,20 +351,15 @@ const styles = StyleSheet.create({
     color: "#246BFD",
     fontWeight: "600",
   },
-  // signText: {
-  //   fontSize: 16,
-  //   color: "#FFFFFF",
-  //   fontWeight: "bold",
-  // },
   signinBtn: {
     backgroundColor: "#246BFD",
-    width: "90%",
+    width: 360,
     height: 58,
     borderRadius: 100,
     justifyContent: "center",
     alignItems: "center",
     shadowColor: "#246BFD",
-    elevation: 15,
+    elevation: 10,
   },
   textBtn: {
     fontSize: 16,
@@ -301,7 +376,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
   },
   Buttons: {
-    gap: 10,
+    gap: 20,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -325,7 +400,7 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
+    // backgroundColor: "#FFFFFF",
     gap: 20,
     paddingTop: 24,
     paddingLeft: 24,

diff --git a/assets/images/Booking/Card.tsx b/assets/images/Booking/Card.tsx
@@ -0,0 +1,41 @@
+export const Card= `<svg width="424" height="287" viewBox="0 0 424 287" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1241_26802)">
+<g clip-path="url(#clip0_1241_26802)">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="url(#paint0_linear_1241_26802)"/>
+<g opacity="0.32">
+<path opacity="0.1" d="M262.831 -16.3608L391.137 60.0095V189.138L262.831 112.076V-16.3608Z" fill="white"/>
+<path opacity="0.2" d="M518.993 -16.2837L390.691 60.0066V189L518.993 112.018V-16.2837Z" fill="white"/>
+<path opacity="0.3" d="M262.831 -15.938L391.137 -93L519.442 -15.938V-15.3616L391.137 61.7004L262.831 -15.3616V-15.938Z" fill="white"/>
+<path opacity="0.1" d="M-99 56.8936L29.3056 133.264V262.392L-99 185.33V56.8936Z" fill="white"/>
+<path opacity="0.2" d="M157.162 56.9707L28.8601 133.261V262.254L157.162 185.273V56.9707Z" fill="white"/>
+<path opacity="0.3" d="M-99 57.3164L29.3056 -19.7456L157.611 57.3164V57.8928L29.3056 134.955L-99 57.8928V57.3164Z" fill="white"/>
+<path opacity="0.1" d="M209.111 15.7607L262.609 47.6037V101.444L209.111 69.3131V15.7607Z" fill="white"/>
+<path opacity="0.2" d="M315.919 15.793L262.423 47.6026V101.387L315.919 69.2891V15.793Z" fill="white"/>
+<path opacity="0.3" d="M209.111 15.9371L262.609 -16.1943L316.107 15.9371V16.1774L262.609 48.3088L209.111 16.1774V15.9371Z" fill="white"/>
+<path opacity="0.1" d="M253.951 221.316L307.449 253.159V307L253.951 274.868V221.316Z" fill="white"/>
+<path opacity="0.2" d="M360.759 221.348L307.263 253.158V306.942L360.759 274.844V221.348Z" fill="white"/>
+<path opacity="0.3" d="M253.951 221.492L307.449 189.361L360.947 221.492V221.733L307.449 253.864L253.951 221.733V221.492Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1241_26802" x="0" y="0" width="428" height="287" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="8"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.419608 0 0 0 0 0.992157 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1241_26802"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1241_26802" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1241_26802" x1="400" y1="255" x2="-4.26502" y2="68.6363" gradientUnits="userSpaceOnUse">
+<stop stop-color="#246BFD"/>
+<stop offset="1" stop-color="#5089FF"/>
+</linearGradient>
+<clipPath id="clip0_1241_26802">
+<rect x="20" y="16" width="380" height="239" rx="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
diff --git a/assets/images/Booking/card.svg b/assets/images/Booking/card.svg
diff --git a/assets/images/Charly.png b/assets/images/Charly.png
diff --git a/components/Icons/Icons.ts b/components/Icons/Icons.ts
diff --git a/components/Icons/Scanner.png b/components/Icons/Scanner.png
diff --git a/components/UI/Header.tsx b/components/UI/Header.tsx
@@ -9,6 +9,7 @@ import { useContext } from "react";
 import { ThemeContext } from "@/ctx/ThemeContext";
 import { NavigationState } from "@react-navigation/native";
 import { router } from "expo-router";
+import React from "react";
 
 interface Props {
   title?: string;
@@ -22,6 +23,8 @@ interface Props {
 export default function Header({ title, options }: Props) {
   const { theme, changeTheme } = useContext(ThemeContext);
 
+  // changeTheme("light");
+
   return (
     <>
       <StatusBar style={theme === "light" ? "dark" : "light"} />

diff --git a/components/UI/icons/WhiteThreeDots.ts b/components/UI/icons/WhiteThreeDots.ts
@@ -0,0 +1,7 @@
+export const WhiteThreeDots = `<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="M14.0007 3.20801C19.96 3.20801 24.7923 8.03917 24.7923 13.9997C24.7923 19.959 19.96 24.7913 14.0007 24.7913C8.04015 24.7913 3.20898 19.959 3.20898 13.9997C3.20898 8.04034 8.04132 3.20801 14.0007 3.20801Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5966 14.015H18.6071" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9189 14.015H13.9294" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.24215 14.015H9.25265" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,7 +77,8 @@
     "run": "^1.5.0",
     "sdk": "^0.5.0",
     "start": "^5.1.0",
-    "vector-icons": "^0.1.0"
+    "vector-icons": "^0.1.0",
+    "expo-barcode-scanner": "~13.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",