From e621cb4b0e9899d0b155f607807c8ea3632e3fd8 Mon Sep 17 00:00:00 2001
From: Vitor Pamplona <vitor@vitorpamplona.com>
Date: Fri, 13 Mar 2020 01:56:54 -0400
Subject: [PATCH] Refactoring the copy-pasted buttons styles. (#26)

* Refactoring the copy-pasted buttons styles.

* Remove dead NegButton references

This also includes some code reformatting from VS Code, but mainly it
removes dangling references to the NegViews.

Co-authored-by: Steve Penrod <github@gpll.org>
Co-authored-by: Steve Penrod <steve@tripleblind.market>
---
 app/components/Button.js      |  6 +--
 app/components/NegButton.js   | 41 --------------------
 app/components/PosButton.js   | 41 --------------------
 app/components/SensButton.js  | 41 --------------------
 app/constants/colors.js       |  7 +++-
 app/views/Export.js           | 47 ++++++++++++-----------
 app/views/Import.js           | 71 +++++++++++++++++------------------
 app/views/LocationTracking.js | 11 ++----
 app/views/News.js             |  1 -
 9 files changed, 71 insertions(+), 195 deletions(-)
 delete mode 100644 app/components/NegButton.js
 delete mode 100644 app/components/PosButton.js
 delete mode 100644 app/components/SensButton.js

diff --git a/app/components/Button.js b/app/components/Button.js
index 8df6ef4e54..6835648f2c 100644
--- a/app/components/Button.js
+++ b/app/components/Button.js
@@ -4,14 +4,15 @@ import colors from "../constants/colors";
 
 interface Props {
   label: string;
+  bgColor: string;
   onPress: () => void;
 }
 
 class Button extends React.Component<Props> {
   render() {
-    const { title, onPress } = this.props;
+    const { title, onPress, bgColor } = this.props;
     return (
-      <TouchableOpacity style={styles.container} onPress={onPress}>
+      <TouchableOpacity style={[styles.container, {backgroundColor: bgColor || colors.DODGER_BLUE}]} onPress={onPress} >
         <Text style={styles.text}>{title}</Text>
       </TouchableOpacity>
     );
@@ -23,7 +24,6 @@ const styles = StyleSheet.create({
     width: "100%",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: colors.DODGER_BLUE,
     paddingVertical: 12,
     borderRadius: 4,
     borderWidth: StyleSheet.hairlineWidth,
diff --git a/app/components/NegButton.js b/app/components/NegButton.js
deleted file mode 100644
index 8d16111ca7..0000000000
--- a/app/components/NegButton.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import colors from "../constants/colors";
-
-interface Props {
-  label: string;
-  onPress: () => void;
-}
-
-class Button extends React.Component<Props> {
-  render() {
-    const { title, onPress } = this.props;
-    return (
-      <TouchableOpacity style={styles.container} onPress={onPress}>
-        <Text style={styles.text}>{title}</Text>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: colors.TORCH_RED,
-    paddingVertical: 12,
-    borderRadius: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(255,255,255,0.7)"
-  },
-  text: {
-    color: colors.WHITE,
-    textAlign: "center",
-    height: 28,
-    fontSize: 20,
-    fontWeight: '600',
-  }
-});
-
-export default Button;
\ No newline at end of file
diff --git a/app/components/PosButton.js b/app/components/PosButton.js
deleted file mode 100644
index 94c5ec9d8c..0000000000
--- a/app/components/PosButton.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import colors from "../constants/colors";
-
-interface Props {
-  label: string;
-  onPress: () => void;
-}
-
-class PosButton extends React.Component<Props> {
-  render() {
-    const { title, onPress } = this.props;
-    return (
-      <TouchableOpacity style={styles.container} onPress={onPress}>
-        <Text style={styles.text}>{title}</Text>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: colors.GREEN,
-    paddingVertical: 12,
-    borderRadius: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(255,255,255,0.7)"
-  },
-  text: {
-    color: colors.WHITE,
-    textAlign: "center",
-    height: 28,
-    fontSize: 20,
-    fontWeight: '600',
-  }
-});
-
-export default PosButton;
diff --git a/app/components/SensButton.js b/app/components/SensButton.js
deleted file mode 100644
index 0d453fc0e2..0000000000
--- a/app/components/SensButton.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import colors from "../constants/colors";
-
-interface Props {
-  label: string;
-  onPress: () => void;
-}
-
-class SensButton extends React.Component<Props> {
-  render() {
-    const { title, onPress } = this.props;
-    return (
-      <TouchableOpacity style={styles.container} onPress={onPress}>
-        <Text style={styles.text}>{title}</Text>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: colors.VIOLET,
-    paddingVertical: 12,
-    borderRadius: 4,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(255,255,255,0.7)"
-  },
-  text: {
-    color: colors.WHITE,
-    textAlign: "center",
-    height: 28,
-    fontSize: 20,
-    fontWeight: '600',
-  }
-});
-
-export default SensButton;
diff --git a/app/constants/colors.js b/app/constants/colors.js
index 7a135b98a2..292c4fdb88 100644
--- a/app/constants/colors.js
+++ b/app/constants/colors.js
@@ -8,7 +8,12 @@ const colors = {
   APP_BACKGROUND: '#FFF8ED',
   PRIMARY_TEXT: "#000",
   GREEN: "#32A852",
-  VIOLET: "#6C3794"
+  VIOLET: "#6C3794",
+
+  REG_BUTTON: "#428AF8",
+  POS_BUTTON: "#32A852",
+  NEG_BUTTON: "#F8262F",
+  SENS_BUTTON: "#6C3794"
 };
 
 export default colors;
diff --git a/app/views/Export.js b/app/views/Export.js
index 9d7440c692..563abe7c33 100644
--- a/app/views/Export.js
+++ b/app/views/Export.js
@@ -1,20 +1,19 @@
 import React, { Component } from 'react';
 import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  Linking,
-  View,
-  Text,
-  Alert,
-  Image,
-  Share
+    SafeAreaView,
+    StyleSheet,
+    ScrollView,
+    Linking,
+    View,
+    Text,
+    Alert,
+    Image
+    Share
 } from 'react-native';
 
 import colors from "../constants/colors";
-import { WebView } from 'react-native-webview';
+import WebView from 'react-native-webview';
 import Button from "../components/Button";
-import NegButton from "../components/NegButton";
 import BackgroundGeolocation from '@mauron85/react-native-background-geolocation';
 import {GetStoreData} from '../helpers/General';
 
@@ -64,7 +63,7 @@ class ExportScreen extends Component {
             <>
                 <View style={styles.main}>
                     <View style={styles.headerTitle}>
-                      <Text style={styles.sectionDescription, {fontSize: 22, marginTop: 10}}>Export Data</Text>
+                        <Text style={styles.sectionDescription, { fontSize: 22, marginTop: 10 }}>Export Data</Text>
                     </View>
                     <View style={styles.block}>
                         <Button onPress={this.onShare} title="Share" />
@@ -111,10 +110,10 @@ const styles = StyleSheet.create({
         width: "95%"
     },
     block: {
-      margin: 20,
-      width: "75%",
-      alignItems: 'center',
-      justifyContent: 'center'
+        margin: 20,
+        width: "75%",
+        alignItems: 'center',
+        justifyContent: 'center'
     },
     topView: {
         flex: 1,
@@ -133,13 +132,13 @@ const styles = StyleSheet.create({
         alignItems: 'stretch',
     },
     sectionDescription: {
-      fontSize: 18,
-      lineHeight: 24,
-      fontWeight: '400',
-      marginTop: 20,
-      marginLeft: 10,
-      marginRight: 10
+        fontSize: 18,
+        lineHeight: 24,
+        fontWeight: '400',
+        marginTop: 20,
+        marginLeft: 10,
+        marginRight: 10
     }
-  });
+});
 
-export default ExportScreen;
+export default ExportScreen;
\ No newline at end of file
diff --git a/app/views/Import.js b/app/views/Import.js
index 1895915257..66a755d9fb 100644
--- a/app/views/Import.js
+++ b/app/views/Import.js
@@ -1,18 +1,17 @@
 import React, { Component } from 'react';
 import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  Linking,
-  View,
-  Text,
-  Alert
+    SafeAreaView,
+    StyleSheet,
+    ScrollView,
+    Linking,
+    View,
+    Text,
+    Alert
 } from 'react-native';
 
 import colors from "../constants/colors";
-import { WebView } from 'react-native-webview';
+import WebView from 'react-native-webview';
 import Button from "../components/Button";
-import NegButton from "../components/NegButton";
 import BackgroundGeolocation from '@mauron85/react-native-background-geolocation';
 
 class ImportScreen extends Component {
@@ -111,25 +110,25 @@ class ImportScreen extends Component {
     render() {
         return (
             <>
-            <View style={styles.main}>
-                <View style={styles.headerTitle}>
-                        <Text style={styles.sectionDescription, {fontSize: 22, marginTop: 8}}>Import Data:</Text>
+                <View style={styles.main}>
+                    <View style={styles.headerTitle}>
+                        <Text style={styles.sectionDescription, { fontSize: 22, marginTop: 8 }}>Import Data:</Text>
+                    </View>
+                    <View style={styles.subHeaderTitle}>
+                        <Text style={styles.sectionDescription, { fontSize: 18, marginTop: 8 }}>Rolling out soon</Text>
+                    </View>
+                    <View style={styles.web}>
+                        <WebView
+                            source={{ uri: 'http://privatekit.mit.edu' }}
+                            style={{ marginTop: 15, marginLeft: 15 }}
+                        />
+                    </View>
                 </View>
-                <View style={styles.subHeaderTitle}>
-                        <Text style={styles.sectionDescription, {fontSize: 18, marginTop: 8}}>Rolling out soon</Text>
+                <View style={styles.footer}>
+                    <Text style={styles.sectionDescription, { textAlign: 'center', paddingTop: 15 }}>For more information visit the Private Kit hompage:</Text>
+                    <Text style={styles.sectionDescription, { color: 'blue', textAlign: 'center' }} onPress={() => Linking.openURL('https://privatekit.mit.edu')}>privatekit.mit.edu</Text>
                 </View>
-                <View style={styles.web}>
-                    <WebView
-                        source= {{ uri: 'http://privatekit.mit.edu' }}
-                        style= {{ marginTop: 15, marginLeft: 15}}
-                    />
-                </View>
-            </View>
-            <View style={styles.footer}>
-                <Text style={styles.sectionDescription, { textAlign: 'center', paddingTop: 15 }}>For more information visit the Private Kit hompage:</Text>
-                <Text style={styles.sectionDescription, { color: 'blue', textAlign: 'center' }} onPress={() => Linking.openURL('https://privatekit.mit.edu')}>privatekit.mit.edu</Text>
-            </View>
-        </>
+            </>
         )
     }
 }
@@ -168,8 +167,8 @@ const styles = StyleSheet.create({
         width: "95%"
     },
     block: {
-      margin: 20,
-      width: "100%"
+        margin: 20,
+        width: "100%"
     },
     topView: {
         flex: 1,
@@ -188,12 +187,12 @@ const styles = StyleSheet.create({
         alignItems: 'stretch',
     },
     sectionDescription: {
-      fontSize: 18,
-      lineHeight: 24,
-      fontWeight: '400',
-      marginTop: 20,
-      marginLeft: 10,
-      marginRight: 10
+        fontSize: 18,
+        lineHeight: 24,
+        fontWeight: '400',
+        marginTop: 20,
+        marginLeft: 10,
+        marginRight: 10
     }
-  });
-export default ImportScreen;
+});
+export default ImportScreen;
\ No newline at end of file
diff --git a/app/views/LocationTracking.js b/app/views/LocationTracking.js
index f54fc9b1bb..1c6abdcc3f 100644
--- a/app/views/LocationTracking.js
+++ b/app/views/LocationTracking.js
@@ -12,9 +12,6 @@ import {
 import colors from "../constants/colors";
 import { WebView } from 'react-native-webview';
 import Button from "../components/Button";
-import NegButton from "../components/NegButton";
-import PosButton from "../components/PosButton";
-import SensButton from "../components/SensButton";
 import BackgroundGeolocation from '@mauron85/react-native-background-geolocation';
 
 import {GetStoreData, SetStoreData} from '../helpers/General';
@@ -201,19 +198,19 @@ class LocationTracking extends Component {
                     </View>
 
                     <View style={styles.block}>
-                        <NegButton title={"Stop Recording Location"} onPress={() => this.optOut()} />
+                        <Button title={"Stop Recording Location"} bgColor={colors.NEG_BUTTON} onPress={() => this.optOut()} />
                     </View>
 
                     <View style={styles.block}>
-                        <PosButton title={"News"} onPress={() => this.news()} />
+                        <Button title={"News"} bgColor={colors.POS_BUTTON} onPress={() => this.news()} />
                     </View>
 
                     <View style={styles.block}>
-                        <SensButton title={"Import"} onPress={() => this.import()} />
+                        <Button title={"Import"} bgColor={colors.SENS_BUTTON} onPress={() => this.import()} />
                     </View>
 
                     <View style={styles.block}>
-                        <SensButton title={"Export"} onPress={() => this.export()} />
+                        <Button title={"Export"} bgColor={colors.SENS_BUTTON} onPress={() => this.export()} />
                     </View>
 
                 </View>
diff --git a/app/views/News.js b/app/views/News.js
index c5668af59d..e93e904904 100644
--- a/app/views/News.js
+++ b/app/views/News.js
@@ -12,7 +12,6 @@ import {
 import colors from "../constants/colors";
 import { WebView } from 'react-native-webview';
 import Button from "../components/Button";
-import NegButton from "../components/NegButton";
 import BackgroundGeolocation from '@mauron85/react-native-background-geolocation';
 
 class NewsScreen extends Component {