refactor(styles): StyleSheet to Styled Components

josenaranjo · josenaranjo · commit 2cfad22ea197 · 2017-10-24T23:33:20.000-05:00
Migrate Stylesheet styles to styled components. #532
diff --git a/src/components/issue-list-item.component.js b/src/components/issue-list-item.component.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet, TouchableHighlight, View, Text } from 'react-native';
+import { StyleSheet, TouchableHighlight } from 'react-native';
 import { ListItem, Icon } from 'react-native-elements';
 import moment from 'moment/min/moment-with-locales.min';
+import styled from 'styled-components/native';
 
 import { colors, fonts, normalize } from 'config';
 import { translate } from 'utils';
@@ -13,16 +14,28 @@ type Props = {
   locale: string,
 };
 
+const Container = styled.View`
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  padding-right: 10;
+  padding: 5;
+  border-bottom-width: 1;
+  border-bottom-color: ${colors.greyLight};
+`;
+
+const CommentsContainer = styled.View`
+  flex-direction: row;
+  padding-top: 13;
+`;
+
+const Comments = styled.Text`
+  padding-left: 5;
+  font-size: ${normalize(12)}
+  color: ${colors.greyBlue}
+`;
+
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    paddingRight: 10,
-    paddingVertical: 5,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.greyLight,
-  },
   closedIssue: {
     backgroundColor: colors.greyVeryLight,
     opacity: 0.6,
@@ -42,15 +55,6 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: colors.greyBlue,
   },
-  commentsContainer: {
-    flexDirection: 'row',
-    paddingTop: 13,
-  },
-  comments: {
-    paddingLeft: 5,
-    fontSize: normalize(12),
-    color: colors.greyBlue,
-  },
 });
 
 const getIconName = (type, issue) => {
@@ -72,7 +76,7 @@ export const IssueListItem = ({ type, issue, navigation, locale }: Props) => (
       })}
     underlayColor={colors.greyLight}
   >
-    <View style={styles.container}>
+    <Container>
       <ListItem
         containerStyle={styles.listItemContainer}
         title={issue.title}
@@ -99,10 +103,10 @@ export const IssueListItem = ({ type, issue, navigation, locale }: Props) => (
         titleStyle={styles.title}
         subtitleStyle={styles.subtitle}
       />
-      <View style={styles.commentsContainer}>
+      <CommentsContainer>
         <Icon name="comment" type="octicon" size={18} color={colors.grey} />
-        <Text style={styles.comments}>{issue.comments}</Text>
-      </View>
-    </View>
+        <Comments>{issue.comments}</Comments>
+      </CommentsContainer>
+    </Container>
   </TouchableHighlight>
 );
