Edit text and text alignment

clarlzx · Jun 16, 2021 · 13095d1 · 13095d1
1 parent 9f10b42
commit 13095d1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/components/RecommendationItem.js b/components/RecommendationItem.js
@@ -137,11 +137,13 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: "bold",
     color: "darkblue",
+    textAlign: "center",
   },
   distanceTextBottom: {
     fontSize: 15,
     fontWeight: "bold",
     color: "darkblue",
+    textAlign: "center",
   },
   drivingContainer: {
     width: Dimensions.get("screen").width * 0.16,
@@ -152,6 +154,7 @@ const styles = StyleSheet.create({
   drivingText: {
     fontWeight: "bold",
     color: "indianred",
+    textAlign: "center",
   },
   walkingContainer: {
     width: Dimensions.get("screen").width * 0.16,
@@ -162,5 +165,6 @@ const styles = StyleSheet.create({
   walkingText: {
     fontWeight: "bold",
     color: "darkolivegreen",
+    textAlign: "center",
   },
 });
diff --git a/screens/CrowdScreen.js b/screens/CrowdScreen.js
@@ -131,15 +131,21 @@ export default function CrowdScreen() {
         <Text style={{ fontSize: 14, fontWeight: "bold" }}>Legend:</Text>
         <View style={{ marginLeft: 10 }}>
           <View style={styles.notcrowdedcircle} />
-          <Text style={{ fontSize: 11 }}>{"Not Crowded\n(<50%)"}</Text>
+          <Text style={{ fontSize: 11, textAlign: "right" }}>
+            {"Not Crowded\n(<50%)"}
+          </Text>
         </View>
         <View style={{ marginLeft: 10 }}>
           <View style={styles.somecrowdcircle} />
-          <Text style={{ fontSize: 11 }}>{"Some Crowd\n(50%-75%)"}</Text>
+          <Text style={{ fontSize: 11, textAlign: "right" }}>
+            {"Some Crowd\n(50%-75%)"}
+          </Text>
         </View>
         <View style={{ marginLeft: 10 }}>
           <View style={styles.crowdedcircle} />
-          <Text style={{ fontSize: 11 }}>{"Crowded\n(>75%)"}</Text>
+          <Text style={{ fontSize: 11, textAlign: "right" }}>
+            {"Crowded\n(>75%)"}
+          </Text>
         </View>
       </View>
 

diff --git a/screens/SafetyMeasuresScreen.js b/screens/SafetyMeasuresScreen.js
@@ -107,11 +107,13 @@ export default function SafetyMeasuresScreen() {
           <Text style={{ fontSize: 14, fontWeight: "bold" }}>Legend:</Text>
           <View style={{ marginLeft: 10 }}>
             <View style={styles.entranceCircle} />
-            <Text style={{ fontSize: 11 }}>Entrances</Text>
+            <Text style={{ fontSize: 11, textAlign: "right" }}>Entrances</Text>
           </View>
           <View style={{ marginLeft: 10 }}>
             <View style={styles.handSanitiserCircle} />
-            <Text style={{ fontSize: 11 }}>Hand sanitiser{"\n"}points</Text>
+            <Text style={{ fontSize: 11, textAlign: "right" }}>
+              Hand Sanitiser{"\n"}Points
+            </Text>
           </View>
         </View>
         <MapView
@@ -147,7 +149,7 @@ export default function SafetyMeasuresScreen() {
                 pinColor="aqua"
                 key={index}
                 coordinate={item.coordinates}
-                title="Hand sanitiser point"
+                title="Hand Sanitiser Point"
               />
             );
           })}