Add emojis to train status

* Add emojis to train status * Add bold to "TBD" * See #18
axelclark · Jun 16, 2018 · 3096a56 · 3096a56
1 parent fb2ff2a
commit 3096a56
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 25 deletions.
diff --git a/components/TrainList.js b/components/TrainList.js
@@ -24,11 +24,16 @@ const Destination = ({ destinationName, line, cars }) => (
 const Arrival = ({ mins }) => {
   switch (mins) {
     case 'BRD':
-      return <Text style={[[styles.text], [styles.bold]]}>Boarding!</Text>
+      return <Text style={styles.text}>🚈 Boarding!</Text>
     case 'ARR':
-      return <Text style={styles.text}>Train is arriving...</Text>
+      return <Text style={styles.text}>🚊 Train is arriving...</Text>
     case '':
-      return <Text style={styles.text}>TBD minutes</Text>
+      return (
+        <Text>
+          <Text style={[[styles.text], [styles.bold]]}>TBD </Text>
+          <Text style={styles.text}>minutes</Text>
+        </Text>
+      )
     case '1':
       return (
         <Text>

diff --git a/components/__tests__/__snapshots__/TrainList.test.js.snap b/components/__tests__/__snapshots__/TrainList.test.js.snap
@@ -54,22 +54,13 @@ exports[`renders correctly 1`] = `
       allowFontScaling={true}
       ellipsizeMode="tail"
       style={
-        Array [
-          Array [
-            Object {
-              "color": "#171f3d",
-              "fontSize": 18,
-            },
-          ],
-          Array [
-            Object {
-              "fontWeight": "bold",
-            },
-          ],
-        ]
+        Object {
+          "color": "#171f3d",
+          "fontSize": 18,
+        }
       }
     >
-      Boarding!
+      🚈 Boarding!
     </Text>
   </View>
   <View
@@ -130,7 +121,7 @@ exports[`renders correctly 1`] = `
         }
       }
     >
-      Train is arriving...
+      🚊 Train is arriving...
     </Text>
   </View>
   <View
@@ -274,14 +265,42 @@ exports[`renders correctly 1`] = `
       accessible={true}
       allowFontScaling={true}
       ellipsizeMode="tail"
-      style={
-        Object {
-          "color": "#171f3d",
-          "fontSize": 18,
-        }
-      }
     >
-      TBD minutes
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Array [
+            Array [
+              Object {
+                "color": "#171f3d",
+                "fontSize": 18,
+              },
+            ],
+            Array [
+              Object {
+                "fontWeight": "bold",
+              },
+            ],
+          ]
+        }
+      >
+        TBD 
+      </Text>
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={
+          Object {
+            "color": "#171f3d",
+            "fontSize": 18,
+          }
+        }
+      >
+        minutes
+      </Text>
     </Text>
   </View>
 </View>