Adjust text vertical centering around pulse (#466)

Path-Check · Apr 12, 2020 · f125591 · f125591
1 parent bb1d6b7
commit f125591
Showing 1 changed file with 38 additions and 12 deletions.
diff --git a/app/views/LocationTracking.js b/app/views/LocationTracking.js
@@ -420,14 +420,21 @@ class LocationTracking extends Component {
           translucent={true}
         />
         {this.getPulseIfNeeded()}
+
         <View style={styles.mainContainer}>
-          <View style={styles.contentContainer}>
-            {this.getMainText()}
+          <View style={styles.contentAbovePulse}>
+            {this.state.currentState === StateEnum.AT_RISK &&
+              this.getMainText()}
             <Text style={styles.subsubheaderText}>{this.getSubSubText()}</Text>
+          </View>
+          <View style={styles.contentBelowPulse}>
+            {this.state.currentState !== StateEnum.AT_RISK &&
+              this.getMainText()}
             <Text style={styles.subheaderText}>{this.getSubText()}</Text>
             {this.getCTAIfNeeded()}
           </View>
         </View>
+
         <View>
           <TouchableOpacity
             onPress={this.getMayoInfoPressed.bind(this)}
@@ -459,21 +466,40 @@ class LocationTracking extends Component {
   }
 }
 
+const PULSE_GAP = 80;
+
 const styles = StyleSheet.create({
   backgroundImage: {
     width: '100%',
     height: '100%',
     resizeMode: 'cover',
     flex: 1,
+    justifyContent: 'flex-end',
   },
   mainContainer: {
-    top: '50%',
+    position: 'absolute',
+    // resizeMode: 'contain',
+    // aligns the center of the main container with center of pulse
+    // so that two `flex: 1` views will be have a reasonable chance at natural
+    // flex flow for above and below the pulse.
+    top: '-10%',
+    left: 0,
+    right: 0,
+    height: '100%',
+    paddingHorizontal: '12%',
+    paddingBottom: 12,
+  },
+  contentAbovePulse: {
     flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: PULSE_GAP / 2,
   },
-  contentContainer: {
-    width: width * 0.65,
+  contentBelowPulse: {
     flex: 1,
-    alignSelf: 'center',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingTop: PULSE_GAP,
   },
   settingsContainer: {
     position: 'absolute',
@@ -483,11 +509,12 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   buttonContainer: {
-    top: '9%',
+    top: 24,
   },
   pulseContainer: {
     position: 'absolute',
     resizeMode: 'contain',
+    height: '100%',
     top: '-13%',
     left: 0,
     right: 0,
@@ -496,8 +523,7 @@ const styles = StyleSheet.create({
   mainTextAbove: {
     textAlign: 'center',
     lineHeight: 34,
-    marginTop: -210,
-    marginBottom: 125,
+    marginBottom: 24,
     color: Colors.WHITE,
     fontSize: 28,
     fontFamily: fontFamily.primaryMedium,
@@ -508,23 +534,23 @@ const styles = StyleSheet.create({
     color: Colors.WHITE,
     fontSize: 26,
     fontFamily: fontFamily.primaryMedium,
+    marginBottom: 24,
   },
   subheaderText: {
-    marginTop: 120,
+    marginBottom: 24,
     textAlign: 'center',
     lineHeight: 24.5,
     color: Colors.WHITE,
     fontSize: 18,
     fontFamily: fontFamily.primaryRegular,
   },
   subsubheaderText: {
-    marginTop: -115,
     textAlign: 'center',
     lineHeight: 24.5,
     color: Colors.WHITE,
     fontSize: 16,
     fontFamily: fontFamily.primaryLight,
-    marginBottom: '8%',
+    marginBottom: 24,
   },
   mayoInfoRow: {
     flexDirection: 'row',