added styling to chat screen header

ufosc · Oct 4, 2024 · f8c9853 · f8c9853
1 parent 89257f9
commit f8c9853
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/client/app/components/chat/NearbyCount.tsx b/client/app/components/chat/NearbyCount.tsx
@@ -19,20 +19,24 @@ const NearbyCount: React.FC<CounterProps> = ({ count }) => {
 
 const styles = StyleSheet.create({
   iconImage: {
+    tintColor: "white",
     height: Dimensions.get("window").height * 0.025,
     width: Dimensions.get("window").height * 0.03,
   },
   iconContainer: {
     width: "50%",
+    marginRight: 35,
+    marginTop: 18,
   },
   iconAndCount: {
     alignSelf: "flex-end",
     alignItems: "center",
   },
   countText: {
-    fontSize: 20,
+    fontFamily: "Quicksand",
+    fontSize: 13,
     fontWeight: "bold",
-    color: "black",
+    color: "white",
     textAlign: "center",
     width: "50%",
   },

diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, StyleSheet, Dimensions } from "react-native";
+import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
 
 import NearbyCount from "./NearbyCount";
 import { CounterProps } from "../../types/Props";
@@ -8,6 +8,10 @@ export const NearbyHeader: React.FC<CounterProps> = ({ count }) => {
   return (
     <View style={styles.nearbyContainer}>
       <View style={{ flexDirection: "row" }}>
+        <Image
+          source={require("../../../assets/icons/arrow/angle-right.png")}
+          style={styles.backArrow}
+        />
         <Text style={styles.nearbyText}>Nearby</Text>
         <NearbyCount count={count} />
       </View>
@@ -17,18 +21,34 @@ export const NearbyHeader: React.FC<CounterProps> = ({ count }) => {
 
 const styles = StyleSheet.create({
   nearbyContainer: {
-    paddingTop: Dimensions.get("window").height * 0.01,
-    paddingBottom: Dimensions.get("window").height * 0.01,
-    flexDirection: "row",
+    backgroundColor: "#34D1BF",
+    width: "100%",
     alignItems: "center",
+    justifyContent: "space-between",
+    shadowColor: "black",
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
   },
   nearbyText: {
-    fontSize: 30,
+    fontFamily: "Quicksand",
+    fontSize: 24,
     fontWeight: "bold",
-    color: "black",
-    textAlign: "left",
-    width: "35%",
-    marginLeft: "5%",
+    color: "white",
+    textAlign: "center",
+    height: 70,
+    marginLeft: 110,
+    marginRight: "auto",
+    top: 18,
+  },
+  backArrow: {
+    transform: "scale(-1)",
+    height: 27,
+    width: 10,
+    tintColor: "white",
+    position: "absolute",
+    marginLeft: 33,
+    top: 22,
   },
 });
 

diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
@@ -18,6 +18,7 @@ import { AuthStore } from "../../services/AuthStore";
 import { Message } from "../../types/Message";
 import { useState, useEffect } from "react";
 import { useUser } from "@app/contexts/UserContext";
+import NearbyHeader from "@app/components/chat/NearbyHeader";
 
 const ChatScreen = () => {
   const settings = useSettings();
@@ -90,16 +91,9 @@ const ChatScreen = () => {
           Platform.OS === "ios" ? screenHeight * 0.055 : 0
         }>
         <View style={styles.mainContainer}>
-          <View style={styles.headerContainer}>
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-                color: "white",
-              }}>
-              Chat Screen
-            </Text>
-          </View>
+        <NearbyHeader
+            count = {5} //test count value
+          />
           <View style={styles.chatContainer}>
             <MessageChannel messages={messages} />
           </View>