chore: refine video label style

Author: nikhedonia

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,
         },
       ]
     }

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>
 `;

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>
 `;

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}

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>
 );

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),