Inside IndoorMaps, I changed background to red and decreased the size of chevron arrows

src/components/Map/MainMapComponent/ArrowButton.tsx

@@ -7,15 +7,12 @@ import { colors, lmTypes } from "../../../utils/GlobalUtils";
 function ArrowButton(props) {
     if (props.num != 0) {
         return (
-          <View style={{ flex: 1.2, marginHorizontal: 7, backgroundColor: "#d4d4d4", height: 53.5, maxWidth: 60, borderRadius: 8 }}>
-            {/* <TouchableOpacity style={styles.arrowButton} onPress={() => { setFloor(prevState => prevState + props.num) }}></TouchableOpacity> */}
             <TouchableOpacity style={styles.arrowButton} onPress={props.propEvent} >
               <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                 {/* <FontAwesomeIcon icon="fa-solid fa-left" /> */}
-                <FontAwesome style={{ marginLeft: (props.num == 1 ? 5 : -5) }} color={"white"} size={35} name={props.fontAweIcon} />
+                <FontAwesome style={{ marginLeft: (props.num == 1 ? 5 : -5) }} color={"white"} size={20} name={props.fontAweIcon} />
               </View>
             </TouchableOpacity>
-          </View>
         )
       }
       else {

src/components/Map/MainMapComponent/IndoorMap.tsx

@@ -132,7 +132,7 @@ const IndoorMap: React.FC<IndoorMapProps> = ({ navigation, landmarks, promptAddL
 
   // TODO: wire up promptaddlandmark, applyfilters, and focuslandmark methods passed from MapNavigator
   return (
-    <View style={{ height: '100%', width: '100%', padding: 5 }}>
+    <View style={{ height: '100%', width: '100%', padding: 5, backgroundColor:colors.red }}>
       {/* {console.log("THE STATE IS NOW " + floor)} */}
 
       <StatusBar backgroundColor={colors.red} />
@@ -268,7 +268,8 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     maxWidth: "100%",
-    maxHeight: "100%"
+    maxHeight: "100%",
+    backgroundColor:"white"
   },
   image: {
     alignItems: 'center',

src/navigation/MapNavigator.tsx

@@ -161,7 +161,7 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
 
             {/* Filter chips and button*/}
             {!mapState.filterVisible && currentRoute == 'Indoor' ?
-                <View style={{ width: Dimensions.get("window").width * 0.8, marginLeft: Dimensions.get("window").width * 0.1, borderColor: "red", borderWidth: 0, bottom: 55, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
+                <View style={{ width: Dimensions.get("window").width * 0.8, marginLeft: Dimensions.get("window").width * 0.12, borderColor: "red", borderWidth: 0, top: 75, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
                     <IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
                     <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
                         {mapState.onlyOwned ? <Chip avatar={(<FontAwesome name="user" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginRight: 5, marginLeft: 10 }} onClose={() => mapState.toggleOnlyOwned(false)}>My landmarks</Chip> : null}