From 6ec45c3f47567d6fcc47c591a811888ec1e02e1c Mon Sep 17 00:00:00 2001
From: Gaetano Checinski <gaetano.checinski@gmail.com>
Date: Wed, 7 Mar 2018 11:52:01 +0000
Subject: [PATCH] chore: refine video label style

---
 .../android/__snapshots__/video-label.android.test.js.snap  | 4 ++--
 .../ios/__snapshots__/video-label.ios.test.js.snap          | 6 +++---
 .../web/__snapshots__/video-label.web.test.js.snap          | 6 +++---
 packages/video-label/video-label.android.js                 | 4 ++--
 packages/video-label/video-label.js                         | 4 ++--
 packages/video-label/video-label.stories.js                 | 2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap b/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap
index 219f1bc7b64..dbe44256d9b 100644
--- a/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap
+++ b/packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap
@@ -79,7 +79,7 @@ exports[`Video Label test on android renders VideoLabel 1`] = `
         },
         Object {
           "color": "#008347",
-          "marginLeft": 3,
+          "marginLeft": 5,
         },
       ]
     }
@@ -105,7 +105,7 @@ exports[`Video Label test on android renders VideoLabel 1`] = `
         },
         Object {
           "color": "#008347",
-          "paddingLeft": 3,
+          "paddingLeft": 5,
         },
       ]
     }
diff --git a/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap b/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap
index 83643155db2..a6bc0717d17 100644
--- a/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap
+++ b/packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap
@@ -78,7 +78,7 @@ exports[`Video Label test on ios renders VideoLabel 1`] = `
           "top": 2,
         },
         Object {
-          "marginLeft": 3,
+          "marginLeft": 5,
         },
       ]
     }
@@ -104,12 +104,12 @@ exports[`Video Label test on ios renders VideoLabel 1`] = `
         },
         Object {
           "color": "#008347",
-          "paddingLeft": 3,
+          "paddingLeft": 5,
         },
       ]
     }
   >
-    swimming
+    SWIMMING
   </Text>
 </View>
 `;
diff --git a/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap b/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap
index 9b6b4a263fb..257a09ed078 100644
--- a/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap
+++ b/packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap
@@ -57,7 +57,7 @@ exports[`Video Label test on web renders VideoLabel 1`] = `
         "fontWeight": "400",
         "letterSpacing": "1.2px",
         "lineHeight": "12px",
-        "marginLeft": "3px",
+        "marginLeft": "5px",
         "top": "2px",
       }
     }
@@ -75,12 +75,12 @@ exports[`Video Label test on web renders VideoLabel 1`] = `
         "fontWeight": "400",
         "letterSpacing": "1.2px",
         "lineHeight": "12px",
-        "paddingLeft": "3px",
+        "paddingLeft": "5px",
         "top": "2px",
       }
     }
   >
-    swimming
+    SWIMMING
   </div>
 </div>
 `;
diff --git a/packages/video-label/video-label.android.js b/packages/video-label/video-label.android.js
index eca3c2dd12a..3741bfc73d2 100644
--- a/packages/video-label/video-label.android.js
+++ b/packages/video-label/video-label.android.js
@@ -20,10 +20,10 @@ const VideoLabel = ({ title, color }) => (
       {beautifyTitle("VIDEO")}
     </Text>
     {title ? (
-      <Text style={[styles.title, { color, marginLeft: 3 }]}>|</Text>
+      <Text style={[styles.title, { color, marginLeft: 5 }]}>|</Text>
     ) : null}
     {title ? (
-      <Text style={[styles.title, { color, paddingLeft: 3 }]}>
+      <Text style={[styles.title, { color, paddingLeft: 5 }]}>
         {beautifyTitle(title)}
       </Text>
     ) : null}
diff --git a/packages/video-label/video-label.js b/packages/video-label/video-label.js
index d425102c6c2..d21325048aa 100644
--- a/packages/video-label/video-label.js
+++ b/packages/video-label/video-label.js
@@ -8,9 +8,9 @@ const VideoLabel = ({ title, color }) => (
   <View style={{ flexDirection: "row", alignItems: "center" }}>
     <IconVideo height={styles.title.fontSize} fillColor={color} />
     <Text style={[styles.title, { color, marginLeft: 5 }]}>VIDEO</Text>
-    {title ? <Text style={[styles.title, { marginLeft: 3 }]}>|</Text> : null}
+    {title ? <Text style={[styles.title, { marginLeft: 5 }]}>|</Text> : null}
     {title ? (
-      <Text style={[styles.title, { color, paddingLeft: 3 }]}>{title}</Text>
+      <Text style={[styles.title, { color, paddingLeft: 5 }]}>{title.toUpperCase()}</Text>
     ) : null}
   </View>
 );
diff --git a/packages/video-label/video-label.stories.js b/packages/video-label/video-label.stories.js
index 68bf7fa32e0..3466a9d628d 100644
--- a/packages/video-label/video-label.stories.js
+++ b/packages/video-label/video-label.stories.js
@@ -18,7 +18,7 @@ storiesOf("Primitives/VideoLabel", module)
   ))
   .add("VideoLabel with title", () => (
     <VideoLabel
-      title="SWIMMING"
+      title="swimming"
       color={select(
         "Section",
         invert(colours.section),