refactor(inline-label): migrate inline-label to styled component

.all-contributorsrc

@@ -517,6 +517,15 @@
       "contributions": [
         "tool"
       ]
+    },
+    {
+      "login": "binkpitch",
+      "name": "Bink",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/20456165?v=4",
+      "profile": "https://binkpitch.me/",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

CONTRIBUTORS.md

@@ -13,4 +13,5 @@ Thank you to all the people who have already contributed to GitPoint!
 | [<img src="https://avatars0.githubusercontent.com/u/18398761?v=4" width="100px;"/><br /><sub>Vitaliy Kanev</sub>](https://github.com/vitalkanev)<br />[📖](https://github.com/gitpoint/git-point/commits?author=vitalkanev "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/3691490?v=4" width="100px;"/><br /><sub>Peter Dave Hello</sub>](https://www.peterdavehello.org/)<br />[📖](https://github.com/gitpoint/git-point/commits?author=PeterDaveHello "Documentation") [🔧](#tool-PeterDaveHello "Tools") | [<img src="https://avatars3.githubusercontent.com/u/10849025?v=4" width="100px;"/><br /><sub>Ernoff</sub>](https://github.com/Ernoff)<br />[💻](https://github.com/gitpoint/git-point/commits?author=Ernoff "Code") [🐛](https://github.com/gitpoint/git-point/issues?q=author%3AErnoff "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/820696?v=4" width="100px;"/><br /><sub>Matthew Brandly</sub>](http://words.brandly.me/about/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=brandly "Code") | [<img src="https://avatars2.githubusercontent.com/u/11836470?v=4" width="100px;"/><br /><sub>João Fonseca</sub>](https://github.com/Jpfonseca)<br />[🌍](#translation-Jpfonseca "Translation") | [<img src="https://avatars3.githubusercontent.com/u/10121964?v=4" width="100px;"/><br /><sub>Arjun Curat</sub>](https://github.com/acurat)<br />[📖](https://github.com/gitpoint/git-point/commits?author=acurat "Documentation") |
 | [<img src="https://avatars3.githubusercontent.com/u/16878891?v=4" width="100px;"/><br /><sub>siderio2</sub>](https://github.com/siderio2)<br />[🌍](#translation-siderio2 "Translation") | [<img src="https://avatars1.githubusercontent.com/u/32579769?v=4" width="100px;"/><br /><sub>Kodo Verkisto</sub>](https://github.com/kodisto)<br />[🌍](#translation-kodisto "Translation") | [<img src="https://avatars3.githubusercontent.com/u/82317?v=4" width="100px;"/><br /><sub>Sarah Vessels</sub>](http://sarahvessels.com/)<br />[📖](https://github.com/gitpoint/git-point/commits?author=cheshire137 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3764756?v=4" width="100px;"/><br /><sub>Thales Sousa</sub>](https://github.com/tminussi)<br />[🌍](#translation-tminussi "Translation") | [<img src="https://avatars0.githubusercontent.com/u/6106941?v=4" width="100px;"/><br /><sub>Aseem Sood</sub>](https://github.com/asood123)<br />[📖](https://github.com/gitpoint/git-point/commits?author=asood123 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/7842156?v=4" width="100px;"/><br /><sub>Eliott hauteclair</sub>](https://eliott.be)<br />[🌍](#translation-Eliottiosdevs "Translation") |
 | [<img src="https://avatars3.githubusercontent.com/u/14539?v=4" width="100px;"/><br /><sub>Peter Blazejewicz</sub>](http://www.linkedin.com/in/peterblazejewicz)<br />[🌍](#translation-peterblazejewicz "Translation") | [<img src="https://avatars0.githubusercontent.com/u/6516758?v=4" width="100px;"/><br /><sub>Eric Adamski</sub>](https://github.com/ericadamski)<br />[🐛](https://github.com/gitpoint/git-point/issues?q=author%3Aericadamski "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/1559013?v=4" width="100px;"/><br /><sub>Jouderian Nobre Junior</sub>](https://github.com/jouderianjr)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jouderianjr "Code") | [<img src="https://avatars2.githubusercontent.com/u/5158502?v=4" width="100px;"/><br /><sub>Phi Dong</sub>](http://www.phidong.com)<br />[💻](https://github.com/gitpoint/git-point/commits?author=pdong "Code") | [<img src="https://avatars2.githubusercontent.com/u/11599942?v=4" width="100px;"/><br /><sub>Óscar Carretero</sub>](https://github.com/ocarreterom)<br />[💻](https://github.com/gitpoint/git-point/commits?author=ocarreterom "Code") | [<img src="https://avatars3.githubusercontent.com/u/5528931?v=4" width="100px;"/><br /><sub>Dyesse YUMBA</sub>](https://github.com/dyesseyumba)<br />[🔧](#tool-dyesseyumba "Tools") |
+| [<img src="https://avatars0.githubusercontent.com/u/20456165?v=4" width="100px;"/><br /><sub>Bink</sub>](https://binkpitch.me/)<br /> |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

src/components/inline-label.component.js

@@ -1,22 +1,26 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import styled from 'styled-components/native';
 
 import { fonts, normalize } from 'config';
 import { getFontColorByBackground } from 'utils';
 
-const styles = StyleSheet.create({
-  inlineLabel: {
-    fontSize: normalize(10),
-    ...fonts.fontPrimarySemiBold,
-    paddingHorizontal: 5,
-    margin: 2,
-    borderWidth: 1,
-    overflow: 'hidden',
-    borderRadius: 3,
-    minWidth: 50,
-    textAlign: 'center',
-  },
-});
+const InlineLabelText = styled.Text`
+  font-size: ${normalize(10)};
+  ${{ ...fonts.fontPrimarySemiBold }};
+  padding-horizontal: 5;
+  margin-top: 2;
+  margin-left: 2;
+  margin-right: 2;
+  margin-bottom: 2;
+  border-width: 1;
+  overflow: hidden;
+  border-radius: 3;
+  min-width: 50;
+  text-align: center;
+  ${({ backgroundColor }) => `background-color: #${backgroundColor};`};
+  ${({ color }) => `color: ${getFontColorByBackground(color)};`};
+  ${({ borderColor }) => `border-color: #${borderColor};`};
+`;
 
 export class InlineLabel extends Component {
   props: {
@@ -27,18 +31,13 @@ export class InlineLabel extends Component {
     const { color, name } = this.props.label;
 
     return (
-      <Text
-        style={[
-          styles.inlineLabel,
-          {
-            backgroundColor: `#${color}`,
-            color: getFontColorByBackground(color),
-            borderColor: `#${color}`,
-          },
-        ]}
+      <InlineLabelText
+        backgroundColor={color}
+        color={color}
+        borderColor={color}
       >
         {name}
-      </Text>
+      </InlineLabelText>
     );
   }
 }