Refactor events admin screen buttons

__tests__/ui/components/button/__snapshots__/Button.spec.js.snap

@@ -28,6 +28,7 @@ exports[`Button component renders correctly 1`] = `
           "paddingLeft": 12,
           "paddingRight": 12,
         },
+        Object {},
         Object {
           "backgroundColor": "#E62272",
         },
@@ -84,6 +85,7 @@ exports[`Button component renders disabled correctly 1`] = `
           "paddingLeft": 12,
           "paddingRight": 12,
         },
+        Object {},
         Object {
           "backgroundColor": "#E62272",
         },
@@ -137,6 +139,7 @@ exports[`Button component renders title correctly on Android 1`] = `
           "paddingLeft": 12,
           "paddingRight": 12,
         },
+        Object {},
         Object {
           "backgroundColor": "#E62272",
         },

app/ui/components/button/Button.js

@@ -21,7 +21,7 @@ const Button = (props) => {
       underlayColor={props.underlayColor}
     >
       <View
-        style={[styles.container, { backgroundColor: props.color }]}
+        style={[styles.container, props.containerStyle, { backgroundColor: props.color }]}
       >
         <Text style={[styles.text, props.textStyle]}>
           {title}
@@ -36,6 +36,7 @@ Button.propTypes = {
   color: PropTypes.string,
   disabled: PropTypes.bool,
   onPress: PropTypes.func.isRequired,
+  containerStyle: Text.propTypes.style,
   // eslint-disable-next-line react/no-typos
   textStyle: Text.propTypes.style,
   title: PropTypes.string.isRequired,
@@ -45,6 +46,7 @@ Button.propTypes = {
 Button.defaultProps = {
   color: Colors.magenta,
   disabled: false,
+  containerStyle: {},
   textStyle: {},
   underlayColor: Colors.white,
 };

app/ui/components/errorScreen/style/ErrorScreen.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
       fontWeight: '500',
     },
     fontSize: 16,
-    color: Colors.gray,
+    color: Colors.grey,
     textAlign: 'center',
   },
 });

app/ui/screens/events/EventAdminScreen.js

@@ -14,6 +14,7 @@ import StandardHeader from '../../components/standardHeader/StandardHeader';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 import SearchHeader from '../../components/searchHeader/SearchHeaderContainer';
+import Button from '../../components/button/Button';
 
 const PAYMENT_TYPES = {
   NONE: 'no_payment',
@@ -157,43 +158,35 @@ class EventAdminScreen extends Component {
               value={present}
               onValueChange={value => this.updateValue(item, value, payment)}
               onTintColor={Colors.magenta}
-              thumbTintColor={present ? Colors.darkMagenta : Colors.gray}
+              thumbTintColor={present ? Colors.darkMagenta : Colors.grey}
             />
           </View>
           <View style={styles.paymentContainer}>
-            <TouchableHighlight
+            <Button
               key={`${item}_${PAYMENT_TYPES.NONE}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.NONE)}
-              style={styles.button}
-            >
-              <View style={[styles.card, payment === PAYMENT_TYPES.NONE && styles.selected]}>
-                <Text style={[styles.text, styles.buttonText]}>
-                  {t('NOT PAID')}
-                </Text>
-              </View>
-            </TouchableHighlight>
-            <TouchableHighlight
+              title={t('NOT PAID')}
+              color={payment === PAYMENT_TYPES.NONE ? Colors.magenta : Colors.grey}
+              textStyle={styles.buttonText}
+              containerStyle={styles.buttonTextContainer}
+            />
+            <Button
               key={`${item}_${PAYMENT_TYPES.CASH}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CASH)}
-              style={styles.button}
-            >
-              <View style={[styles.card, payment === PAYMENT_TYPES.CASH && styles.selected]}>
-                <Text style={[styles.text, styles.buttonText]}>
-                  {t('CASH')}
-                </Text>
-              </View>
-            </TouchableHighlight>
-            <TouchableHighlight
+              title={t('CASH')}
+              style={styles.buttonMargin}
+              color={payment === PAYMENT_TYPES.CASH ? Colors.magenta : Colors.grey}
+              textStyle={styles.buttonText}
+              containerStyle={styles.buttonTextContainer}
+            />
+            <Button
               key={`${item}_${PAYMENT_TYPES.CARD}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CARD)}
-              style={styles.button}
-            >
-              <View style={[styles.card, payment === PAYMENT_TYPES.CARD && styles.selected]}>
-                <Text style={[styles.text, styles.buttonText]}>
-                  {t('CARD')}
-                </Text>
-              </View>
-            </TouchableHighlight>
+              title={t('CARD')}
+              color={payment === PAYMENT_TYPES.CARD ? Colors.magenta : Colors.grey}
+              textStyle={styles.buttonText}
+              containerStyle={styles.buttonTextContainer}
+            />
           </View>
         </View>
       </View>

app/ui/screens/events/style/CalendarItem.js

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
   card: {
     padding: 16,
     borderRadius: 2,
-    backgroundColor: Colors.gray,
+    backgroundColor: Colors.grey,
   },
   registered: {
     backgroundColor: Colors.magenta,

app/ui/screens/events/style/EventAdminScreen.js

@@ -46,29 +46,21 @@ const styles = StyleSheet.create({
   paymentContainer: {
     flex: 1,
   },
-  button: {
-    flex: 1,
-    margin: 2,
-    borderRadius: 2,
-    overflow: 'hidden',
-    android: {
-      elevation: 2,
-    },
-    ios: {
-      borderColor: Colors.lightGray,
-      borderStyle: 'solid',
-      borderWidth: 0.5,
-    },
-  },
-  card: {
-    padding: 8,
-    backgroundColor: Colors.gray,
-    alignItems: 'center',
-  },
   buttonText: {
     color: Colors.white,
     fontSize: 12,
   },
+  buttonTextContainer: {
+    padding: 8,
+    ios: {
+      paddingLeft: 10,
+      paddingRight: 10,
+    },
+  },
+  buttonMargin: {
+    marginTop: 4,
+    marginBottom: 4,
+  },
   selected: {
     backgroundColor: Colors.magenta,
   },
@@ -78,7 +70,7 @@ const styles = StyleSheet.create({
     right: 16,
     borderRadius: 28,
     overflow: 'hidden',
-    backgroundColor: Colors.gray,
+    backgroundColor: Colors.grey,
     android: {
       elevation: 4,
     },

app/ui/screens/pizza/style/PizzaScreen.js

@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
       fontFamily: 'System',
       fontWeight: '300',
     },
-    color: Colors.gray,
+    color: Colors.grey,
     fontSize: 14,
     marginTop: 2,
     marginBottom: 2,

app/ui/screens/profile/style/Profile.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   data: {
     fontSize: 14,
     lineHeight: 24,
-    color: Colors.gray,
+    color: Colors.grey,
     android: {
       fontFamily: 'sans-serif-medium',
     },

app/ui/screens/settings/NotificationsSection.js

@@ -75,7 +75,7 @@ class NotificationsSection extends Component {
             onValueChange={value => this.updateField(category.key, value)}
             onTintColor={Colors.magenta}
             thumbTintColor={this.state[category.key]
-              ? Colors.darkMagenta : Colors.gray}
+              ? Colors.darkMagenta : Colors.grey}
             disabled={category.key === GENERAL_KEY}
             style={styles.settingsSwitch}
           />

app/ui/screens/settings/style/NotificationsSection.js

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     },
   },
   description: {
-    color: Colors.gray,
+    color: Colors.grey,
     android: {
       fontFamily: 'sans-serif-medium',
     },

app/ui/screens/welcome/style/EventDetailCard.js

@@ -106,7 +106,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.magenta,
   },
   unregistered: {
-    backgroundColor: Colors.gray,
+    backgroundColor: Colors.grey,
   },
 });
 

app/ui/style/Colors.js

@@ -6,7 +6,7 @@ export default {
   background: '#FAFAFA',
   black: '#000000',
   lightGray: '#BBBBBB',
-  gray: '#616161',
+  grey: '#616161',
   textColour: '#313131',
   darkGrey: '#373737',
   dividerGrey: 'rgba(0, 0, 0, 0.12)',