3 files changed, 21 insertions, 51 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>
     );