From e3e13b0491144e22a69130674b99a3c2d748c8b1 Mon Sep 17 00:00:00 2001
From: Xianming Zhong <chinesedfan@qq.com>
Date: Wed, 14 Feb 2018 14:52:56 +0800
Subject: [PATCH 1/2] chore(label): Migrate LabelButton

---
 src/components/label-button.component.js | 72 +++++++++---------------
 1 file changed, 26 insertions(+), 46 deletions(-)

diff --git a/src/components/label-button.component.js b/src/components/label-button.component.js
index 6995b184b..1e8325548 100644
--- a/src/components/label-button.component.js
+++ b/src/components/label-button.component.js
@@ -1,51 +1,31 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
 import { Button } from 'react-native-elements';
+import styled from 'styled-components';
 
 import { fonts } from 'config';
 import { getFontColorByBackground } from 'utils';
 
-type Props = {
-  label: Object,
-  largeWithTag: boolean,
-};
-
-const styles = StyleSheet.create({
-  smallLabelButton: {
-    padding: 5,
-    paddingTop: 3,
-    paddingBottom: 3,
-    borderRadius: 3,
-    marginLeft: 0,
-    marginRight: 10,
-    minWidth: 70,
-  },
-  largeLabelButton: {
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 10,
-    paddingRight: 10,
-    marginLeft: 0,
-    borderRadius: 3,
-  },
-});
-
-export const LabelButton = ({ label, largeWithTag }: Props) => (
-  <Button
-    title={label.name}
-    textStyle={fonts.fontPrimarySemiBold}
-    fontSize={largeWithTag ? 13 : 12}
-    color={getFontColorByBackground(label.color)}
-    buttonStyle={
-      largeWithTag ? styles.largeLabelButton : styles.smallLabelButton
-    }
-    backgroundColor={`#${label.color}`}
-    icon={
-      largeWithTag && {
-        name: 'tag',
-        type: 'octicon',
-        color: getFontColorByBackground(label.color),
-      }
-    }
-  />
-);
+export const LabelButton = styled(Button).attrs({
+  title: ({ label }) => label.name,
+  textStyle: fonts.fontPrimarySemiBold,
+  fontSize: ({ largeWithTag }) => (largeWithTag ? 13 : 12),
+  color: ({ label }) => getFontColorByBackground(label.color),
+  buttonStyle: ({ largeWithTag }) => [
+    {
+      paddingVertical: largeWithTag ? 3 : 5,
+      paddingHorizontal: largeWithTag ? 5 : 10,
+      marginLeft: 0,
+      borderRadius: 3,
+    },
+    !largeWithTag && {
+      marginRight: 10,
+      minWidth: 70,
+    },
+  ],
+  backgroundColor: ({ label }) => `#${label.color}`,
+  icon: props =>
+    props.largeWithTag && {
+      name: 'tag',
+      type: 'octicon',
+      color: getFontColorByBackground(props.label.color),
+    },
+})``;

From d273fa384cbb0c8499d478d39056e19ce753e563 Mon Sep 17 00:00:00 2001
From: Xianming Zhong <chinesedfan@qq.com>
Date: Wed, 14 Feb 2018 15:24:48 +0800
Subject: [PATCH 2/2] fix(label): Fix large styles

---
 src/components/label-button.component.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/label-button.component.js b/src/components/label-button.component.js
index 1e8325548..55b40be64 100644
--- a/src/components/label-button.component.js
+++ b/src/components/label-button.component.js
@@ -11,8 +11,8 @@ export const LabelButton = styled(Button).attrs({
   color: ({ label }) => getFontColorByBackground(label.color),
   buttonStyle: ({ largeWithTag }) => [
     {
-      paddingVertical: largeWithTag ? 3 : 5,
-      paddingHorizontal: largeWithTag ? 5 : 10,
+      paddingVertical: largeWithTag ? 5 : 3,
+      paddingHorizontal: largeWithTag ? 10 : 5,
       marginLeft: 0,
       borderRadius: 3,
     },