Click area modification and style alignment

2 files changed, 36 insertions, 15 deletions

diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 202034bd41..f938adbfe3 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -124,10 +124,12 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
     });
   }
 
-  _relayStatusIndicator(active: boolean) {
+  _relayStatusIndicator(active: boolean, isSelected: boolean) {
     const statusClass = active ? styles.relay_status__active : styles.relay_status__inactive;
 
-    return (<View style={[ styles.relay_status, statusClass ]}></View>);
+    return ( isSelected ?
+            <Img style={ styles.tick_icon } source='icon-tick' height='24' width='24' /> :
+            <View style={[ styles.relay_status, statusClass ]}></View>);
   }
 
   _renderCountry(relayCountry: RelayLocationRedux) {
@@ -149,14 +151,12 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
       <View key={ relayCountry.code } style={styles.country}>
         <CellButton
           cellHoverStyle={ isSelected ? styles.cell_selected : null }
-          style={ isSelected ? styles.cell_selected : null }
+          style={ isSelected ? styles.cell_selected : styles.cell }
           onPress={ handleSelect }
           disabled={!relayCountry.hasActiveRelays}
           testName='country'>
 
-          { isSelected ?
-            <Img style={ styles.tick_icon } source='icon-tick' height='24' width='24' /> :
-            this._relayStatusIndicator(relayCountry.hasActiveRelays) }
+          { this._relayStatusIndicator(relayCountry.hasActiveRelays, isSelected) }
 
           <Label>
             { relayCountry.name }
@@ -200,9 +200,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
         testName='city'
         ref={onRef}>
 
-        { isSelected ?
-          <Img style={ styles.tick_icon } source='icon-tick' height='24' width='24' /> :
-          this._relayStatusIndicator(relayCity.hasActiveRelays) }
+        { this._relayStatusIndicator(relayCity.hasActiveRelays, isSelected) }
 
         <Label>
           { relayCity.name }
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index fe5768d9f2..6137635ca7 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -31,8 +31,10 @@ export default {
       width: 16,
       height: 16,
       borderRadius: 8,
-      marginLeft: 8,
-      marginRight: 8,
+      marginLeft: 4,
+      marginRight: 4,
+      marginTop: 20,
+      marginBottom: 20,
     },
     relay_status__inactive: {
       backgroundColor: colors.red95,
@@ -41,27 +43,48 @@ export default {
       backgroundColor: colors.green90,
     },
     tick_icon: {
-      marginLeft: 4,
-      marginRight: 4,
+      marginLeft: 0,
+      marginRight: 0,
+      marginTop: 14,
+      marginBottom: 14,
     },
     country: {
       flexDirection: 'column',
       flex: 0,
     },
     collapse_button: {
-      height: 24,
-      width: 24,
+      flex: 0,
       alignSelf: 'flex-end',
+      paddingTop: 14,
+      paddingBottom: 14,
+      paddingRight: 16,
+      paddingLeft: 16,
+    },
+    cell: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 24,
+      paddingRight: 0,
     },
     sub_cell: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingRight: 0,
       paddingLeft: 40,
       backgroundColor: colors.blue40,
     },
     sub_cell__selected: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingRight: 0,
       paddingLeft: 40,
       backgroundColor: colors.green,
     },
     cell_selected: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 20,
+      paddingRight: 0,
       backgroundColor: colors.green,
     },
     expand_chevron_hover: {