Update headers in `SelectLocation`

4 files changed, 26 insertions, 53 deletions

diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index 6c7087e451..6257f89aef 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -1,8 +1,10 @@
 // @flow
 import * as React from 'react';
-import { Button, Text, View } from 'reactxp';
+import { View } from 'reactxp';
 import { Layout, Container } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
+import NavigationBar, { CloseBarItem } from './NavigationBar';
+import SettingsHeader, { HeaderTitle, HeaderSubTitle } from './SettingsHeader';
 import * as Cell from './Cell';
 import styles from './SelectLocationStyles';
 import Img from './Img';
@@ -67,20 +69,22 @@ export default class SelectLocation extends React.Component<SelectLocationProps,
       <Layout>
         <Container>
           <View style={styles.select_location}>
-            <Button style={styles.close} onPress={this.props.onClose} testName="close">
-              <Img style={styles.close_icon} source="icon-close" />
-            </Button>
+            <NavigationBar>
+              <CloseBarItem action={this.props.onClose} />
+            </NavigationBar>
             <View style={styles.container}>
-              <View style={styles.header}>
-                <Text style={styles.title}>Select location</Text>
-              </View>
+              <SettingsHeader style={styles.title_header}>
+                <HeaderTitle>Select location</HeaderTitle>
+              </SettingsHeader>
 
               <CustomScrollbars autoHide={true} ref={(ref) => (this._scrollView = ref)}>
                 <View style={styles.content}>
-                  <Text style={styles.subtitle}>
-                    While connected, your real location is masked with a private and secure location
-                    in the selected region
-                  </Text>
+                  <SettingsHeader style={styles.subtitle_header}>
+                    <HeaderSubTitle>
+                      While connected, your real location is masked with a private and secure
+                      location in the selected region
+                    </HeaderSubTitle>
+                  </SettingsHeader>
 
                   {this.props.settings.relayLocations.map((relayCountry) => {
                     return this._renderCountry(relayCountry);
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index 6268f6ea16..424f535ae1 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -1,5 +1,5 @@
 // @flow
-import { createViewStyles, createTextStyles } from '../lib/styles';
+import { createViewStyles } from '../lib/styles';
 import { colors } from '../config';
 
 export default {
@@ -12,20 +12,11 @@ export default {
       flexDirection: 'column',
       flex: 1,
     },
-    header: {
-      flex: 0,
-      marginBottom: 16,
-    },
-    close: {
-      marginLeft: 12,
-      marginTop: 24,
-      cursor: 'default',
+    title_header: {
+      paddingBottom: 0,
     },
-    close_icon: {
-      width: 24,
-      height: 24,
-      flex: 0,
-      opacity: 0.6,
+    subtitle_header: {
+      paddingTop: 0,
     },
     content: {
       overflow: 'visible',
@@ -94,29 +85,4 @@ export default {
       color: colors.white,
     },
   }),
-  ...createTextStyles({
-    title: {
-      fontFamily: 'DINPro',
-      fontSize: 32,
-      fontWeight: '900',
-      lineHeight: 40,
-      color: colors.white,
-      paddingTop: 16,
-      paddingLeft: 24,
-      paddingRight: 24,
-    },
-    subtitle: {
-      fontFamily: 'Open Sans',
-      fontSize: 13,
-      fontWeight: '600',
-      lineHeight: 20,
-      color: colors.white60,
-      letterSpacing: -0.2,
-      paddingTop: 0,
-      paddingLeft: 24,
-      paddingRight: 24,
-      paddingBottom: 24,
-      flex: 0,
-    },
-  }),
 };
diff --git a/app/components/SettingsHeader.js b/app/components/SettingsHeader.js
index c0a3149d02..c1791d6fc0 100644
--- a/app/components/SettingsHeader.js
+++ b/app/components/SettingsHeader.js
@@ -41,7 +41,7 @@ const styles = {
 export default class SettingsHeader extends Component {
   render() {
     return (
-      <View style={[styles.header.default, styles.header[process.platform]]}>
+      <View style={[styles.header.default, styles.header[process.platform], this.props.style]}>
         {this.props.children}
       </View>
     );
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index bb5256cf54..a8cd18cba3 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { CloseBarItem } from '../../app/components/NavigationBar';
 import SelectLocation from '../../app/components/SelectLocation';
 
 import type { SettingsReduxState } from '../../app/redux/settings/reducers';
@@ -63,8 +64,10 @@ describe('components/SelectLocation', () => {
     const props = makeProps(state, {
       onClose: () => done(),
     });
-    const node = getComponent(render(props), 'close');
-    node.simulate('press');
+    const component = render(props)
+      .find(CloseBarItem)
+      .dive();
+    component.simulate('press');
   });
 
   it('should call select callback for country', (done) => {