From 1db9dd9b546f00cf1d080e93c57a6f199ddb7a96 Mon Sep 17 00:00:00 2001
From: Arwen Dowers <127459621+arwendowers@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:47:59 -0500
Subject: [PATCH] Added styling to chat screen header (#301)

* added styling to chat screen header
Co-authored-by: Dylan <dylan.coben@gmail.com>
---
 client/app/components/chat/NearbyCount.tsx  | 41 -------------
 client/app/components/chat/NearbyHeader.tsx | 64 ++++++++++++++++-----
 client/app/screens/chat/ChatScreen.tsx      | 14 ++---
 client/app/types/Props.ts                   |  5 --
 4 files changed, 53 insertions(+), 71 deletions(-)
 delete mode 100644 client/app/components/chat/NearbyCount.tsx

diff --git a/client/app/components/chat/NearbyCount.tsx b/client/app/components/chat/NearbyCount.tsx
deleted file mode 100644
index ce5bfd3ad..000000000
--- a/client/app/components/chat/NearbyCount.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { View, Image, StyleSheet, Text, Dimensions } from "react-native";
-
-import { CounterProps } from "../../types/Props";
-
-const NearbyCount: React.FC<CounterProps> = ({ count }) => {
-  return (
-    <View style={styles.iconContainer}>
-      <View style={styles.iconAndCount}>
-        <Image
-          style={styles.iconImage}
-          source={require("../../../assets/icons/misc/nearby_icon.png")}
-        />
-        <Text style={styles.countText}>{count}</Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  iconImage: {
-    height: Dimensions.get("window").height * 0.025,
-    width: Dimensions.get("window").height * 0.03,
-  },
-  iconContainer: {
-    width: "50%",
-  },
-  iconAndCount: {
-    alignSelf: "flex-end",
-    alignItems: "center",
-  },
-  countText: {
-    fontSize: 20,
-    fontWeight: "bold",
-    color: "black",
-    textAlign: "center",
-    width: "50%",
-  },
-});
-
-export default NearbyCount;
diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
index f99b8da1f..93086af07 100644
--- a/client/app/components/chat/NearbyHeader.tsx
+++ b/client/app/components/chat/NearbyHeader.tsx
@@ -1,15 +1,25 @@
 import React from "react";
-import { View, Text, StyleSheet, Dimensions } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  Image,
+  TouchableOpacity,
+} from "react-native";
+import { ChevronLeft } from "react-native-feather";
 
-import NearbyCount from "./NearbyCount";
-import { CounterProps } from "../../types/Props";
-
-export const NearbyHeader: React.FC<CounterProps> = ({ count }) => {
+export const NearbyHeader: React.FC = () => {
   return (
     <View style={styles.nearbyContainer}>
-      <View style={{ flexDirection: "row" }}>
-        <Text style={styles.nearbyText}>Nearby</Text>
-        <NearbyCount count={count} />
+      <ChevronLeft color="white" strokeWidth={1.4} width={40} height={40} />
+      <Text style={styles.nearbyText}>Nearby</Text>
+      <View style={styles.iconContainer}>
+        <Image
+          style={styles.peopleIcon}
+          source={require("../../../assets/icons/misc/nearby_icon.png")}
+        />
+        <Text style={styles.countText}>{5}</Text>
       </View>
     </View>
   );
@@ -17,18 +27,42 @@ 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,
+    display: "flex",
     flexDirection: "row",
+    backgroundColor: "#34D1BF",
+    width: "100%",
     alignItems: "center",
+    justifyContent: "flex-start",
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+    paddingVertical: 15,
+    paddingRight: 25,
+    paddingLeft: 10,
+    gap: 10,
   },
   nearbyText: {
-    fontSize: 30,
+    fontFamily: "Quicksand",
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+    marginRight: "auto",
+  },
+  peopleIcon: {
+    tintColor: "white",
+    height: Dimensions.get("window").height * 0.025,
+    width: Dimensions.get("window").height * 0.03,
+  },
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  countText: {
+    fontFamily: "Quicksand",
+    fontSize: 13,
     fontWeight: "bold",
-    color: "black",
-    textAlign: "left",
-    width: "35%",
-    marginLeft: "5%",
+    color: "white",
   },
 });
 
diff --git a/client/app/screens/chat/ChatScreen.tsx b/client/app/screens/chat/ChatScreen.tsx
index d39d48ce2..b99b4d0bd 100644
--- a/client/app/screens/chat/ChatScreen.tsx
+++ b/client/app/screens/chat/ChatScreen.tsx
@@ -17,6 +17,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();
@@ -89,16 +90,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>
diff --git a/client/app/types/Props.ts b/client/app/types/Props.ts
index 7c6c77098..a5c1e38d8 100644
--- a/client/app/types/Props.ts
+++ b/client/app/types/Props.ts
@@ -29,11 +29,6 @@ export type MessageChannelProps = {
   messages: Message[];
 };
 
-/* misc props*/
-export type CounterProps = {
-  count: number;
-};
-
 export type SafeAreaWrapperProps = {
   children: React.ReactNode;
 };