Fixed css and merged nearbyheader with nearbycount

client/app/components/chat/NearbyHeader.tsx

@@ -1,54 +1,68 @@
 import React from "react";
-import { View, Text, StyleSheet, Dimensions, Image } 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" }}>
+      <ChevronLeft color="white" strokeWidth={1.4} width={40} height={40} />
+      <Text style={styles.nearbyText}>Nearby</Text>
+      <View style={styles.iconContainer}>
         <Image
-          source={require("../../../assets/icons/arrow/angle-right.png")}
-          style={styles.backArrow}
+          style={styles.peopleIcon}
+          source={require("../../../assets/icons/misc/nearby_icon.png")}
         />
-        <Text style={styles.nearbyText}>Nearby</Text>
-        <NearbyCount count={count} />
+        <Text style={styles.countText}>{5}</Text>
       </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   nearbyContainer: {
+    display: "flex",
+    flexDirection: "row",
     backgroundColor: "#34D1BF",
     width: "100%",
     alignItems: "center",
-    justifyContent: "space-between",
+    justifyContent: "flex-start",
     shadowColor: "black",
-    shadowOffset: {width: 0, height: 2},
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.3,
     shadowRadius: 2,
+    paddingVertical: 15,
+    paddingRight: 25,
+    paddingLeft: 10,
+    gap: 10,
   },
   nearbyText: {
     fontFamily: "Quicksand",
     fontSize: 24,
     fontWeight: "bold",
     color: "white",
-    textAlign: "center",
-    height: 70,
-    marginLeft: 110,
     marginRight: "auto",
-    top: 18,
   },
-  backArrow: {
-    transform: "scale(-1)",
-    height: 27,
-    width: 10,
+  peopleIcon: {
     tintColor: "white",
-    position: "absolute",
-    marginLeft: 33,
-    top: 22,
+    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: "white",
   },
 });
 

client/app/types/Props.ts

@@ -32,11 +32,6 @@ export type MessageChannelProps = {
   messages: Message[];
 };
 
-/* misc props*/
-export type CounterProps = {
-  count: number;
-};
-
 export type SafeAreaWrapperProps = {
   children: React.ReactNode;
 };