Responsive EnergyTooltip

app.json

@@ -6,5 +6,5 @@
   "versionFlag": "private-beta-rc",
   "requiredServerVersion": "0.0.12",
 
-  "productionMode": true
+  "productionMode": false
 }

src/components/map/DropyMap.js

@@ -227,6 +227,19 @@ const DropyMap = ({
         {developerMode && <MapDebugger userCoordinates={userCoordinates} />}
       </OSMapView>
 
+      <EnergyPopup />
+      <Sonar zoom={currentZoom} heading={currentHeading} visible={!museumVisible} compassHeading={compassHeading} />
+      <MapLoadingOverlay visible={geolocationInitialized === false} isGeolocationPermissionGranted={locationGranted}/>
+      <LinearGradient
+        pointerEvents='none'
+        colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.1)']}
+        start={{ x: 0.5, y: 0.8 }}
+        end={{ x: 0.5, y: 1 }}
+        style={StyleSheet.absoluteFillObject}
+      />
+      <DebugText marginBottom={100}>{JSON.stringify(userCoordinates, null, 2)}</DebugText>
+      <DebugText marginBottom={300}>{JSON.stringify(dropiesAround, null, 2)}</DebugText>
+
       <SafeAreaView style={styles.controlsView}>
         <FadeInWrapper visible={!museumVisible}>
           <EnergyTooltip>
@@ -245,19 +258,6 @@ const DropyMap = ({
           </TouchableOpacity>
         </FadeInWrapper>
       </SafeAreaView>
-
-      <EnergyPopup />
-      <Sonar zoom={currentZoom} heading={currentHeading} visible={!museumVisible} compassHeading={compassHeading} />
-      <MapLoadingOverlay visible={geolocationInitialized === false} isGeolocationPermissionGranted={locationGranted}/>
-      <LinearGradient
-        pointerEvents='none'
-        colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.1)']}
-        start={{ x: 0.5, y: 0.8 }}
-        end={{ x: 0.5, y: 1 }}
-        style={StyleSheet.absoluteFillObject}
-      />
-      <DebugText marginBottom={100}>{JSON.stringify(userCoordinates, null, 2)}</DebugText>
-      <DebugText marginBottom={300}>{JSON.stringify(dropiesAround, null, 2)}</DebugText>
     </>
   );
 };

src/components/map/EnergyTooltip.js

@@ -100,29 +100,26 @@ export default EnergyTooltip;
 const styles = StyleSheet.create({
   tooltipContainer: {
     ...Styles.center,
+    ...Styles.hardShadows,
     position: 'absolute',
     bottom: 15,
     left: -210,
     right: 0,
-    height: 110,
     width: 210,
     borderRadius: 10,
     backgroundColor: Colors.purple2,
-    ...Styles.hardShadows,
+    padding: 10,
   },
   titleView: {
     alignItems: 'center',
     flexDirection: 'row',
     width: '90%',
-    marginTop: 7,
-    marginLeft: 5,
   },
   energyValue: {
     ...Fonts.bold(12, Colors.white),
-    marginLeft: 5,
   },
   description: {
     ...Fonts.bold(11, Colors.white),
-    margin: 8,
+    marginTop: 5,
   },
 });