Refactoring the copy-pasted buttons styles. (Path-Check#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>
vitorpamplona · Mar 20, 2020 · e621cb4 · e621cb4
1 parent 1b404eb
commit e621cb4
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 195 deletions.
diff --git 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
diff --git a/app/components/PosButton.js b/app/components/PosButton.js
diff --git a/app/components/SensButton.js b/app/components/SensButton.js
diff --git 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
@@ -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;
diff --git 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;
diff --git 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
@@ -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 {