added styling to indoor page

src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -95,10 +95,11 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
   function arrowBut(num, fontAweIcon) {
     if (num != 0) {
       return (
-        <View style={{ flex: 1.2, marginHorizontal: 7, backgroundColor: colors.red, height: 53.5, maxWidth: 60 }}>
+        <View style={{ flex: 1.2, marginHorizontal: 7, backgroundColor: "#d4d4d4", height: 53.5, maxWidth: 60 }}>
           <TouchableOpacity style={styles.arrowButton} onPress={() => { setFloor(prevState => prevState + num) }}>
-            <View style={{ flex: 1, justifyContent: "center" }}>
-              <FontAwesome style={{ alignSelf: "center" }} color={"black"} size={50} name={fontAweIcon} />
+            <View style={{ flex: 1, justifyContent: "center" , alignItems:"center"}}>
+              {/* <FontAwesomeIcon icon="fa-solid fa-left" /> */}
+              <FontAwesome style={{marginLeft: (num==1 ? 5 : -5)}} color={"white"} size={35} name={fontAweIcon} />
             </View>
           </TouchableOpacity>
         </View>
@@ -278,17 +279,18 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
     <View style={{ height: '100%', width: '100%', padding: 5 }}>
       {/* {console.log("THE STATE IS NOW " + floor)} */}
 
-      <StatusBar backgroundColor="#121212" />
+      <StatusBar backgroundColor={colors.red} />
       <CustomModal />
       {/* <Text style={{ fontSize: 16, marginBottom: 5 }}>Please select a floor you would like to go to.</Text> */}
 
       <View style={{ borderColor: "blue", borderWidth: 0, maxHeight: 50, flex: 1, flexDirection: "row", justifyContent: "center", }}>
 
-      {floor == 0 ? arrowBut(0, "") : arrowBut(-1, "arrow-circle-o-left")}
+      {/* arrow-circle-o-right */}
+      {floor == 0 ? arrowBut(0, "") : arrowBut(-1, "chevron-left")}
 
 
         <Picker
-          style={{ backgroundColor: '#d9d9d9', width: 200, height: 50, flex: 5 }}
+          style={{ backgroundColor: colors.red, width: 200, height: 50, flex: 5, color:'white' }}
           selectedValue={floor} // the text of what gets displayed on the dropdown header
           onValueChange={(itemValue, itemIndex: number) => {
             setFloor(itemIndex)
@@ -303,7 +305,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
           <Picker.Item label="Fifth Floor" value={5} />
         </Picker>
 
-        {floor == 5 ? arrowBut(0, "") : arrowBut(1, "arrow-circle-o-right")}
+        {floor == 5 ? arrowBut(0, "") : arrowBut(1, "chevron-right")}
 
       </View>
 
@@ -318,7 +320,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
             <ReactNativeZoomableView
               
-              panBoundaryPadding={50}
+              panBoundaryPadding={100}
               // bindToBorders={false}
               bindToBorders={true}
               
@@ -432,7 +434,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
         setLocalLandmarks(landmarks)
       }} /> */}
 
-      <Button title="Go back to map" onPress={() => navigation.goBack()} />
+      <Button title="Go back to map" color={colors.red} onPress={() => navigation.goBack()} />
       {/* <TouchableOpacity style={styles.arrowButton} onPress={() => setFloor(prevState => prevState+1)} ><Text>Increase floor by 1</Text></TouchableOpacity> */}
 
 
@@ -471,7 +473,7 @@ const styles = StyleSheet.create({
   },
   arrowButton: {
     flex: 1,
-    backgroundColor: "#d4d4d4",
+    backgroundColor: colors.red,
     // backgroundColor: "blue",
     height: 53.5,
     // borderRadius: 10,