1 files changed, 73 insertions, 57 deletions

diff --git a/src/Components/MapOverlay.tsx b/src/Components/MapOverlay.tsx
index 30160c9..faf484e 100644
--- a/src/Components/MapOverlay.tsx
+++ b/src/Components/MapOverlay.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View, Text, GestureResponderEvent, ActivityIndicator, Linking } from 'react-native';
 import { FontAwesome } from '@expo/vector-icons';
-import { getStatusBarHeight } from '../helper';
+import { getStatusBarHeight, getBottomSpace } from '../helper';
 import { LatLng } from '../Api/interfaces';
 
 type Props = {
@@ -13,72 +13,88 @@ type Props = {
 }
 
 export default (props: Props) => (
-    <View style={styles.overlay}>
-        <View style={styles.button}>
-            <FontAwesome.Button
-                name={'crosshairs'}
-                onPress={props.goToMe}
-                iconStyle={styles.icon}
-                color={"#000"}
-                size={24}
-                backgroundColor={"#e3e3e3"}
-            />
-        </View>
-        <View style={styles.button}>
-            <FontAwesome.Button
-                name={'refresh'}
-                onPress={props.refresh}
-                iconStyle={styles.icon}
-                color={"#000"}
-                size={24}
-                backgroundColor={"#e3e3e3"}
-            />
-        </View>
-        {props.selectedPortal ? (
-            <>
-                <View style={styles.button}>
-                    <FontAwesome.Button
-                        name={'info'}
-                        onPress={() => {
-                            props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
-                        }}
-                        iconStyle={styles.icon}
-                        color={"#000"}
-                        size={24}
-                        backgroundColor={"#e3e3e3"}
-                    />
-                </View>
-                <View style={styles.button}>
-                    <FontAwesome.Button
-                        name={'location-arrow'}
-                        onPress={() => Linking.openURL(`geo:${props.selectedPortal.coords.latitude},${props.selectedPortal.coords.longitude}`)}
-                        iconStyle={styles.icon}
-                        color={"#000"}
-                        size={24}
-                        backgroundColor={"#e3e3e3"}
-                    />
+    <>
+        <View style={styles.overlayLeft}>
+            {props.loading > 0 ? (
+                <View style={styles.loader}>
+                    <ActivityIndicator color={"#000"} />
                 </View>
-            </>
-        ) : null}
-
-        <View style={styles.button}>
-            <Text>{props.loading}</Text>
+            ) : null}
+            {props.selectedPortal ? (
+                <>
+                    <View style={styles.buttonWrapper}>
+                        <FontAwesome.Button
+                            style={styles.button}
+                            name={'info'}
+                            onPress={() => {
+                                props.onOpenPortal(props.selectedPortal.guid, props.selectedPortal.coords)
+                            }}
+                            iconStyle={styles.icon}
+                            color={"#000"}
+                            size={25}
+                            backgroundColor={"#e3e3e3"}
+                        />
+                    </View>
+                    <View style={styles.buttonWrapper}>
+                        <FontAwesome.Button
+                            style={styles.button}
+                            name={'location-arrow'}
+                            onPress={() => Linking.openURL(`geo:${props.selectedPortal.coords.latitude},${props.selectedPortal.coords.longitude}`)}
+                            iconStyle={styles.icon}
+                            color={"#000"}
+                            size={25}
+                            backgroundColor={"#e3e3e3"}
+                        />
+                    </View>
+                </>
+            ) : null}
         </View>
-        {props.loading > 0 ? (
-            <View style={styles.loader}>
-                <ActivityIndicator color={"#000"} />
+
+        <View style={styles.overlayRight}>
+            <View style={styles.buttonWrapper}>
+                <FontAwesome.Button
+                    style={styles.button}
+                    name={'crosshairs'}
+                    onPress={props.goToMe}
+                    iconStyle={styles.icon}
+                    color={"#000"}
+                    size={25}
+                    backgroundColor={"#e3e3e3"}
+                />
             </View>
-        ) : null}
-    </View>
+            <View style={styles.buttonWrapper}>
+                <FontAwesome.Button
+                    style={styles.button}
+                    name={'refresh'}
+                    onPress={props.refresh}
+                    iconStyle={styles.icon}
+                    color={"#000"}
+                    size={25}
+                    backgroundColor={"#e3e3e3"}
+                />
+            </View>
+        </View>
+    </>
 );
 
 const styles = StyleSheet.create({
-    overlay: {
+    overlayLeft: {
         position: 'absolute',
-        top: 8 + getStatusBarHeight(true),
+        bottom: getBottomSpace(),
+        left: 8,
+    },
+    overlayRight: {
+        position: 'absolute',
+        bottom: getBottomSpace(),
         right: 8,
     },
     button: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 48,
+        width: 48,
+    },
+    buttonWrapper: {
         margin: 8,
     },
     icon: {