Added styling to chat screen header (#301)

* added styling to chat screen header Co-authored-by: Dylan <[email protected]>
ufosc · Nov 7, 2024 · 1db9dd9 · 1db9dd9
1 parent a8fcde6
commit 1db9dd9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 71 deletions.
diff --git a/client/app/components/chat/NearbyCount.tsx b/client/app/components/chat/NearbyCount.tsx
diff --git a/client/app/components/chat/NearbyHeader.tsx b/client/app/components/chat/NearbyHeader.tsx
@@ -1,34 +1,68 @@
 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>
   );
 };
 
 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
@@ -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
@@ -29,11 +29,6 @@ export type MessageChannelProps = {
   messages: Message[];
 };
 
-/* misc props*/
-export type CounterProps = {
-  count: number;
-};
-
 export type SafeAreaWrapperProps = {
   children: React.ReactNode;
 };