Merge pull request #124 from atlp-rwanda/revert-118-bg-appointment-UI

Revert "Bug Fixes: Ensure Proper Dark Theme Adjustment and Resolve Rendering Errors"

app/(app)/ActionMenu/Booking/SelectPayment.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Colors } from "@/constants/Colors";
 import { StatusBar } from "expo-status-bar";
 import { createContext, useContext, useState } from "react";

app/(app)/Appointments/CancelAppointment/cancelreason.tsx

@@ -171,11 +171,11 @@ export default function Selectreason(){
         /><Text style={[Typography.medium.xLarge,{color: theme==='light'?  Colors.grayScale._900: Colors.others.white}]}>Others</Text>
       </View>
       {  selectedValue==='option8'? <TextInput
-      multiline={true}
-      numberOfLines={5}
-      style={[Typography.semiBold.medium,{ width: '100%',height:200,backgroundColor: theme==='light'? Colors.grayScale._100: Colors.dark._2,borderRadius:16, }]}
-      placeholder="Write Your other reason"
-      placeholderTextColor={theme==='light'?  Colors.grayScale._900: Colors.others.white}
+    multiline={true}
+    numberOfLines={5}
+    style={[Typography.semiBold.medium,{ width: '100%',height:200,backgroundColor: theme==='light'? Colors.grayScale._100: Colors.dark._2,borderRadius:16, }]}
+    placeholder="Write Your other reason"
+    placeholderTextColor={theme==='light'?  Colors.grayScale._900: Colors.others.white}
 
 
     /> :<></>}

app/(app)/Appointments/MessagingAppointment/AttachComponent.tsx

@@ -1,40 +1,26 @@
-import { Colors } from "@/constants/Colors";
-import Typography from "@/constants/Typography";
-import { ThemeContext } from "@/ctx/ThemeContext";
-import React, { useContext } from "react";
-import { Image, StyleSheet, Text } from "react-native";
-import { View } from "react-native";
+import Typography from '@/constants/Typography'
+import React from 'react'
+import { Image, StyleSheet, Text } from 'react-native'
+import { View } from 'react-native'
 
 const AttachComponent = () => {
-  const { theme, changeTheme } = useContext(ThemeContext);
-
   return (
-    <View
-      style={{
-        flexDirection: "row",
-        gap: 20,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: theme === "dark" ? Colors.dark._3 : "white",
-        padding: 40,
-        borderRadius: 20,
-      }}
-    >
+    <View style={{flexDirection: "row", gap: 20, alignItems: 'center', justifyContent: "center"}}>
       <View style={styles.card}>
-        <Image source={require("@/assets/images/documentImg.png")} />
-        <Text style={[Typography.semiBold.large, styles.text, {color: theme==="dark"? "white": "black"}]}>Document</Text>
+        <Image source={require("@/assets/images/documentImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Document</Text>
       </View>
       <View style={styles.card}>
-        <Image source={require("@/assets/images/garellyImg.png")} />
-        <Text style={[Typography.semiBold.large, styles.text,{color: theme==="dark"? "white": "black"}]}>Gallery</Text>
+        <Image source={require("@/assets/images/garellyImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Gallery</Text>
       </View>
       <View style={styles.card}>
-        <Image source={require("@/assets/images/audioImg.png")} />
-        <Text style={[Typography.semiBold.large, styles.text, {color: theme==="dark"? "white": "black"}]}>Audio</Text>
+        <Image source={require("@/assets/images/audioImg.png")}/>
+        <Text style={[Typography.semiBold.large,styles.text]} >Audio</Text>
       </View>
     </View>
-  );
-};
+  )
+}
 
 const styles = StyleSheet.create({
   card: {
@@ -44,7 +30,7 @@ const styles = StyleSheet.create({
   },
   text: {
     textAlign: "center",
-  },
-});
+  }
+})
 
-export default AttachComponent;
+export default AttachComponent

app/(app)/Appointments/MessagingAppointment/Camera.tsx

@@ -1,6 +1,10 @@
+import { circleWithDots } from "@/components/UI/icons/circleWithDots";
+import { BlackFilterIcon } from "@/components/UI/icons/filterIcon";
 import { Colors } from "@/constants/Colors";
 import { ThemeContext } from "@/ctx/ThemeContext";
+import { MaterialIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
+import { StatusBar } from "expo-status-bar";
 import React, { useContext, useRef, useState } from "react";
 import {
   Button,

app/(app)/Appointments/MessagingAppointment/ChatMessaging.tsx

@@ -1,8 +1,9 @@
 import { BlueAttachIcon } from "@/components/UI/icons/attachIcon";
+import { WhiteMessageIcon } from "@/components/UI/icons/blueMessage";
 import { BlueCameraIcon } from "@/components/UI/icons/cameraIcon";
-import {  moreWhiteIcon } from "@/components/UI/icons/circleWithDots";
+import { circleWithDots } from "@/components/UI/icons/circleWithDots";
 import { WhiteDoubleTick, BlueDoubleTick } from "@/components/UI/icons/doubleTickIcon";
-import { BlackFilterIcon, filterWhiteIcon } from "@/components/UI/icons/filterIcon";
+import { BlackFilterIcon } from "@/components/UI/icons/filterIcon";
 import { blueImojiIcon } from "@/components/UI/icons/imojiIcon";
 import { WhiteVoiceIcon } from "@/components/UI/icons/voiceIcon";
 import { Colors } from "@/constants/Colors";
@@ -27,8 +28,6 @@ import { TouchableOpacity } from "react-native";
 import AttachComponent from "./AttachComponent";
 import { Image } from "react-native";
 import PlaySound from "./Playsound";
-import { backArrowBlack, backArrowWhite } from "@/components/UI/icons/backArrow";
-import { MoreIcon } from "@/assets/icons/MoreCircleSvg";
 
 function ChatMessaging() {
   const date = new Date();
@@ -80,9 +79,9 @@ function ChatMessaging() {
 
   return (
     <SafeAreaView
-      style={{ flex: 1, paddingTop: ios ? 10 : 30, backgroundColor:theme==="dark"? Colors.dark._1: "white" }}
+      style={{ flex: 1, paddingTop: ios ? 10 : 30, backgroundColor: "white" }}
     >
-      <StatusBar style={theme ==="dark"? "light": "dark"} />
+      <StatusBar style="dark" />
       <View
         style={{
           flexDirection: "row",
@@ -91,7 +90,7 @@ function ChatMessaging() {
           gap: 30,
           padding: 20,
           backgroundColor:
-            theme === "light" ? Colors.others.white : Colors.dark._1,
+            theme === "light" ? Colors.others.white : Colors.others.black,
         }}
       >
         <Pressable
@@ -101,17 +100,19 @@ function ChatMessaging() {
             alignItems: "center",
             justifyContent: "space-between",
             gap: 20,
-
+            backgroundColor:
+              theme === "light" ? Colors.others.white : Colors.others.black,
           }}
         >
-         <View>
-          <SvgXml xml={theme=== "dark"? backArrowWhite : backArrowBlack} />
-         </View>
+          <MaterialIcons
+            name="arrow-back"
+            size={25}
+            style={{ alignSelf: "center" }}
+          />
           <Text
             style={{
               fontSize: 24,
               fontWeight: "600",
-              color: theme==="dark"? Colors.others.white: Colors.others.black
             }}
           >
             Dr. Drake Boeson
@@ -121,19 +122,24 @@ function ChatMessaging() {
           <View
             style={[
               {
+                backgroundColor: Colors.others.white,
+                borderRadius: 10,
+                padding: 20,
                 position: "absolute",
                 right: 20,
                 top: 50,
+                zIndex:10
               },
+              styles.shadowProp,
             ]}
           >
             <MenuComponent closeMenu={handleChatMenu} />
           </View>
         )}
         <View style={{ flexDirection: "row", gap: 10 }}>
-          <SvgXml xml={ theme === "dark" ? filterWhiteIcon : BlackFilterIcon} />
+          <SvgXml xml={BlackFilterIcon} />
           <TouchableOpacity onPress={handleChatMenu}>
-            <SvgXml xml={ theme==="dark"?  moreWhiteIcon:MoreIcon} />
+            <SvgXml xml={circleWithDots} />
           </TouchableOpacity>
         </View>
       </View>
@@ -163,7 +169,6 @@ function ChatMessaging() {
               backgroundColor: "rgba(117, 117, 117, 0.2)",
               borderRadius: 10,
               marginBottom: 10,
-              color: theme==="dark"? Colors.grayScale._50 : Colors.others.black
             }}
           >
             Session Start
@@ -183,7 +188,7 @@ function ChatMessaging() {
                 flexDirection: "row",
                 alignItems: "baseline",
                 justifyContent:
-                message.user === "user" ? "flex-start" : "flex-end",
+                  message.user === "user" ? "flex-start" : "flex-end",
                 borderBottomEndRadius: message.user === "user" ? 10 : 20,
                 borderBottomStartRadius: message.user === "user1" ? 10 : 20,
                 borderRadius: 20,
@@ -197,11 +202,9 @@ function ChatMessaging() {
                   Typography.medium.xLarge,
                   {
                     color:
-                    message.user === "user" ? Colors.others.white : "black",
+                      message.user === "user" ? Colors.others.white : "black",
                     maxWidth: 250,
-                  },{
-                    color: theme ==="dark"? Colors.grayScale._50: "black"
-                  }
+                  },
                 ]}
               >
                 {message.chat}
@@ -302,13 +305,13 @@ function ChatMessaging() {
             <Text
               style={[
                 Typography.medium.xLarge,
-                { color: theme ==="dark"? Colors.grayScale._50: "black", maxWidth: 250 },
+                { color: Colors.others.black, maxWidth: 250 },
               ]}
             >
               Hi, good afternoon Dr. Drake... 😁😁
             </Text>
             <View>
-              <Text style={{ color:  Colors.grayScale._50 }}>16:00</Text>
+              <Text style={{ color: "rgba(117, 117, 117, 0.5)" }}>16:00</Text>
             </View>
           </View>
           <View
@@ -387,7 +390,6 @@ function ChatMessaging() {
               backgroundColor: "rgba(117, 117, 117, 0.2)",
               borderRadius: 10,
               marginVertical: 10,
-              color: theme==="dark"? Colors.grayScale._50 : "black"
             }}
           >
             Session End
@@ -399,8 +401,11 @@ function ChatMessaging() {
             <View
               style={[
                 {
+                  backgroundColor: Colors.others.white,
+                  padding: 40,
                   position: "absolute",
                   top: -190,
+                  borderRadius: 20,
                   left: 40,
                 },
                 styles.shadowProp,
@@ -481,6 +486,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 3,
     elevation: 10,
+    backgroundColor:Colors.others.white
+
   },
 });
 export default ChatMessaging;

app/(app)/Appointments/MessagingAppointment/Menu.tsx

@@ -1,36 +1,32 @@
-import React, { useContext } from "react";
-import { BlackDeleteIcon, deleteWhiteIcon } from "@/components/UI/icons/deleteIcon"
-import { BlackDownloadIcon, downloadWhiteIcon } from "@/components/UI/icons/downloadIcon"
+import React from "react";
+import { BlackDeleteIcon } from "@/components/UI/icons/deleteIcon"
+import { BlackDownloadIcon } from "@/components/UI/icons/downloadIcon"
 import { Colors } from "@/constants/Colors";
 import Typography from "@/constants/Typography";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import { SvgXml } from "react-native-svg"
-import { ThemeContext } from "@/ctx/ThemeContext";
 
 interface MenuComponentProps {
   closeMenu: () => void;
 }
 
 const MenuComponent: React.FC<MenuComponentProps> = ({closeMenu})=>{
-    const { theme, changeTheme } = useContext(ThemeContext);
 
     return(
       <View style={{
         gap: 15,
-        backgroundColor: theme ==="dark"?  Colors.others.black :Colors.others.white,
-        padding: 20,
-        borderRadius: 10
+        backgroundColor:Colors.others.white,
       }}>
         <TouchableOpacity style={styles.iconText}
         onPress={closeMenu}>
-          <SvgXml xml={theme === "dark"? deleteWhiteIcon :BlackDeleteIcon}/>
-          <Text style={[Typography.bold.medium, {color: theme==="dark"? "white": "black"}]}>Clear Chat</Text>
+          <SvgXml xml={BlackDeleteIcon}/>
+          <Text style={Typography.bold.medium}>Clear Chat</Text>
         </TouchableOpacity>
         <View style={{borderColor: "rgba(0, 0, 0,0.2 )", borderWidth: 0.3}}></View>
         <TouchableOpacity style={styles.iconText}
         onPress={closeMenu}>
-          <SvgXml xml={theme==="dark"? downloadWhiteIcon :BlackDownloadIcon} />
-          <Text style={[Typography.bold.medium, {color: theme==="dark"? "white": "black"}]}>Export Chat</Text>
+          <SvgXml xml={BlackDownloadIcon} />
+          <Text style={Typography.bold.medium}>Export Chat</Text>
         </TouchableOpacity>
       </View>
     )

app/(app)/Appointments/MessagingAppointment/_layout.tsx

@@ -5,6 +5,7 @@ export default function Layout() {
     return (
 <Stack>
     <Stack.Screen  name="index" options={{headerShown:false}}/>
+    <Stack.Screen  name="AppointmentMessaging" options={{headerShown:false}}/>
     <Stack.Screen  name="ChatMessaging" options={{headerShown:false}}/>
     <Stack.Screen  name="Camera" options={{headerShown:false}}/>
 </Stack>