refactor(styles): IssueDescription component styles update (#563)

* refactor(styles): IssueDescription component styles update Migrating StyleSheet styles to styled components 532 * fix(styles): Fix StateBadge tests StateBadge component will have some styles trough props. Revert to use StyleSheet in this case. #532
gitpoint · Oct 26, 2017 · 6567aa3 · 6567aa3
1 parent df8d612
commit 6567aa3
Showing 1 changed file with 124 additions and 111 deletions.
diff --git a/src/components/issue-description.component.js b/src/components/issue-description.component.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, ActivityIndicator } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import Parse from 'parse-diff';
 import moment from 'moment/min/moment-with-locales.min';
+import styled from 'styled-components/native';
 
 import {
   StateBadge,
@@ -12,63 +13,70 @@ import {
   Button,
 } from 'components';
 import { translate } from 'utils';
-import { colors, fonts, normalize } from 'config';
+import { colors, styledFonts, normalize } from 'config';
 import { v3 } from 'api';
 
 const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingRight: 10,
-  },
-  borderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: colors.greyLight,
-  },
-  title: {
-    color: colors.primaryDark,
-    ...fonts.fontPrimarySemiBold,
-  },
-  titleSmall: {
-    color: colors.primaryDark,
-    ...fonts.fontPrimarySemiBold,
-    fontSize: normalize(10),
-  },
-  listItemContainer: {
-    borderBottomWidth: 0,
-    flex: 1,
-  },
-  diffBlocksContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    paddingRight: 10,
-    paddingBottom: 10,
-  },
   badge: {
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  labelButtonGroup: {
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    marginLeft: 54,
-    paddingBottom: 15,
-  },
-  assigneesSection: {
-    marginLeft: 54,
-    paddingBottom: 5,
-  },
-  mergeButtonContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 15,
-  },
 });
 
+const HeaderContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-right: 10;
+`;
+
+const ContainerBorderBottom = styled.View`
+  border-bottom-width: 1;
+  border-bottom-color: ${colors.greyLight};
+`;
+
+const ListItemStyled = styled(ListItem)`
+  color: ${colors.primaryDark}
+  font-family: ${styledFonts.fontPrimarySemiBold}
+`;
+
+const ListItemURL = ListItemStyled.extend`
+  font-size: ${normalize(10)};
+`;
+
+const ListItemIssueTitle = ListItemStyled.extend`
+  border-bottom-width: 0;
+  flex: 1;
+`;
+
+const DiffBlocksContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 10;
+  padding-bottom: 10;
+`;
+
+const LabelButtonGroup = styled.View`
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-left: 54;
+  padding-bottom: 15;
+`;
+
+const AssigneesSection = styled.View`
+  margin-left: 54;
+  padding-bottom: 5;
+`;
+
+const MergeButtonContainer = styled.View`
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-vertical: 15;
+`;
+
 export class IssueDescription extends Component {
   props: {
     issue: Object,
@@ -114,11 +122,10 @@ export class IssueDescription extends Component {
     });
 
     return (
-      <View style={(styles.container, styles.borderBottom)}>
-        {issue.repository_url &&
-          <ListItem
+      <ContainerBorderBottom>
+        {issue.repository_url && (
+          <ListItemURL
             title={issue.repository_url.replace(`${v3.root}/repos/`, '')}
-            titleStyle={styles.titleSmall}
             leftIcon={{
               name: 'repo',
               size: 17,
@@ -127,14 +134,13 @@ export class IssueDescription extends Component {
             }}
             onPress={() => onRepositoryPress(issue.repository_url)}
             hideChevron
-          />}
+          />
+        )}
 
-        <View style={styles.headerContainer}>
-          <ListItem
+        <HeaderContainer>
+          <ListItemIssueTitle
             title={issue.title}
-            titleStyle={styles.title}
             subtitle={moment(issue.created_at).fromNow()}
-            containerStyle={styles.listItemContainer}
             leftIcon={{
               name: issue.pull_request ? 'git-pull-request' : 'issue-opened',
               size: 36,
@@ -146,69 +152,76 @@ export class IssueDescription extends Component {
 
           {!issue.pull_request ||
             (issue.pull_request &&
-              !isPendingCheckMerge &&
-              <StateBadge
-                style={styles.badge}
-                issue={issue}
-                isMerged={isMerged && issue.pull_request}
-                locale={locale}
-              />)}
-        </View>
+              !isPendingCheckMerge && (
+                <StateBadge
+                  style={styles.badge}
+                  issue={issue}
+                  isMerged={isMerged && issue.pull_request}
+                  locale={locale}
+                />
+              ))}
+        </HeaderContainer>
 
-        {issue.pull_request &&
-          <View style={styles.diffBlocksContainer}>
-            {isPendingDiff &&
-              <ActivityIndicator animating={isPendingDiff} size="small" />}
+        {issue.pull_request && (
+          <DiffBlocksContainer>
+            {isPendingDiff && (
+              <ActivityIndicator animating={isPendingDiff} size="small" />
+            )}
 
             {!isPendingDiff &&
-              (lineAdditions !== 0 || lineDeletions !== 0) &&
-              <DiffBlocks
-                additions={lineAdditions}
-                deletions={lineDeletions}
-                showNumbers
-                onPress={() =>
-                  navigation.navigate('PullDiff', {
-                    title: translate('repository.pullDiff.title', locale),
-                    locale,
-                    diff,
-                  })}
-              />}
-          </View>}
+              (lineAdditions !== 0 || lineDeletions !== 0) && (
+                <DiffBlocks
+                  additions={lineAdditions}
+                  deletions={lineDeletions}
+                  showNumbers
+                  onPress={() =>
+                    navigation.navigate('PullDiff', {
+                      title: translate('repository.pullDiff.title', locale),
+                      locale,
+                      diff,
+                    })}
+                />
+              )}
+          </DiffBlocksContainer>
+        )}
 
         {issue.labels &&
-          issue.labels.length > 0 &&
-          <View style={styles.labelButtonGroup}>
-            {this.renderLabelButtons(issue.labels)}
-          </View>}
+          issue.labels.length > 0 && (
+            <LabelButtonGroup>
+              {this.renderLabelButtons(issue.labels)}
+            </LabelButtonGroup>
+          )}
         {issue.assignees &&
-          issue.assignees.length > 0 &&
-          <View style={styles.assigneesSection}>
-            <MembersList
-              title={translate('issue.main.assignees', locale)}
-              members={issue.assignees}
-              containerStyle={{ marginTop: 0, paddingTop: 0, paddingLeft: 0 }}
-              smallTitle
-              navigation={navigation}
-            />
-          </View>}
+          issue.assignees.length > 0 && (
+            <AssigneesSection>
+              <MembersList
+                title={translate('issue.main.assignees', locale)}
+                members={issue.assignees}
+                containerStyle={{ marginTop: 0, paddingTop: 0, paddingLeft: 0 }}
+                smallTitle
+                navigation={navigation}
+              />
+            </AssigneesSection>
+          )}
 
         {issue.pull_request &&
           !isMerged &&
           issue.state === 'open' &&
-          userHasPushPermission &&
-          <View style={styles.mergeButtonContainer}>
-            <Button
-              type={isMergeable ? 'success' : 'default'}
-              icon={{ name: 'git-merge', type: 'octicon' }}
-              disabled={!isMergeable}
-              onPress={() =>
-                navigation.navigate('PullMerge', {
-                  title: translate('issue.pullMerge.title', locale),
-                })}
-              title={translate('issue.main.mergeButton', locale)}
-            />
-          </View>}
-      </View>
+          userHasPushPermission && (
+            <MergeButtonContainer>
+              <Button
+                type={isMergeable ? 'success' : 'default'}
+                icon={{ name: 'git-merge', type: 'octicon' }}
+                disabled={!isMergeable}
+                onPress={() =>
+                  navigation.navigate('PullMerge', {
+                    title: translate('issue.pullMerge.title', locale),
+                  })}
+                title={translate('issue.main.mergeButton', locale)}
+              />
+            </MergeButtonContainer>
+          )}
+      </ContainerBorderBottom>
     );
   }
 }