From 8f04e76e669f0f824a72e686e5c04876f7c250b0 Mon Sep 17 00:00:00 2001 From: John Salcedo Date: Sat, 21 Oct 2017 11:04:13 +0800 Subject: [PATCH 1/3] refactor($component): refactor badge component to use styled-components --- .all-contributorsrc | 9 +++++ src/components/badge.component.js | 56 +++++++++++++------------------ 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 10129b73c..a9c790d5c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -497,6 +497,15 @@ "avatar_url": "https://avatars2.githubusercontent.com/u/5158502?v=4", "profile": "http://www.phidong.com", "contributions": [] + }, + { + "login": "jpls93", + "name": "John Patrick Salcedo", + "avatar_url": "https://avatars2.githubusercontent.com/u/17956698?v=4", + "profile": "https://github.com/jpls93", + "contributions": [ + "code" + ] } ] } diff --git a/src/components/badge.component.js b/src/components/badge.component.js index fd71eabde..816290772 100644 --- a/src/components/badge.component.js +++ b/src/components/badge.component.js @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, View, Text } from 'react-native'; +import styled from 'styled-components'; import { colors, fonts, normalize } from 'config'; @@ -10,39 +10,29 @@ type Props = { largeText: boolean, }; -const styles = StyleSheet.create({ - badge: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - borderRadius: 18, - width: 18, - height: 18, - borderColor: colors.alabaster, - borderWidth: 1, - }, - badgeText: { - ...fonts.fontPrimaryBold, - backgroundColor: 'transparent', - }, - textSmall: { - fontSize: normalize(7), - }, - textLarge: { - fontSize: normalize(9.5), - }, -}); +const BadgeContainer = styled.View` + flex: 1; + align-items: 'center'; + justify-content: 'center'; + border-radius: 18; + width: 18; + height: 18; + border-color: ${colors.alabaster}; + border-width: 1; + ${({ backgroundColor }) => `background-color: ${backgroundColor};`}; +`; + +const BadgeText = styled.Text` + ${{ ...fonts.fontPrimaryBold }}; + background-color: 'transparent'; + ${({ largeText }) => + largeText ? `font-size: ${normalize(9.5)}` : `font-size: ${normalize(7)}`}; +`; export const Badge = ({ color, backgroundColor, text, largeText }: Props) => ( - - + + {text} - - + + ); From e0d9ab29e01c9a858db2e64fd49b36f10ef5aa31 Mon Sep 17 00:00:00 2001 From: John Salcedo Date: Sat, 21 Oct 2017 11:04:13 +0800 Subject: [PATCH 2/3] refactor($component): refactor badge component to use styled-components --- .all-contributorsrc | 9 +++++ src/components/badge.component.js | 56 +++++++++++++------------------ 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 10129b73c..a9c790d5c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -497,6 +497,15 @@ "avatar_url": "https://avatars2.githubusercontent.com/u/5158502?v=4", "profile": "http://www.phidong.com", "contributions": [] + }, + { + "login": "jpls93", + "name": "John Patrick Salcedo", + "avatar_url": "https://avatars2.githubusercontent.com/u/17956698?v=4", + "profile": "https://github.com/jpls93", + "contributions": [ + "code" + ] } ] } diff --git a/src/components/badge.component.js b/src/components/badge.component.js index fd71eabde..3223de074 100644 --- a/src/components/badge.component.js +++ b/src/components/badge.component.js @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, View, Text } from 'react-native'; +import styled from 'styled-components'; import { colors, fonts, normalize } from 'config'; @@ -10,39 +10,29 @@ type Props = { largeText: boolean, }; -const styles = StyleSheet.create({ - badge: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - borderRadius: 18, - width: 18, - height: 18, - borderColor: colors.alabaster, - borderWidth: 1, - }, - badgeText: { - ...fonts.fontPrimaryBold, - backgroundColor: 'transparent', - }, - textSmall: { - fontSize: normalize(7), - }, - textLarge: { - fontSize: normalize(9.5), - }, -}); +const BadgeContainer = styled.View` + flex: 1; + align-items: 'center'; + justify-content: 'center'; + border-radius: 18; + width: 18; + height: 18; + border-color: ${colors.alabaster}; + border-width: 1; + ${({ backgroundColor }) => `background-color: ${backgroundColor};`}; +`; + +const BadgeText = styled.Text` + ${{ ...fonts.fontPrimaryBold }}; + background-color: 'transparent'; + ${({ largeText }) => + `font-size: ${largeText ? normalize(9.5) : normalize(7)};`}; +`; export const Badge = ({ color, backgroundColor, text, largeText }: Props) => ( - - + + {text} - - + + ); From 16cf3acdfdd3568a28fd145dd61a933c034c00ad Mon Sep 17 00:00:00 2001 From: John Salcedo Date: Sat, 21 Oct 2017 11:39:11 +0800 Subject: [PATCH 3/3] fix(component): import styled from native --- src/components/badge.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/badge.component.js b/src/components/badge.component.js index 3223de074..0b5352fba 100644 --- a/src/components/badge.component.js +++ b/src/components/badge.component.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; +import styled from 'styled-components/native'; import { colors, fonts, normalize } from 'config';