From f34349447f76942c69d03ff483edcb9da5f043d5 Mon Sep 17 00:00:00 2001
From: AstroBoogie <nathaniel.adams.us@gmail.com>
Date: Wed, 18 Oct 2017 22:55:07 -0700
Subject: [PATCH] feat(styling): add styled components

---
 src/components/diff-blocks.component.js | 100 +++++++++++++-----------
 src/components/image-zoom.component.js  |  65 ++++++---------
 2 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/src/components/diff-blocks.component.js b/src/components/diff-blocks.component.js
index 106c535c5..da3c57c76 100644
--- a/src/components/diff-blocks.component.js
+++ b/src/components/diff-blocks.component.js
@@ -1,7 +1,8 @@
 // @flow
 
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import styled from 'styled-components/native';
+// import { View, TouchableOpacity } from 'react-native';
 
 import { colors, fonts } from 'config';
 
@@ -12,42 +13,47 @@ type Props = {
   onPress: Function,
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  linesChanged: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  numAdditions: {
-    marginRight: 3,
-    ...fonts.fontPrimarySemiBold,
-    color: colors.green,
-    letterSpacing: 1,
-  },
-  numDeletions: {
-    marginRight: 2,
-    ...fonts.fontPrimarySemiBold,
-    color: colors.red,
-    letterSpacing: 1,
-  },
-  block: {
-    width: 7,
-    height: 7,
-    marginLeft: 1,
-  },
-  greenBlock: {
-    backgroundColor: colors.green,
-  },
-  redBlock: {
-    backgroundColor: colors.darkRed,
-  },
-  greyBlock: {
-    backgroundColor: colors.greyMid,
-  },
-});
+const Container = styled.Component`
+  flex-direction: 'row';
+  align-items: 'center';
+`;
+
+const LinesChanged = styled.View`
+  flex-direction: 'row';
+  align-items: 'center';
+`;
+
+const NumAdditions = styled.Text`
+  margin-right: 3;
+  color: colors.green;
+  letter-spacing: 1;
+  font-family: ${fonts.fontPrimarySemiBold};
+`;
+
+const NumDeletions = styled.Text`
+  margin-right: 2,
+  color: colors.red,
+  letter-spacing: 1,
+  font-family: ${fonts.fontPrimarySemiBold};
+`;
+
+const Block = styled.View`
+  width: 7;
+  height: 7;
+  margin-left: 1;
+`;
+
+const GreenBlock = Block.extend`
+  background-color: ${colors.green};
+`;
+
+const RedBlock = Block.extend`
+  background-color: ${colors.darkRed};
+`;
+
+const GreyBlock = Block.extend`
+  background-color: ${colors.greyMid};
+`;
 
 export const DiffBlocks = ({
   additions,
@@ -71,28 +77,28 @@ export const DiffBlocks = ({
     greyBlocks = 5 - (greenBlocks + redBlocks);
   }
 
-  const Component = onPress ? TouchableOpacity : View;
+  // const Container = onPress ? TouchableOpacity : View; TODO: Implement this conditional with styled components
 
   return (
-    <Component style={styles.container} onPress={onPress}>
+    <Container onPress={onPress}>
       {showNumbers && (
-        <View style={styles.linesChanged}>
-          <Text style={styles.numAdditions}>{`+${additions}`}</Text>
-          <Text style={styles.numDeletions}>{`-${deletions}`}</Text>
-        </View>
+        <LinesChanged>
+          <NumAdditions>{`+${additions}`}</NumAdditions>
+          <NumDeletions>{`-${deletions}`}</NumDeletions>
+        </LinesChanged>
       )}
 
       {[...Array(greenBlocks)].map((item, index) => {
-        return <View key={index} style={[styles.block, styles.greenBlock]} />; // eslint-disable-line react/no-array-index-key
+        return <GreenBlock key={index} />; // eslint-disable-line react/no-array-index-key
       })}
 
       {[...Array(redBlocks)].map((item, index) => {
-        return <View key={index} style={[styles.block, styles.redBlock]} />; // eslint-disable-line react/no-array-index-key
+        return <RedBlock key={index} />; // eslint-disable-line react/no-array-index-key
       })}
 
       {[...Array(greyBlocks)].map((item, index) => {
-        return <View key={index} style={[styles.block, styles.greyBlock]} />; // eslint-disable-line react/no-array-index-key
+        return <GreyBlock key={index} />; // eslint-disable-line react/no-array-index-key
       })}
-    </Component>
+    </Container>
   );
 };
diff --git a/src/components/image-zoom.component.js b/src/components/image-zoom.component.js
index cf90c0520..9ecebd4b2 100644
--- a/src/components/image-zoom.component.js
+++ b/src/components/image-zoom.component.js
@@ -1,35 +1,28 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Image,
-  View,
-  Modal,
-  Dimensions,
-  TouchableOpacity,
-  TouchableHighlight,
-} from 'react-native';
+import styled from 'styled-components/native';
+import { Image, Modal, Dimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
 import PhotoView from 'react-native-photo-view';
 
 import { colors } from 'config';
 
-const styles = StyleSheet.create({
-  touchable: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContainer: {
-    flex: 1,
-    backgroundColor: colors.black,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 30,
-    right: 10,
-  },
-});
+const Touchable = styled.Text`
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContainer = styled.Text`
+  flex: 1;
+  background-color: ${colors.black};
+  justify-content: center;
+  align-items: center;
+`;
+
+const CloseButton = styled.Text`
+  position: absolute;
+  top: 30;
+  right: 10;
+`;
 
 export class ImageZoom extends Component {
   props: {
@@ -59,7 +52,7 @@ export class ImageZoom extends Component {
     if (this.state.imgZoom) {
       return (
         <Modal animationType={'fade'} onRequestClose={() => null}>
-          <View style={styles.modalContainer}>
+          <ModalContainer>
             <PhotoView
               resizeMode={'contain'}
               onTap={() => this.closeModal()}
@@ -69,26 +62,18 @@ export class ImageZoom extends Component {
               style={{ width: window.width, height: window.height }}
             />
 
-            <TouchableOpacity
-              activeOpacity={0.5}
-              onPress={() => this.closeModal()}
-              style={styles.closeButton}
-            >
+            <CloseButton activeOpacity={0.5} onPress={() => this.closeModal()}>
               <Icon color={colors.white} size={28} name="x" type="octicon" />
-            </TouchableOpacity>
-          </View>
+            </CloseButton>
+          </ModalContainer>
         </Modal>
       );
     }
 
     return (
-      <TouchableHighlight
-        onPress={() => this.openModal()}
-        underlayColor="transparent"
-        style={styles.touchable}
-      >
+      <Touchable onPress={() => this.openModal()} underlayColor="transparent">
         <Image style={style} source={uri} />
-      </TouchableHighlight>
+      </Touchable>
     );
   }
 }