chore: refine video label style

Author: nikhedonia

packages/video-label/__tests__/android/__snapshots__/video-label.android.test.js.snap

@@ -45,7 +45,7 @@ exports[`Video Label test on android renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
@@ -71,15 +71,15 @@ exports[`Video Label test on android renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
           "top": 2,
         },
         Object {
           "color": "#008347",
-          "marginLeft": 3,
+          "marginLeft": 5,
         },
       ]
     }
@@ -97,15 +97,15 @@ exports[`Video Label test on android renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
           "top": 2,
         },
         Object {
           "color": "#008347",
-          "paddingLeft": 3,
+          "paddingLeft": 5,
         },
       ]
     }

packages/video-label/__tests__/ios/__snapshots__/video-label.ios.test.js.snap

@@ -45,7 +45,7 @@ exports[`Video Label test on ios renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
@@ -71,14 +71,14 @@ exports[`Video Label test on ios renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
           "top": 2,
         },
         Object {
-          "marginLeft": 3,
+          "marginLeft": 5,
         },
       ]
     }
@@ -96,20 +96,20 @@ exports[`Video Label test on ios renders VideoLabel 1`] = `
           "fontSize": 12,
           "fontWeight": "400",
           "letterSpacing": 1.2,
-          "lineHeight": 12,
+          "lineHeight": 15,
           "margin": 0,
           "padding": 0,
           "position": "relative",
           "top": 2,
         },
         Object {
           "color": "#008347",
-          "paddingLeft": 3,
+          "paddingLeft": 5,
         },
       ]
     }
   >
-    swimming
+    SWIMMING
   </Text>
 </View>
 `;

packages/video-label/__tests__/web/__snapshots__/video-label.web.test.js.snap

@@ -39,7 +39,7 @@ exports[`Video Label test on web renders VideoLabel 1`] = `
         "fontSize": "12px",
         "fontWeight": "400",
         "letterSpacing": "1.2px",
-        "lineHeight": "12px",
+        "lineHeight": "15px",
         "marginLeft": "5px",
         "top": "2px",
       }
@@ -56,8 +56,8 @@ exports[`Video Label test on web renders VideoLabel 1`] = `
         "fontSize": "12px",
         "fontWeight": "400",
         "letterSpacing": "1.2px",
-        "lineHeight": "12px",
-        "marginLeft": "3px",
+        "lineHeight": "15px",
+        "marginLeft": "5px",
         "top": "2px",
       }
     }
@@ -74,13 +74,13 @@ exports[`Video Label test on web renders VideoLabel 1`] = `
         "fontSize": "12px",
         "fontWeight": "400",
         "letterSpacing": "1.2px",
-        "lineHeight": "12px",
-        "paddingLeft": "3px",
+        "lineHeight": "15px",
+        "paddingLeft": "5px",
         "top": "2px",
       }
     }
   >
-    swimming
+    SWIMMING
   </div>
 </div>
 `;

packages/video-label/style/index.js

@@ -4,7 +4,7 @@ const styles = {
   title: {
     fontFamily: fonts.supporting,
     fontSize: 12,
-    lineHeight: 12,
+    lineHeight: 15,
     fontWeight: "400",
     letterSpacing: 1.2,
     padding: 0,

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