From e4b3ec8da8f0de37070e498d702915be084a01fa Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Mon, 20 Aug 2018 11:26:35 +0530
Subject: [PATCH 1/9] [ui] Settings Screen: Design changes to List and Button

---
 src/components/common/SettingsListItem.js  |  2 +-
 src/global/Styles.js                       | 20 ++++++++++++++++++++
 src/screens/Settings/SettingsList/index.js | 15 +++++++++------
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/common/SettingsListItem.js b/src/components/common/SettingsListItem.js
index 4e08d90d3..dd92659bc 100644
--- a/src/components/common/SettingsListItem.js
+++ b/src/components/common/SettingsListItem.js
@@ -58,7 +58,7 @@ const SettingsListItem = ({
   });
 
   return (
-    <View style={[styles.sectionListItemContainer, style]}>
+    <View style={[styles.sectionListItemContainer, styles.settingsList, style]}>
       <TouchableOpacity
         testID='Touchable'
         onPress={() => onPress(id)}
diff --git a/src/global/Styles.js b/src/global/Styles.js
index 2ddee09d5..30140bdbc 100644
--- a/src/global/Styles.js
+++ b/src/global/Styles.js
@@ -689,6 +689,26 @@ const styles = {
   segmentedControlContainerBackground: {
     backgroundColor: 'transparent',
   },
+
+  settingsList: {
+    height: 50,
+    borderBottomWidth: 1.6,
+    borderColor: Colors.borderColor,
+  },
+
+  switchAccountText:
+  {
+    color: 'white',
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  switchAccountButton: {
+    height: 54,
+    backgroundColor: '#FF8B00',
+    alignSelf: 'stretch',
+    borderRadius: 0,
+  },
+
   tabsContainerStyle: {
     backgroundColor: 'transparent',
   },
diff --git a/src/screens/Settings/SettingsList/index.js b/src/screens/Settings/SettingsList/index.js
index 72c4216cc..2645536b3 100644
--- a/src/screens/Settings/SettingsList/index.js
+++ b/src/screens/Settings/SettingsList/index.js
@@ -108,12 +108,15 @@ class SettingsListScreen extends NavigatorComponent<Props> {
             data={items}
             style={styles.sectionList}
           />
-          <View style={styles.buttonContainer}>
-            <Button
-              title={i18n.t('screens.settings.switchAccounts')}
-              onPress={this.props.logout}
-            />
-          </View>
+        </View>
+        <View style={styles.buttonContainer}>
+          <Button
+            enabled
+            styleTitle={styles.switchAccountText}
+            title={i18n.t('screens.settings.switchAccounts').toUpperCase()}
+            onPress={this.props.logout}
+            style={styles.switchAccountButton}
+          />
         </View>
       </View>
     );

From 43f7782fd599b5500f445a367dfed114536f418c Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Mon, 20 Aug 2018 21:25:42 +0530
Subject: [PATCH 2/9] [ui] Updated design of arrows and buttons to match design

---
 .../Profile/__snapshots__/index.js.snap       | 302 +++++++++++++-----
 src/components/common/SettingsListItem.js     |  46 +--
 src/global/Styles.js                          |   5 +-
 .../Settings/ProfileScreen/Profile/index.js   |  12 +-
 src/screens/Settings/SettingsList/index.js    |  16 +-
 5 files changed, 273 insertions(+), 108 deletions(-)

diff --git a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
index f9eebd440..5fe47d47e 100644
--- a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
+++ b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
@@ -129,33 +129,55 @@ ShallowWrapper {
         <View
           style={
             Object {
-              "marginLeft": 40,
-              "marginRight": 40,
-              "marginTop": 10,
+              "alignItems": "stretch",
+              "flex": 1,
+              "flexDirection": "column",
+              "justifyContent": "space-between",
             }
           }
         >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
+          <View
             style={
               Object {
-                "color": undefined,
-                "fontSize": 13,
-                "textAlign": "center",
+                "marginLeft": 40,
+                "marginRight": 40,
+                "marginTop": 10,
               }
             }
-          />
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
+                }
+              }
+            />
+          </View>
           <Button
             enabled={true}
             onPress={[Function]}
             style={
               Object {
-                "marginTop": 13,
+                "alignSelf": "stretch",
+                "backgroundColor": "#FF8B00",
+                "borderRadius": 0,
+                "bottom": 0,
+                "height": 54,
               }
             }
-            title="Share Identity Key"
+            styleTitle={
+              Object {
+                "color": "white",
+                "fontSize": 15,
+                "fontWeight": "900",
+              }
+            }
+            title="SHARE IDENTITY KEY"
           />
         </View>,
       ],
@@ -313,33 +335,55 @@ ShallowWrapper {
         "nodeType": "class",
         "props": Object {
           "children": Array [
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <View
               style={
                 Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
                 }
               }
-            />,
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />
+            </View>,
             <Button
               enabled={true}
               onPress={[Function]}
               style={
                 Object {
-                  "marginTop": 13,
+                  "alignSelf": "stretch",
+                  "backgroundColor": "#FF8B00",
+                  "borderRadius": 0,
+                  "bottom": 0,
+                  "height": 54,
                 }
               }
-              title="Share Identity Key"
+              styleTitle={
+                Object {
+                  "color": "white",
+                  "fontSize": 15,
+                  "fontWeight": "900",
+                }
+              }
+              title="SHARE IDENTITY KEY"
             />,
           ],
           "style": Object {
-            "marginLeft": 40,
-            "marginRight": 40,
-            "marginTop": 10,
+            "alignItems": "stretch",
+            "flex": 1,
+            "flexDirection": "column",
+            "justifyContent": "space-between",
           },
         },
         "ref": null,
@@ -349,18 +393,44 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "accessible": true,
-              "allowFontScaling": true,
-              "children": undefined,
-              "ellipsizeMode": "tail",
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />,
               "style": Object {
-                "color": undefined,
-                "fontSize": 13,
-                "textAlign": "center",
+                "marginLeft": 40,
+                "marginRight": 40,
+                "marginTop": 10,
               },
             },
             "ref": null,
-            "rendered": null,
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": undefined,
+                "ellipsizeMode": "tail",
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
+                },
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
             "type": [Function],
           },
           Object {
@@ -372,9 +442,18 @@ ShallowWrapper {
               "enabled": true,
               "onPress": [Function],
               "style": Object {
-                "marginTop": 13,
+                "alignSelf": "stretch",
+                "backgroundColor": "#FF8B00",
+                "borderRadius": 0,
+                "bottom": 0,
+                "height": 54,
               },
-              "title": "Share Identity Key",
+              "styleTitle": Object {
+                "color": "white",
+                "fontSize": 15,
+                "fontWeight": "900",
+              },
+              "title": "SHARE IDENTITY KEY",
             },
             "ref": null,
             "rendered": null,
@@ -456,33 +535,55 @@ ShallowWrapper {
           <View
             style={
               Object {
-                "marginLeft": 40,
-                "marginRight": 40,
-                "marginTop": 10,
+                "alignItems": "stretch",
+                "flex": 1,
+                "flexDirection": "column",
+                "justifyContent": "space-between",
               }
             }
           >
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <View
               style={
                 Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
                 }
               }
-            />
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />
+            </View>
             <Button
               enabled={true}
               onPress={[Function]}
               style={
                 Object {
-                  "marginTop": 13,
+                  "alignSelf": "stretch",
+                  "backgroundColor": "#FF8B00",
+                  "borderRadius": 0,
+                  "bottom": 0,
+                  "height": 54,
                 }
               }
-              title="Share Identity Key"
+              styleTitle={
+                Object {
+                  "color": "white",
+                  "fontSize": 15,
+                  "fontWeight": "900",
+                }
+              }
+              title="SHARE IDENTITY KEY"
             />
           </View>,
         ],
@@ -640,33 +741,55 @@ ShallowWrapper {
           "nodeType": "class",
           "props": Object {
             "children": Array [
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
+              <View
                 style={
                   Object {
-                    "color": undefined,
-                    "fontSize": 13,
-                    "textAlign": "center",
+                    "marginLeft": 40,
+                    "marginRight": 40,
+                    "marginTop": 10,
                   }
                 }
-              />,
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 13,
+                      "textAlign": "center",
+                    }
+                  }
+                />
+              </View>,
               <Button
                 enabled={true}
                 onPress={[Function]}
                 style={
                   Object {
-                    "marginTop": 13,
+                    "alignSelf": "stretch",
+                    "backgroundColor": "#FF8B00",
+                    "borderRadius": 0,
+                    "bottom": 0,
+                    "height": 54,
+                  }
+                }
+                styleTitle={
+                  Object {
+                    "color": "white",
+                    "fontSize": 15,
+                    "fontWeight": "900",
                   }
                 }
-                title="Share Identity Key"
+                title="SHARE IDENTITY KEY"
               />,
             ],
             "style": Object {
-              "marginLeft": 40,
-              "marginRight": 40,
-              "marginTop": 10,
+              "alignItems": "stretch",
+              "flex": 1,
+              "flexDirection": "column",
+              "justifyContent": "space-between",
             },
           },
           "ref": null,
@@ -676,18 +799,44 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
-                "children": undefined,
-                "ellipsizeMode": "tail",
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 13,
+                      "textAlign": "center",
+                    }
+                  }
+                />,
                 "style": Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
                 },
               },
               "ref": null,
-              "rendered": null,
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": undefined,
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  },
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
               "type": [Function],
             },
             Object {
@@ -699,9 +848,18 @@ ShallowWrapper {
                 "enabled": true,
                 "onPress": [Function],
                 "style": Object {
-                  "marginTop": 13,
+                  "alignSelf": "stretch",
+                  "backgroundColor": "#FF8B00",
+                  "borderRadius": 0,
+                  "bottom": 0,
+                  "height": 54,
+                },
+                "styleTitle": Object {
+                  "color": "white",
+                  "fontSize": 15,
+                  "fontWeight": "900",
                 },
-                "title": "Share Identity Key",
+                "title": "SHARE IDENTITY KEY",
               },
               "ref": null,
               "rendered": null,
diff --git a/src/components/common/SettingsListItem.js b/src/components/common/SettingsListItem.js
index dd92659bc..727fa2108 100644
--- a/src/components/common/SettingsListItem.js
+++ b/src/components/common/SettingsListItem.js
@@ -1,22 +1,24 @@
 // @flow
 
 import React from 'react';
-import { View, Text, TouchableOpacity, Image, Switch } from 'react-native';
+import { View, Text, TouchableOpacity, Switch } from 'react-native';
 import { MediaQueryStyleSheet } from 'react-native-responsive';
+// import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Icon from 'react-native-vector-icons/Octicons';
 
 import GlobalStyles from '../../global/Styles';
-import AssetsImages from '../../global/AssetsImages';
+// import AssetsImages from '../../global/AssetsImages';
 import Colors from '../../global/colors';
 
 export type AdditionalViewKind =
-  {
-    type: 'disclosure',
-  } |
-  {
-    type: 'switch',
-    value: boolean,
-    onValueChange: (boolean) => void,
-  };
+  | {
+      type: 'disclosure',
+    }
+  | {
+      type: 'switch',
+      value: boolean,
+      onValueChange: boolean => void,
+    };
 
 type Props = {
   /**
@@ -33,7 +35,7 @@ type Props = {
    * @desc Callback on press item.
    * @type string
    */
-  onPress: (any) => void,
+  onPress: any => void,
   /**
    * @desc Kind of additional view on the right.
    * disclosure - shows disclosure indicator on right side,
@@ -43,15 +45,19 @@ type Props = {
   /**
    * @desc Style to be applied on top of default.
    */
-  style?: any
-}
+  style?: any,
+};
 
 /**
  * @desc Component that renders nations list item.
  * @return {React.Component} A component.
  */
 const SettingsListItem = ({
-  id, text, onPress, additionalViewKind, style,
+  id,
+  text,
+  onPress,
+  additionalViewKind,
+  style,
 }: Props) => {
   const styles = MediaQueryStyleSheet.create({
     ...GlobalStyles,
@@ -68,19 +74,17 @@ const SettingsListItem = ({
         <Text style={styles.listItemText} numberOfLines={1}>
           {text}
         </Text>
-        {
-          additionalViewKind.type === 'disclosure' &&
-          <Image source={AssetsImages.disclosureRowIcon} style={styles.sectionListDisclosure} />
-        }
-        {
-          additionalViewKind.type === 'switch' &&
+        {additionalViewKind.type === 'disclosure' && (
+          <Icon name='triangle-right' size={30} color='#FF8B00' />
+        )}
+        {additionalViewKind.type === 'switch' && (
           <Switch
             style={styles.switchObject}
             onTintColor={Colors.BitnationHighlightColor}
             onValueChange={additionalViewKind.onValueChange}
             value={additionalViewKind.value}
           />
-        }
+        )}
       </TouchableOpacity>
     </View>
   );
diff --git a/src/global/Styles.js b/src/global/Styles.js
index 30140bdbc..f6dd9a3c2 100644
--- a/src/global/Styles.js
+++ b/src/global/Styles.js
@@ -696,17 +696,18 @@ const styles = {
     borderColor: Colors.borderColor,
   },
 
-  switchAccountText:
+  settingsText:
   {
     color: 'white',
     fontSize: 15,
     fontWeight: '900',
   },
-  switchAccountButton: {
+  settingsButton: {
     height: 54,
     backgroundColor: '#FF8B00',
     alignSelf: 'stretch',
     borderRadius: 0,
+    bottom: 0,
   },
 
   tabsContainerStyle: {
diff --git a/src/screens/Settings/ProfileScreen/Profile/index.js b/src/screens/Settings/ProfileScreen/Profile/index.js
index e06c23fa1..928ee8b9b 100644
--- a/src/screens/Settings/ProfileScreen/Profile/index.js
+++ b/src/screens/Settings/ProfileScreen/Profile/index.js
@@ -128,12 +128,16 @@ class ProfileScreen extends NavigatorComponent<Props> {
     const { publicKey } = this.props;
 
     return (
-      <View style={styles.publicKey}>
-        <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
+      <View style={styles.screenContainer}>
+        <View style={styles.publicKey}>
+          <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
+        </View>
         <Button
-          style={styles.panelButton}
-          title={i18n.t('screens.profile.shareKey')}
+          enabled
+          style={styles.settingsButton}
+          title={i18n.t('screens.profile.shareKey').toUpperCase()}
           onPress={this.sharePublicKey}
+          styleTitle={styles.settingsText}
         />
       </View>
     );
diff --git a/src/screens/Settings/SettingsList/index.js b/src/screens/Settings/SettingsList/index.js
index 2645536b3..c5ae7b254 100644
--- a/src/screens/Settings/SettingsList/index.js
+++ b/src/screens/Settings/SettingsList/index.js
@@ -109,15 +109,13 @@ class SettingsListScreen extends NavigatorComponent<Props> {
             style={styles.sectionList}
           />
         </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            enabled
-            styleTitle={styles.switchAccountText}
-            title={i18n.t('screens.settings.switchAccounts').toUpperCase()}
-            onPress={this.props.logout}
-            style={styles.switchAccountButton}
-          />
-        </View>
+        <Button
+          enabled
+          styleTitle={styles.settingsText}
+          title={i18n.t('screens.settings.switchAccounts').toUpperCase()}
+          onPress={this.props.logout}
+          style={styles.settingsButton}
+        />
       </View>
     );
   }

From 920460bdb65cd9e1532876acea2f0183abc479ed Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Tue, 21 Aug 2018 13:10:09 +0530
Subject: [PATCH 3/9] Updated Global Header Title Style

---
 .../common/__snapshots__/ScreenTitle.js.snap  | 38 +++++++++++--------
 src/global/Styles.js                          |  5 ++-
 src/global/styles/defaultTextStyles.js        |  4 +-
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
index 67e4dd5ef..005e09207 100644
--- a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
+++ b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
@@ -23,7 +23,7 @@ ShallowWrapper {
         style={
           Object {
             "alignItems": "flex-start",
-            "height": 52,
+            "height": 40,
           }
         }
       >
@@ -35,8 +35,8 @@ ShallowWrapper {
             Object {
               "color": "#58595B",
               "fontFamily": "Roboto",
-              "fontSize": 22,
-              "fontWeight": "900",
+              "fontSize": 27,
+              "fontWeight": "500",
               "letterSpacing": 0,
               "lineHeight": 30,
             }
@@ -46,6 +46,9 @@ ShallowWrapper {
         </Text>
       </View>,
       "style": Object {
+        "borderBottomWidth": 1,
+        "borderColor": "#58595B",
+        "marginBottom": 8,
         "marginHorizontal": 20,
       },
     },
@@ -63,8 +66,8 @@ ShallowWrapper {
             Object {
               "color": "#58595B",
               "fontFamily": "Roboto",
-              "fontSize": 22,
-              "fontWeight": "900",
+              "fontSize": 27,
+              "fontWeight": "500",
               "letterSpacing": 0,
               "lineHeight": 30,
             }
@@ -74,7 +77,7 @@ ShallowWrapper {
         </Text>,
         "style": Object {
           "alignItems": "flex-start",
-          "height": 52,
+          "height": 40,
         },
       },
       "ref": null,
@@ -90,8 +93,8 @@ ShallowWrapper {
           "style": Object {
             "color": "#58595B",
             "fontFamily": "Roboto",
-            "fontSize": 22,
-            "fontWeight": "900",
+            "fontSize": 27,
+            "fontWeight": "500",
             "letterSpacing": 0,
             "lineHeight": 30,
           },
@@ -114,7 +117,7 @@ ShallowWrapper {
           style={
             Object {
               "alignItems": "flex-start",
-              "height": 52,
+              "height": 40,
             }
           }
         >
@@ -126,8 +129,8 @@ ShallowWrapper {
               Object {
                 "color": "#58595B",
                 "fontFamily": "Roboto",
-                "fontSize": 22,
-                "fontWeight": "900",
+                "fontSize": 27,
+                "fontWeight": "500",
                 "letterSpacing": 0,
                 "lineHeight": 30,
               }
@@ -137,6 +140,9 @@ ShallowWrapper {
           </Text>
         </View>,
         "style": Object {
+          "borderBottomWidth": 1,
+          "borderColor": "#58595B",
+          "marginBottom": 8,
           "marginHorizontal": 20,
         },
       },
@@ -154,8 +160,8 @@ ShallowWrapper {
               Object {
                 "color": "#58595B",
                 "fontFamily": "Roboto",
-                "fontSize": 22,
-                "fontWeight": "900",
+                "fontSize": 27,
+                "fontWeight": "500",
                 "letterSpacing": 0,
                 "lineHeight": 30,
               }
@@ -165,7 +171,7 @@ ShallowWrapper {
           </Text>,
           "style": Object {
             "alignItems": "flex-start",
-            "height": 52,
+            "height": 40,
           },
         },
         "ref": null,
@@ -181,8 +187,8 @@ ShallowWrapper {
             "style": Object {
               "color": "#58595B",
               "fontFamily": "Roboto",
-              "fontSize": 22,
-              "fontWeight": "900",
+              "fontSize": 27,
+              "fontWeight": "500",
               "letterSpacing": 0,
               "lineHeight": 30,
             },
diff --git a/src/global/Styles.js b/src/global/Styles.js
index f6dd9a3c2..b02c9d2e9 100644
--- a/src/global/Styles.js
+++ b/src/global/Styles.js
@@ -102,6 +102,9 @@ const styles = {
   // Margins position correctly INSIDE a bodyContainer View
   titleContainer: {
     marginHorizontal: 20,
+    marginBottom: 8,
+    borderBottomWidth: 1,
+    borderColor: Colors.BitnationDarkGrayColor,
   },
 
   // A block of text in the body area
@@ -172,7 +175,7 @@ const styles = {
   // If the body has no margins (bars that go edge to edge)
   // then use the style below.
   titleBarLarge: {
-    height: fontSizeNormalizer(52),
+    height: fontSizeNormalizer(40),
     alignItems: 'flex-start',
     // marginLeft: 8,
     // marginRight: 8,
diff --git a/src/global/styles/defaultTextStyles.js b/src/global/styles/defaultTextStyles.js
index 3216f8965..9c7ec6d8b 100644
--- a/src/global/styles/defaultTextStyles.js
+++ b/src/global/styles/defaultTextStyles.js
@@ -128,8 +128,8 @@ const defaultTextStyles = {
 
   largeTitle: {
     fontFamily: 'Roboto',
-    fontWeight: '900',
-    fontSize: 22,
+    fontWeight: '500',
+    fontSize: 27,
     lineHeight: 30,
     letterSpacing: 0,
     color: Colors.BitnationDarkGrayColor,

From 0c0b77fd5b64399dd627a04fbd0f0746a9db2101 Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Wed, 22 Aug 2018 13:36:01 +0530
Subject: [PATCH 4/9] [ui] Design changes to Settings Main Screen and Profile

---
 src/global/Styles.js                          |  4 +-
 src/global/styles/defaultTextStyles.js        |  3 +-
 .../Settings/ProfileScreen/Profile/index.js   | 24 +------
 src/screens/Settings/ProfileScreen/index.js   | 68 ++++++++++++-------
 4 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/global/Styles.js b/src/global/Styles.js
index b02c9d2e9..944f202b1 100644
--- a/src/global/Styles.js
+++ b/src/global/Styles.js
@@ -103,7 +103,7 @@ const styles = {
   titleContainer: {
     marginHorizontal: 20,
     marginBottom: 8,
-    borderBottomWidth: 1,
+    borderBottomWidth: Platform.OS === 'android' ? 1 : 0,
     borderColor: Colors.BitnationDarkGrayColor,
   },
 
@@ -177,8 +177,6 @@ const styles = {
   titleBarLarge: {
     height: fontSizeNormalizer(40),
     alignItems: 'flex-start',
-    // marginLeft: 8,
-    // marginRight: 8,
   },
 
   titleBarLargeNationDetail: {
diff --git a/src/global/styles/defaultTextStyles.js b/src/global/styles/defaultTextStyles.js
index 9c7ec6d8b..a5810ee1a 100644
--- a/src/global/styles/defaultTextStyles.js
+++ b/src/global/styles/defaultTextStyles.js
@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import Colors from '../colors';
 
 const defaultTextStyles = {
@@ -128,7 +129,7 @@ const defaultTextStyles = {
 
   largeTitle: {
     fontFamily: 'Roboto',
-    fontWeight: '500',
+    fontWeight: Platform.OS === 'android' ? '500' : '900',
     fontSize: 27,
     lineHeight: 30,
     letterSpacing: 0,
diff --git a/src/screens/Settings/ProfileScreen/Profile/index.js b/src/screens/Settings/ProfileScreen/Profile/index.js
index 928ee8b9b..e632ae0d8 100644
--- a/src/screens/Settings/ProfileScreen/Profile/index.js
+++ b/src/screens/Settings/ProfileScreen/Profile/index.js
@@ -6,7 +6,6 @@ import {
   View,
   Text,
   Alert,
-  Share,
 } from 'react-native';
 
 import styles from './styles';
@@ -17,7 +16,7 @@ import type { Navigator } from '../../../../types/ReactNativeNavigation';
 import type { Account } from '../../../../types/Account';
 import i18n from '../../../../global/i18n';
 import ScreenTitle from '../../../../components/common/ScreenTitle';
-import Button from '../../../../components/common/Button';
+// import Button from '../../../../components/common/Button';
 import { androidNavigationButtons } from '../../../../global/Screens';
 import { imageSource } from '../../../../utils/profile';
 
@@ -93,13 +92,6 @@ class ProfileScreen extends NavigatorComponent<Props> {
     }
   }
 
-  sharePublicKey = () => {
-    Share.share({
-      message: this.props.publicKey || '',
-    });
-    // Clipboard.setString(this.props.publicKey);
-  };
-
   render() {
     return (
       <View style={styles.bodyContainer}>
@@ -126,19 +118,9 @@ class ProfileScreen extends NavigatorComponent<Props> {
 
   _buildPublicKey() {
     const { publicKey } = this.props;
-
     return (
-      <View style={styles.screenContainer}>
-        <View style={styles.publicKey}>
-          <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
-        </View>
-        <Button
-          enabled
-          style={styles.settingsButton}
-          title={i18n.t('screens.profile.shareKey').toUpperCase()}
-          onPress={this.sharePublicKey}
-          styleTitle={styles.settingsText}
-        />
+      <View style={styles.publicKey}>
+        <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
       </View>
     );
   }
diff --git a/src/screens/Settings/ProfileScreen/index.js b/src/screens/Settings/ProfileScreen/index.js
index 9cf501fda..ceb885a0c 100644
--- a/src/screens/Settings/ProfileScreen/index.js
+++ b/src/screens/Settings/ProfileScreen/index.js
@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { View, Alert } from 'react-native';
+import { View, Alert, Share } from 'react-native';
 
 import ProfileScreen from './Profile/index';
 import EditProfile from './EditProfile/index';
@@ -11,6 +11,7 @@ import BackgroundImage from '../../../components/common/BackgroundImage';
 import { makeStep, resetSteps } from '../../../actions/testingMode';
 import FakeNavigationBar from '../../../components/common/FakeNavigationBar';
 import type { Navigator } from '../../../types/ReactNativeNavigation';
+import Button from '../../../components/common/Button';
 import type { Account } from '../../../types/Account';
 import styles from './EmptyProfile/styles';
 import { type State as AccountsState, getCurrentAccount, isCreatingAccount } from '../../../reducers/accounts';
@@ -126,6 +127,14 @@ class ProfileContainer extends Component<Props> {
     }
   };
 
+  sharePublicKey = () => {
+    Share.share({
+      message: this.props.publicKey || '',
+    });
+    // Clipboard.setString(this.props.publicKey);
+  };
+
+
   render() {
     const { creatingAccount, editingAccount } = this.props.accountsState;
     const { account, publicKey } = this.props;
@@ -139,30 +148,39 @@ class ProfileContainer extends Component<Props> {
       <View style={styles.screenContainer}>
         <BackgroundImage />
         <FakeNavigationBar />
-        {
-          editingAccount !== null &&
-          <EditProfile
-            account={currentAccount}
-            editingAccount={editingAccount}
-            navigator={this.props.navigator}
-            onAccountChanged={this.onAccountFieldChanged}
-            onCancelEditing={this.onCancelEditTapped}
-            onDoneEditing={this.onDoneEditTapped}
-            isCreating={isCreating}
-          />
-        }
-        {
-          editingAccount == null && account != null &&
-          <ProfileScreen
-            account={account}
-            publicKey={publicKey}
-            navigator={this.props.navigator}
-            onStartEditing={() => this.props.onStartAccountEditing(account)}
-            makeStepForTestingMode={this.props.makeStepForTestingMode}
-            resetStepsForTestingMode={this.props.resetStepsForTestingMode}
-            testingModeActive={this.props.testingModeActive}
-          />
-        }
+        <View style={styles.bodyContainer}>
+          {
+            editingAccount !== null &&
+            <EditProfile
+              account={currentAccount}
+              editingAccount={editingAccount}
+              navigator={this.props.navigator}
+              onAccountChanged={this.onAccountFieldChanged}
+              onCancelEditing={this.onCancelEditTapped}
+              onDoneEditing={this.onDoneEditTapped}
+              isCreating={isCreating}
+            />
+          }
+          {
+            editingAccount == null && account != null &&
+            <ProfileScreen
+              account={account}
+              publicKey={publicKey}
+              navigator={this.props.navigator}
+              onStartEditing={() => this.props.onStartAccountEditing(account)}
+              makeStepForTestingMode={this.props.makeStepForTestingMode}
+              resetStepsForTestingMode={this.props.resetStepsForTestingMode}
+              testingModeActive={this.props.testingModeActive}
+            />
+          }
+        </View>
+        <Button
+          enabled
+          style={styles.settingsButton}
+          title={i18n.t('screens.profile.shareKey').toUpperCase()}
+          onPress={this.sharePublicKey}
+          styleTitle={styles.settingsText}
+        />
       </View>
     );
   }

From 391068be0d8d267a633c61d5df8e44dc4ffaf6bf Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Wed, 22 Aug 2018 13:37:50 +0530
Subject: [PATCH 5/9] [ui] Updated Tests

---
 .../common/__snapshots__/ScreenTitle.js.snap  |  16 +-
 .../Profile/__snapshots__/index.js.snap       | 404 ++++--------------
 2 files changed, 90 insertions(+), 330 deletions(-)

diff --git a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
index 005e09207..21930c647 100644
--- a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
+++ b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
@@ -36,7 +36,7 @@ ShallowWrapper {
               "color": "#58595B",
               "fontFamily": "Roboto",
               "fontSize": 27,
-              "fontWeight": "500",
+              "fontWeight": "900",
               "letterSpacing": 0,
               "lineHeight": 30,
             }
@@ -46,7 +46,7 @@ ShallowWrapper {
         </Text>
       </View>,
       "style": Object {
-        "borderBottomWidth": 1,
+        "borderBottomWidth": 0,
         "borderColor": "#58595B",
         "marginBottom": 8,
         "marginHorizontal": 20,
@@ -67,7 +67,7 @@ ShallowWrapper {
               "color": "#58595B",
               "fontFamily": "Roboto",
               "fontSize": 27,
-              "fontWeight": "500",
+              "fontWeight": "900",
               "letterSpacing": 0,
               "lineHeight": 30,
             }
@@ -94,7 +94,7 @@ ShallowWrapper {
             "color": "#58595B",
             "fontFamily": "Roboto",
             "fontSize": 27,
-            "fontWeight": "500",
+            "fontWeight": "900",
             "letterSpacing": 0,
             "lineHeight": 30,
           },
@@ -130,7 +130,7 @@ ShallowWrapper {
                 "color": "#58595B",
                 "fontFamily": "Roboto",
                 "fontSize": 27,
-                "fontWeight": "500",
+                "fontWeight": "900",
                 "letterSpacing": 0,
                 "lineHeight": 30,
               }
@@ -140,7 +140,7 @@ ShallowWrapper {
           </Text>
         </View>,
         "style": Object {
-          "borderBottomWidth": 1,
+          "borderBottomWidth": 0,
           "borderColor": "#58595B",
           "marginBottom": 8,
           "marginHorizontal": 20,
@@ -161,7 +161,7 @@ ShallowWrapper {
                 "color": "#58595B",
                 "fontFamily": "Roboto",
                 "fontSize": 27,
-                "fontWeight": "500",
+                "fontWeight": "900",
                 "letterSpacing": 0,
                 "lineHeight": 30,
               }
@@ -188,7 +188,7 @@ ShallowWrapper {
               "color": "#58595B",
               "fontFamily": "Roboto",
               "fontSize": 27,
-              "fontWeight": "500",
+              "fontWeight": "900",
               "letterSpacing": 0,
               "lineHeight": 30,
             },
diff --git a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
index 5fe47d47e..c16cf2842 100644
--- a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
+++ b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
@@ -129,55 +129,23 @@ ShallowWrapper {
         <View
           style={
             Object {
-              "alignItems": "stretch",
-              "flex": 1,
-              "flexDirection": "column",
-              "justifyContent": "space-between",
+              "marginLeft": 40,
+              "marginRight": 40,
+              "marginTop": 10,
             }
           }
         >
-          <View
-            style={
-              Object {
-                "marginLeft": 40,
-                "marginRight": 40,
-                "marginTop": 10,
-              }
-            }
-          >
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              style={
-                Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
-                }
-              }
-            />
-          </View>
-          <Button
-            enabled={true}
-            onPress={[Function]}
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
             style={
               Object {
-                "alignSelf": "stretch",
-                "backgroundColor": "#FF8B00",
-                "borderRadius": 0,
-                "bottom": 0,
-                "height": 54,
-              }
-            }
-            styleTitle={
-              Object {
-                "color": "white",
-                "fontSize": 15,
-                "fontWeight": "900",
+                "color": undefined,
+                "fontSize": 13,
+                "textAlign": "center",
               }
             }
-            title="SHARE IDENTITY KEY"
           />
         </View>,
       ],
@@ -334,132 +302,44 @@ ShallowWrapper {
         "key": undefined,
         "nodeType": "class",
         "props": Object {
-          "children": Array [
-            <View
-              style={
-                Object {
-                  "marginLeft": 40,
-                  "marginRight": 40,
-                  "marginTop": 10,
-                }
-              }
-            >
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
-                style={
-                  Object {
-                    "color": undefined,
-                    "fontSize": 13,
-                    "textAlign": "center",
-                  }
-                }
-              />
-            </View>,
-            <Button
-              enabled={true}
-              onPress={[Function]}
-              style={
-                Object {
-                  "alignSelf": "stretch",
-                  "backgroundColor": "#FF8B00",
-                  "borderRadius": 0,
-                  "bottom": 0,
-                  "height": 54,
-                }
-              }
-              styleTitle={
-                Object {
-                  "color": "white",
-                  "fontSize": 15,
-                  "fontWeight": "900",
-                }
+          "children": <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "color": undefined,
+                "fontSize": 13,
+                "textAlign": "center",
               }
-              title="SHARE IDENTITY KEY"
-            />,
-          ],
+            }
+          />,
           "style": Object {
-            "alignItems": "stretch",
-            "flex": 1,
-            "flexDirection": "column",
-            "justifyContent": "space-between",
+            "marginLeft": 40,
+            "marginRight": 40,
+            "marginTop": 10,
           },
         },
         "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "children": <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
-                style={
-                  Object {
-                    "color": undefined,
-                    "fontSize": 13,
-                    "textAlign": "center",
-                  }
-                }
-              />,
-              "style": Object {
-                "marginLeft": 40,
-                "marginRight": 40,
-                "marginTop": 10,
-              },
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
-                "children": undefined,
-                "ellipsizeMode": "tail",
-                "style": Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
-                },
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            "type": [Function],
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "children": undefined,
-              "enabled": true,
-              "onPress": [Function],
-              "style": Object {
-                "alignSelf": "stretch",
-                "backgroundColor": "#FF8B00",
-                "borderRadius": 0,
-                "bottom": 0,
-                "height": 54,
-              },
-              "styleTitle": Object {
-                "color": "white",
-                "fontSize": 15,
-                "fontWeight": "900",
-              },
-              "title": "SHARE IDENTITY KEY",
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "accessible": true,
+            "allowFontScaling": true,
+            "children": undefined,
+            "ellipsizeMode": "tail",
+            "style": Object {
+              "color": undefined,
+              "fontSize": 13,
+              "textAlign": "center",
             },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
           },
-        ],
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
         "type": [Function],
       },
     ],
@@ -535,55 +415,23 @@ ShallowWrapper {
           <View
             style={
               Object {
-                "alignItems": "stretch",
-                "flex": 1,
-                "flexDirection": "column",
-                "justifyContent": "space-between",
+                "marginLeft": 40,
+                "marginRight": 40,
+                "marginTop": 10,
               }
             }
           >
-            <View
-              style={
-                Object {
-                  "marginLeft": 40,
-                  "marginRight": 40,
-                  "marginTop": 10,
-                }
-              }
-            >
-              <Text
-                accessible={true}
-                allowFontScaling={true}
-                ellipsizeMode="tail"
-                style={
-                  Object {
-                    "color": undefined,
-                    "fontSize": 13,
-                    "textAlign": "center",
-                  }
-                }
-              />
-            </View>
-            <Button
-              enabled={true}
-              onPress={[Function]}
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
               style={
                 Object {
-                  "alignSelf": "stretch",
-                  "backgroundColor": "#FF8B00",
-                  "borderRadius": 0,
-                  "bottom": 0,
-                  "height": 54,
-                }
-              }
-              styleTitle={
-                Object {
-                  "color": "white",
-                  "fontSize": 15,
-                  "fontWeight": "900",
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
                 }
               }
-              title="SHARE IDENTITY KEY"
             />
           </View>,
         ],
@@ -740,132 +588,44 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "class",
           "props": Object {
-            "children": Array [
-              <View
-                style={
-                  Object {
-                    "marginLeft": 40,
-                    "marginRight": 40,
-                    "marginTop": 10,
-                  }
-                }
-              >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
-                  style={
-                    Object {
-                      "color": undefined,
-                      "fontSize": 13,
-                      "textAlign": "center",
-                    }
-                  }
-                />
-              </View>,
-              <Button
-                enabled={true}
-                onPress={[Function]}
-                style={
-                  Object {
-                    "alignSelf": "stretch",
-                    "backgroundColor": "#FF8B00",
-                    "borderRadius": 0,
-                    "bottom": 0,
-                    "height": 54,
-                  }
-                }
-                styleTitle={
-                  Object {
-                    "color": "white",
-                    "fontSize": 15,
-                    "fontWeight": "900",
-                  }
+            "children": <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
                 }
-                title="SHARE IDENTITY KEY"
-              />,
-            ],
+              }
+            />,
             "style": Object {
-              "alignItems": "stretch",
-              "flex": 1,
-              "flexDirection": "column",
-              "justifyContent": "space-between",
+              "marginLeft": 40,
+              "marginRight": 40,
+              "marginTop": 10,
             },
           },
           "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "children": <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
-                  style={
-                    Object {
-                      "color": undefined,
-                      "fontSize": 13,
-                      "textAlign": "center",
-                    }
-                  }
-                />,
-                "style": Object {
-                  "marginLeft": 40,
-                  "marginRight": 40,
-                  "marginTop": 10,
-                },
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "class",
-                "props": Object {
-                  "accessible": true,
-                  "allowFontScaling": true,
-                  "children": undefined,
-                  "ellipsizeMode": "tail",
-                  "style": Object {
-                    "color": undefined,
-                    "fontSize": 13,
-                    "textAlign": "center",
-                  },
-                },
-                "ref": null,
-                "rendered": null,
-                "type": [Function],
-              },
-              "type": [Function],
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "children": undefined,
-                "enabled": true,
-                "onPress": [Function],
-                "style": Object {
-                  "alignSelf": "stretch",
-                  "backgroundColor": "#FF8B00",
-                  "borderRadius": 0,
-                  "bottom": 0,
-                  "height": 54,
-                },
-                "styleTitle": Object {
-                  "color": "white",
-                  "fontSize": 15,
-                  "fontWeight": "900",
-                },
-                "title": "SHARE IDENTITY KEY",
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "accessible": true,
+              "allowFontScaling": true,
+              "children": undefined,
+              "ellipsizeMode": "tail",
+              "style": Object {
+                "color": undefined,
+                "fontSize": 13,
+                "textAlign": "center",
               },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
             },
-          ],
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
           "type": [Function],
         },
       ],

From 0d4f3734df2b561cb9cd89289b5117eda7dfabcc Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Wed, 22 Aug 2018 20:14:14 +0530
Subject: [PATCH 6/9] [ui] Updated Styles for Settings Screen

---
 src/components/common/SettingsListItem.js     | 25 +++++++++++++------
 src/global/Styles.js                          |  2 --
 src/global/colors.js                          |  2 +-
 .../ProfileScreen/EditProfile/index.js        |  4 +--
 .../Settings/ProfileScreen/Profile/index.js   |  2 +-
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/common/SettingsListItem.js b/src/components/common/SettingsListItem.js
index 727fa2108..f65872dc1 100644
--- a/src/components/common/SettingsListItem.js
+++ b/src/components/common/SettingsListItem.js
@@ -1,13 +1,11 @@
 // @flow
 
 import React from 'react';
-import { View, Text, TouchableOpacity, Switch } from 'react-native';
+import { View, Text, TouchableOpacity, Switch, Platform } from 'react-native';
 import { MediaQueryStyleSheet } from 'react-native-responsive';
-// import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import Icon from 'react-native-vector-icons/Octicons';
-
+import IosIcon from 'react-native-vector-icons/Octicons';
+import AndroidIcon from 'react-native-vector-icons/Entypo';
 import GlobalStyles from '../../global/Styles';
-// import AssetsImages from '../../global/AssetsImages';
 import Colors from '../../global/colors';
 
 export type AdditionalViewKind =
@@ -74,9 +72,20 @@ const SettingsListItem = ({
         <Text style={styles.listItemText} numberOfLines={1}>
           {text}
         </Text>
-        {additionalViewKind.type === 'disclosure' && (
-          <Icon name='triangle-right' size={30} color='#FF8B00' />
-        )}
+        {additionalViewKind.type === 'disclosure' &&
+          (Platform.OS === 'ios' ? (
+            <IosIcon
+              name='triangle-right'
+              size={30}
+              color={Colors.BitnationLinkOrangeColor}
+            />
+          ) : (
+            <AndroidIcon
+              name='triangle-right'
+              size={30}
+              color={Colors.BitnationLinkOrangeColor}
+            />
+          ))}
         {additionalViewKind.type === 'switch' && (
           <Switch
             style={styles.switchObject}
diff --git a/src/global/Styles.js b/src/global/Styles.js
index 944f202b1..08a9817cb 100644
--- a/src/global/Styles.js
+++ b/src/global/Styles.js
@@ -103,8 +103,6 @@ const styles = {
   titleContainer: {
     marginHorizontal: 20,
     marginBottom: 8,
-    borderBottomWidth: Platform.OS === 'android' ? 1 : 0,
-    borderColor: Colors.BitnationDarkGrayColor,
   },
 
   // A block of text in the body area
diff --git a/src/global/colors.js b/src/global/colors.js
index df01f8c30..d7eafe0ee 100644
--- a/src/global/colors.js
+++ b/src/global/colors.js
@@ -162,7 +162,7 @@ export default {
   statusBarColorIOS: 'black',
 
   // PLATFORM SPECIFIC COLORS
-  androidNavigationButtons: 'white', // in Screens.js
+  androidNavigationButtons: BitnationLinkOrangeColor, // in Screens.js
 
   // Why do we have this? So we can redefine white to something just a little darker
   // because pure white can be hard...sometimes better to use 98% white.
diff --git a/src/screens/Settings/ProfileScreen/EditProfile/index.js b/src/screens/Settings/ProfileScreen/EditProfile/index.js
index 47c2b165e..cfe62fb90 100644
--- a/src/screens/Settings/ProfileScreen/EditProfile/index.js
+++ b/src/screens/Settings/ProfileScreen/EditProfile/index.js
@@ -77,7 +77,7 @@ class EditProfile extends NavigatorComponent<Props> {
         title: i18n.t('screens.profile.edit.doneButton'),
         id: DONE_BUTTON,
         disabled: !saveEnabled,
-        buttonColor: Colors.navigationButtonColor,
+        buttonColor: Colors.BitnationLinkOrangeColor,
       }],
       ...androidNavigationButtons,
     };
@@ -85,7 +85,7 @@ class EditProfile extends NavigatorComponent<Props> {
       buttons.leftButtons = [{
         title: i18n.t('screens.profile.edit.cancelButton'),
         id: 'cancel',
-        buttonColor: Colors.navigationButtonColor,
+        buttonColor: Colors.BitnationLinkOrangeColor,
       }];
     }
     this.props.navigator.setButtons(buttons);
diff --git a/src/screens/Settings/ProfileScreen/Profile/index.js b/src/screens/Settings/ProfileScreen/Profile/index.js
index e632ae0d8..655afa814 100644
--- a/src/screens/Settings/ProfileScreen/Profile/index.js
+++ b/src/screens/Settings/ProfileScreen/Profile/index.js
@@ -63,7 +63,7 @@ class ProfileScreen extends NavigatorComponent<Props> {
       rightButtons: [{
         title: i18n.t('screens.profile.editButton'),
         id: EDIT_BUTTON,
-        buttonColor: Colors.navigationButtonColor,
+        buttonColor: Colors.BitnationLinkOrangeColor,
       }],
     });
   }

From 5dba7df7a8bee375858d5f8cad38721c9f3b01aa Mon Sep 17 00:00:00 2001
From: prameetc <prameet.c@gmail.com>
Date: Wed, 22 Aug 2018 20:15:41 +0530
Subject: [PATCH 7/9] [ui] Updated Tests

---
 .../src/components/common/__snapshots__/ScreenTitle.js.snap   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
index 21930c647..0aed7bfd9 100644
--- a/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
+++ b/__tests__/src/components/common/__snapshots__/ScreenTitle.js.snap
@@ -46,8 +46,6 @@ ShallowWrapper {
         </Text>
       </View>,
       "style": Object {
-        "borderBottomWidth": 0,
-        "borderColor": "#58595B",
         "marginBottom": 8,
         "marginHorizontal": 20,
       },
@@ -140,8 +138,6 @@ ShallowWrapper {
           </Text>
         </View>,
         "style": Object {
-          "borderBottomWidth": 0,
-          "borderColor": "#58595B",
           "marginBottom": 8,
           "marginHorizontal": 20,
         },

From 92f358089615819a97df1d44cac081e2fb6f40ed Mon Sep 17 00:00:00 2001
From: Andrii Selivanov <seland2008@gmail.com>
Date: Wed, 29 Aug 2018 10:29:29 +0300
Subject: [PATCH 8/9] [profile] Fixed UI.

---
 .../Settings/ProfileScreen/Profile/index.js   | 39 +++++++----
 src/screens/Settings/ProfileScreen/index.js   | 68 +++++++------------
 2 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/src/screens/Settings/ProfileScreen/Profile/index.js b/src/screens/Settings/ProfileScreen/Profile/index.js
index 655afa814..e70d96d82 100644
--- a/src/screens/Settings/ProfileScreen/Profile/index.js
+++ b/src/screens/Settings/ProfileScreen/Profile/index.js
@@ -6,6 +6,7 @@ import {
   View,
   Text,
   Alert,
+  Share,
 } from 'react-native';
 
 import styles from './styles';
@@ -16,7 +17,7 @@ import type { Navigator } from '../../../../types/ReactNativeNavigation';
 import type { Account } from '../../../../types/Account';
 import i18n from '../../../../global/i18n';
 import ScreenTitle from '../../../../components/common/ScreenTitle';
-// import Button from '../../../../components/common/Button';
+import Button from '../../../../components/common/Button';
 import { androidNavigationButtons } from '../../../../global/Screens';
 import { imageSource } from '../../../../utils/profile';
 
@@ -92,12 +93,31 @@ class ProfileScreen extends NavigatorComponent<Props> {
     }
   }
 
+  sharePublicKey = () => {
+    Share.share({
+      message: this.props.publicKey || '',
+    });
+  };
+
   render() {
+    const { publicKey } = this.props;
+
     return (
-      <View style={styles.bodyContainer}>
-        <ScreenTitle title={i18n.t('screens.profile.title')} />
-        {this._buildHeader()}
-        {this._buildPublicKey()}
+      <View style={styles.screenContainer}>
+        <View style={styles.bodyContainer}>
+          <ScreenTitle title={i18n.t('screens.profile.title')} />
+          {this._buildHeader()}
+          <View style={styles.publicKey}>
+            <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
+          </View>
+        </View>
+        <Button
+          enabled
+          style={styles.settingsButton}
+          title={i18n.t('screens.profile.shareKey').toUpperCase()}
+          onPress={this.sharePublicKey}
+          styleTitle={styles.settingsText}
+        />
       </View>
     );
   }
@@ -115,15 +135,6 @@ class ProfileScreen extends NavigatorComponent<Props> {
       </View>
     );
   }
-
-  _buildPublicKey() {
-    const { publicKey } = this.props;
-    return (
-      <View style={styles.publicKey}>
-        <Text style={styles.publicKeyText}>{publicKey && publicKey.trim()}</Text>
-      </View>
-    );
-  }
 }
 
 export default ProfileScreen;
diff --git a/src/screens/Settings/ProfileScreen/index.js b/src/screens/Settings/ProfileScreen/index.js
index ceb885a0c..9cf501fda 100644
--- a/src/screens/Settings/ProfileScreen/index.js
+++ b/src/screens/Settings/ProfileScreen/index.js
@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { View, Alert, Share } from 'react-native';
+import { View, Alert } from 'react-native';
 
 import ProfileScreen from './Profile/index';
 import EditProfile from './EditProfile/index';
@@ -11,7 +11,6 @@ import BackgroundImage from '../../../components/common/BackgroundImage';
 import { makeStep, resetSteps } from '../../../actions/testingMode';
 import FakeNavigationBar from '../../../components/common/FakeNavigationBar';
 import type { Navigator } from '../../../types/ReactNativeNavigation';
-import Button from '../../../components/common/Button';
 import type { Account } from '../../../types/Account';
 import styles from './EmptyProfile/styles';
 import { type State as AccountsState, getCurrentAccount, isCreatingAccount } from '../../../reducers/accounts';
@@ -127,14 +126,6 @@ class ProfileContainer extends Component<Props> {
     }
   };
 
-  sharePublicKey = () => {
-    Share.share({
-      message: this.props.publicKey || '',
-    });
-    // Clipboard.setString(this.props.publicKey);
-  };
-
-
   render() {
     const { creatingAccount, editingAccount } = this.props.accountsState;
     const { account, publicKey } = this.props;
@@ -148,39 +139,30 @@ class ProfileContainer extends Component<Props> {
       <View style={styles.screenContainer}>
         <BackgroundImage />
         <FakeNavigationBar />
-        <View style={styles.bodyContainer}>
-          {
-            editingAccount !== null &&
-            <EditProfile
-              account={currentAccount}
-              editingAccount={editingAccount}
-              navigator={this.props.navigator}
-              onAccountChanged={this.onAccountFieldChanged}
-              onCancelEditing={this.onCancelEditTapped}
-              onDoneEditing={this.onDoneEditTapped}
-              isCreating={isCreating}
-            />
-          }
-          {
-            editingAccount == null && account != null &&
-            <ProfileScreen
-              account={account}
-              publicKey={publicKey}
-              navigator={this.props.navigator}
-              onStartEditing={() => this.props.onStartAccountEditing(account)}
-              makeStepForTestingMode={this.props.makeStepForTestingMode}
-              resetStepsForTestingMode={this.props.resetStepsForTestingMode}
-              testingModeActive={this.props.testingModeActive}
-            />
-          }
-        </View>
-        <Button
-          enabled
-          style={styles.settingsButton}
-          title={i18n.t('screens.profile.shareKey').toUpperCase()}
-          onPress={this.sharePublicKey}
-          styleTitle={styles.settingsText}
-        />
+        {
+          editingAccount !== null &&
+          <EditProfile
+            account={currentAccount}
+            editingAccount={editingAccount}
+            navigator={this.props.navigator}
+            onAccountChanged={this.onAccountFieldChanged}
+            onCancelEditing={this.onCancelEditTapped}
+            onDoneEditing={this.onDoneEditTapped}
+            isCreating={isCreating}
+          />
+        }
+        {
+          editingAccount == null && account != null &&
+          <ProfileScreen
+            account={account}
+            publicKey={publicKey}
+            navigator={this.props.navigator}
+            onStartEditing={() => this.props.onStartAccountEditing(account)}
+            makeStepForTestingMode={this.props.makeStepForTestingMode}
+            resetStepsForTestingMode={this.props.resetStepsForTestingMode}
+            testingModeActive={this.props.testingModeActive}
+          />
+        }
       </View>
     );
   }

From f066e26ba74439f093ce6fb93d8a1463d5ab437f Mon Sep 17 00:00:00 2001
From: Andrii Selivanov <seland2008@gmail.com>
Date: Wed, 29 Aug 2018 10:30:17 +0300
Subject: [PATCH 9/9] [tests] Updated snapshots.

---
 .../Profile/__snapshots__/index.js.snap       | 1002 +++++++++++------
 1 file changed, 662 insertions(+), 340 deletions(-)

diff --git a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
index c16cf2842..b22676f54 100644
--- a/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
+++ b/__tests__/src/screens/Settings/ProfileScreen/Profile/__snapshots__/index.js.snap
@@ -66,117 +66,32 @@ ShallowWrapper {
     "nodeType": "class",
     "props": Object {
       "children": Array [
-        <ScreenTitle
-          title="Profile"
-        />,
         <View
           style={
             Object {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
+              "alignContent": "flex-start",
+              "flex": 1,
               "flexDirection": "column",
-              "justifyContent": "space-around",
-              "marginBottom": 20,
+              "justifyContent": "flex-start",
+              "marginLeft": 8,
+              "marginRight": 8,
             }
           }
         >
-          <Image
-            source={1}
-            style={
-              Object {
-                "borderRadius": 50,
-                "height": 100,
-                "margin": 16,
-                "width": 100,
-              }
-            }
+          <ScreenTitle
+            title="Profile"
           />
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
-              Object {
-                "color": "#58595B",
-                "fontFamily": "Roboto",
-                "fontSize": 28,
-                "fontWeight": "bold",
-                "letterSpacing": 0,
-                "lineHeight": 34,
-              }
-            }
-          >
-            Pangea
-          </Text>
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
+          <View
             style={
               Object {
-                "color": "#929497",
-                "fontFamily": "Roboto",
-                "fontSize": 17,
-                "fontWeight": "normal",
-                "letterSpacing": 0,
-                "lineHeight": 22,
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "flexDirection": "column",
+                "justifyContent": "space-around",
+                "marginBottom": 20,
               }
             }
           >
-            NYC
-          </Text>
-        </View>,
-        <View
-          style={
-            Object {
-              "marginLeft": 40,
-              "marginRight": 40,
-              "marginTop": 10,
-            }
-          }
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
-              Object {
-                "color": undefined,
-                "fontSize": 13,
-                "textAlign": "center",
-              }
-            }
-          />
-        </View>,
-      ],
-      "style": Object {
-        "alignContent": "flex-start",
-        "flex": 1,
-        "flexDirection": "column",
-        "justifyContent": "flex-start",
-        "marginLeft": 8,
-        "marginRight": 8,
-      },
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "function",
-        "props": Object {
-          "title": "Profile",
-        },
-        "ref": null,
-        "rendered": null,
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": Array [
             <Image
               source={1}
               style={
@@ -187,7 +102,7 @@ ShallowWrapper {
                   "width": 100,
                 }
               }
-            />,
+            />
             <Text
               accessible={true}
               allowFontScaling={true}
@@ -204,7 +119,7 @@ ShallowWrapper {
               }
             >
               Pangea
-            </Text>,
+            </Text>
             <Text
               accessible={true}
               allowFontScaling={true}
@@ -221,14 +136,158 @@ ShallowWrapper {
               }
             >
               NYC
-            </Text>,
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "marginLeft": 40,
+                "marginRight": 40,
+                "marginTop": 10,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
+                }
+              }
+            />
+          </View>
+        </View>,
+        <Button
+          enabled={true}
+          onPress={[Function]}
+          style={
+            Object {
+              "alignSelf": "stretch",
+              "backgroundColor": "#FF8B00",
+              "borderRadius": 0,
+              "bottom": 0,
+              "height": 54,
+            }
+          }
+          styleTitle={
+            Object {
+              "color": "white",
+              "fontSize": 15,
+              "fontWeight": "900",
+            }
+          }
+          title="SHARE IDENTITY KEY"
+        />,
+      ],
+      "style": Object {
+        "alignItems": "stretch",
+        "flex": 1,
+        "flexDirection": "column",
+        "justifyContent": "space-between",
+      },
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "children": Array [
+            <ScreenTitle
+              title="Profile"
+            />,
+            <View
+              style={
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "transparent",
+                  "flexDirection": "column",
+                  "justifyContent": "space-around",
+                  "marginBottom": 20,
+                }
+              }
+            >
+              <Image
+                source={1}
+                style={
+                  Object {
+                    "borderRadius": 50,
+                    "height": 100,
+                    "margin": 16,
+                    "width": 100,
+                  }
+                }
+              />
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": "#58595B",
+                    "fontFamily": "Roboto",
+                    "fontSize": 28,
+                    "fontWeight": "bold",
+                    "letterSpacing": 0,
+                    "lineHeight": 34,
+                  }
+                }
+              >
+                Pangea
+              </Text>
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": "#929497",
+                    "fontFamily": "Roboto",
+                    "fontSize": 17,
+                    "fontWeight": "normal",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  }
+                }
+              >
+                NYC
+              </Text>
+            </View>,
+            <View
+              style={
+                Object {
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />
+            </View>,
           ],
           "style": Object {
-            "alignItems": "center",
-            "backgroundColor": "transparent",
+            "alignContent": "flex-start",
+            "flex": 1,
             "flexDirection": "column",
-            "justifyContent": "space-around",
-            "marginBottom": 20,
+            "justifyContent": "flex-start",
+            "marginLeft": 8,
+            "marginRight": 8,
           },
         },
         "ref": null,
@@ -236,15 +295,9 @@ ShallowWrapper {
           Object {
             "instance": null,
             "key": undefined,
-            "nodeType": "class",
+            "nodeType": "function",
             "props": Object {
-              "source": 1,
-              "style": Object {
-                "borderRadius": 50,
-                "height": 100,
-                "margin": 16,
-                "width": 100,
-              },
+              "title": "Profile",
             },
             "ref": null,
             "rendered": null,
@@ -255,21 +308,125 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "accessible": true,
-              "allowFontScaling": true,
-              "children": "Pangea",
-              "ellipsizeMode": "tail",
+              "children": Array [
+                <Image
+                  source={1}
+                  style={
+                    Object {
+                      "borderRadius": 50,
+                      "height": 100,
+                      "margin": 16,
+                      "width": 100,
+                    }
+                  }
+                />,
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#58595B",
+                      "fontFamily": "Roboto",
+                      "fontSize": 28,
+                      "fontWeight": "bold",
+                      "letterSpacing": 0,
+                      "lineHeight": 34,
+                    }
+                  }
+                >
+                  Pangea
+                </Text>,
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#929497",
+                      "fontFamily": "Roboto",
+                      "fontSize": 17,
+                      "fontWeight": "normal",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  NYC
+                </Text>,
+              ],
               "style": Object {
-                "color": "#58595B",
-                "fontFamily": "Roboto",
-                "fontSize": 28,
-                "fontWeight": "bold",
-                "letterSpacing": 0,
-                "lineHeight": 34,
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "flexDirection": "column",
+                "justifyContent": "space-around",
+                "marginBottom": 20,
               },
             },
             "ref": null,
-            "rendered": "Pangea",
+            "rendered": Array [
+              Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "source": 1,
+                  "style": Object {
+                    "borderRadius": 50,
+                    "height": 100,
+                    "margin": 16,
+                    "width": 100,
+                  },
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+              Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "Pangea",
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": "#58595B",
+                    "fontFamily": "Roboto",
+                    "fontSize": 28,
+                    "fontWeight": "bold",
+                    "letterSpacing": 0,
+                    "lineHeight": 34,
+                  },
+                },
+                "ref": null,
+                "rendered": "Pangea",
+                "type": [Function],
+              },
+              Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": "NYC",
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": "#929497",
+                    "fontFamily": "Roboto",
+                    "fontSize": 17,
+                    "fontWeight": "normal",
+                    "letterSpacing": 0,
+                    "lineHeight": 22,
+                  },
+                },
+                "ref": null,
+                "rendered": "NYC",
+                "type": [Function],
+              },
+            ],
             "type": [Function],
           },
           Object {
@@ -277,21 +434,44 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "class",
             "props": Object {
-              "accessible": true,
-              "allowFontScaling": true,
-              "children": "NYC",
-              "ellipsizeMode": "tail",
+              "children": <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />,
               "style": Object {
-                "color": "#929497",
-                "fontFamily": "Roboto",
-                "fontSize": 17,
-                "fontWeight": "normal",
-                "letterSpacing": 0,
-                "lineHeight": 22,
+                "marginLeft": 40,
+                "marginRight": 40,
+                "marginTop": 10,
               },
             },
             "ref": null,
-            "rendered": "NYC",
+            "rendered": Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "class",
+              "props": Object {
+                "accessible": true,
+                "allowFontScaling": true,
+                "children": undefined,
+                "ellipsizeMode": "tail",
+                "style": Object {
+                  "color": undefined,
+                  "fontSize": 13,
+                  "textAlign": "center",
+                },
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
             "type": [Function],
           },
         ],
@@ -300,46 +480,27 @@ ShallowWrapper {
       Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "class",
+        "nodeType": "function",
         "props": Object {
-          "children": <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
-              Object {
-                "color": undefined,
-                "fontSize": 13,
-                "textAlign": "center",
-              }
-            }
-          />,
+          "children": undefined,
+          "enabled": true,
+          "onPress": [Function],
           "style": Object {
-            "marginLeft": 40,
-            "marginRight": 40,
-            "marginTop": 10,
+            "alignSelf": "stretch",
+            "backgroundColor": "#FF8B00",
+            "borderRadius": 0,
+            "bottom": 0,
+            "height": 54,
           },
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "accessible": true,
-            "allowFontScaling": true,
-            "children": undefined,
-            "ellipsizeMode": "tail",
-            "style": Object {
-              "color": undefined,
-              "fontSize": 13,
-              "textAlign": "center",
-            },
+          "styleTitle": Object {
+            "color": "white",
+            "fontSize": 15,
+            "fontWeight": "900",
           },
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
+          "title": "SHARE IDENTITY KEY",
         },
+        "ref": null,
+        "rendered": null,
         "type": [Function],
       },
     ],
@@ -352,117 +513,32 @@ ShallowWrapper {
       "nodeType": "class",
       "props": Object {
         "children": Array [
-          <ScreenTitle
-            title="Profile"
-          />,
           <View
             style={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "transparent",
+                "alignContent": "flex-start",
+                "flex": 1,
                 "flexDirection": "column",
-                "justifyContent": "space-around",
-                "marginBottom": 20,
+                "justifyContent": "flex-start",
+                "marginLeft": 8,
+                "marginRight": 8,
               }
             }
           >
-            <Image
-              source={1}
-              style={
-                Object {
-                  "borderRadius": 50,
-                  "height": 100,
-                  "margin": 16,
-                  "width": 100,
-                }
-              }
+            <ScreenTitle
+              title="Profile"
             />
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              style={
-                Object {
-                  "color": "#58595B",
-                  "fontFamily": "Roboto",
-                  "fontSize": 28,
-                  "fontWeight": "bold",
-                  "letterSpacing": 0,
-                  "lineHeight": 34,
-                }
-              }
-            >
-              Pangea
-            </Text>
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
+            <View
               style={
                 Object {
-                  "color": "#929497",
-                  "fontFamily": "Roboto",
-                  "fontSize": 17,
-                  "fontWeight": "normal",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
+                  "alignItems": "center",
+                  "backgroundColor": "transparent",
+                  "flexDirection": "column",
+                  "justifyContent": "space-around",
+                  "marginBottom": 20,
                 }
               }
             >
-              NYC
-            </Text>
-          </View>,
-          <View
-            style={
-              Object {
-                "marginLeft": 40,
-                "marginRight": 40,
-                "marginTop": 10,
-              }
-            }
-          >
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              style={
-                Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
-                }
-              }
-            />
-          </View>,
-        ],
-        "style": Object {
-          "alignContent": "flex-start",
-          "flex": 1,
-          "flexDirection": "column",
-          "justifyContent": "flex-start",
-          "marginLeft": 8,
-          "marginRight": 8,
-        },
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {
-            "title": "Profile",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": Array [
               <Image
                 source={1}
                 style={
@@ -473,7 +549,7 @@ ShallowWrapper {
                     "width": 100,
                   }
                 }
-              />,
+              />
               <Text
                 accessible={true}
                 allowFontScaling={true}
@@ -490,7 +566,7 @@ ShallowWrapper {
                 }
               >
                 Pangea
-              </Text>,
+              </Text>
               <Text
                 accessible={true}
                 allowFontScaling={true}
@@ -507,14 +583,158 @@ ShallowWrapper {
                 }
               >
                 NYC
-              </Text>,
+              </Text>
+            </View>
+            <View
+              style={
+                Object {
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  }
+                }
+              />
+            </View>
+          </View>,
+          <Button
+            enabled={true}
+            onPress={[Function]}
+            style={
+              Object {
+                "alignSelf": "stretch",
+                "backgroundColor": "#FF8B00",
+                "borderRadius": 0,
+                "bottom": 0,
+                "height": 54,
+              }
+            }
+            styleTitle={
+              Object {
+                "color": "white",
+                "fontSize": 15,
+                "fontWeight": "900",
+              }
+            }
+            title="SHARE IDENTITY KEY"
+          />,
+        ],
+        "style": Object {
+          "alignItems": "stretch",
+          "flex": 1,
+          "flexDirection": "column",
+          "justifyContent": "space-between",
+        },
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "children": Array [
+              <ScreenTitle
+                title="Profile"
+              />,
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "flexDirection": "column",
+                    "justifyContent": "space-around",
+                    "marginBottom": 20,
+                  }
+                }
+              >
+                <Image
+                  source={1}
+                  style={
+                    Object {
+                      "borderRadius": 50,
+                      "height": 100,
+                      "margin": 16,
+                      "width": 100,
+                    }
+                  }
+                />
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#58595B",
+                      "fontFamily": "Roboto",
+                      "fontSize": 28,
+                      "fontWeight": "bold",
+                      "letterSpacing": 0,
+                      "lineHeight": 34,
+                    }
+                  }
+                >
+                  Pangea
+                </Text>
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": "#929497",
+                      "fontFamily": "Roboto",
+                      "fontSize": 17,
+                      "fontWeight": "normal",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    }
+                  }
+                >
+                  NYC
+                </Text>
+              </View>,
+              <View
+                style={
+                  Object {
+                    "marginLeft": 40,
+                    "marginRight": 40,
+                    "marginTop": 10,
+                  }
+                }
+              >
+                <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 13,
+                      "textAlign": "center",
+                    }
+                  }
+                />
+              </View>,
             ],
             "style": Object {
-              "alignItems": "center",
-              "backgroundColor": "transparent",
+              "alignContent": "flex-start",
+              "flex": 1,
               "flexDirection": "column",
-              "justifyContent": "space-around",
-              "marginBottom": 20,
+              "justifyContent": "flex-start",
+              "marginLeft": 8,
+              "marginRight": 8,
             },
           },
           "ref": null,
@@ -522,15 +742,9 @@ ShallowWrapper {
             Object {
               "instance": null,
               "key": undefined,
-              "nodeType": "class",
+              "nodeType": "function",
               "props": Object {
-                "source": 1,
-                "style": Object {
-                  "borderRadius": 50,
-                  "height": 100,
-                  "margin": 16,
-                  "width": 100,
-                },
+                "title": "Profile",
               },
               "ref": null,
               "rendered": null,
@@ -541,21 +755,125 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
-                "children": "Pangea",
-                "ellipsizeMode": "tail",
+                "children": Array [
+                  <Image
+                    source={1}
+                    style={
+                      Object {
+                        "borderRadius": 50,
+                        "height": 100,
+                        "margin": 16,
+                        "width": 100,
+                      }
+                    }
+                  />,
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    style={
+                      Object {
+                        "color": "#58595B",
+                        "fontFamily": "Roboto",
+                        "fontSize": 28,
+                        "fontWeight": "bold",
+                        "letterSpacing": 0,
+                        "lineHeight": 34,
+                      }
+                    }
+                  >
+                    Pangea
+                  </Text>,
+                  <Text
+                    accessible={true}
+                    allowFontScaling={true}
+                    ellipsizeMode="tail"
+                    style={
+                      Object {
+                        "color": "#929497",
+                        "fontFamily": "Roboto",
+                        "fontSize": 17,
+                        "fontWeight": "normal",
+                        "letterSpacing": 0,
+                        "lineHeight": 22,
+                      }
+                    }
+                  >
+                    NYC
+                  </Text>,
+                ],
                 "style": Object {
-                  "color": "#58595B",
-                  "fontFamily": "Roboto",
-                  "fontSize": 28,
-                  "fontWeight": "bold",
-                  "letterSpacing": 0,
-                  "lineHeight": 34,
+                  "alignItems": "center",
+                  "backgroundColor": "transparent",
+                  "flexDirection": "column",
+                  "justifyContent": "space-around",
+                  "marginBottom": 20,
                 },
               },
               "ref": null,
-              "rendered": "Pangea",
+              "rendered": Array [
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "class",
+                  "props": Object {
+                    "source": 1,
+                    "style": Object {
+                      "borderRadius": 50,
+                      "height": 100,
+                      "margin": 16,
+                      "width": 100,
+                    },
+                  },
+                  "ref": null,
+                  "rendered": null,
+                  "type": [Function],
+                },
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "class",
+                  "props": Object {
+                    "accessible": true,
+                    "allowFontScaling": true,
+                    "children": "Pangea",
+                    "ellipsizeMode": "tail",
+                    "style": Object {
+                      "color": "#58595B",
+                      "fontFamily": "Roboto",
+                      "fontSize": 28,
+                      "fontWeight": "bold",
+                      "letterSpacing": 0,
+                      "lineHeight": 34,
+                    },
+                  },
+                  "ref": null,
+                  "rendered": "Pangea",
+                  "type": [Function],
+                },
+                Object {
+                  "instance": null,
+                  "key": undefined,
+                  "nodeType": "class",
+                  "props": Object {
+                    "accessible": true,
+                    "allowFontScaling": true,
+                    "children": "NYC",
+                    "ellipsizeMode": "tail",
+                    "style": Object {
+                      "color": "#929497",
+                      "fontFamily": "Roboto",
+                      "fontSize": 17,
+                      "fontWeight": "normal",
+                      "letterSpacing": 0,
+                      "lineHeight": 22,
+                    },
+                  },
+                  "ref": null,
+                  "rendered": "NYC",
+                  "type": [Function],
+                },
+              ],
               "type": [Function],
             },
             Object {
@@ -563,21 +881,44 @@ ShallowWrapper {
               "key": undefined,
               "nodeType": "class",
               "props": Object {
-                "accessible": true,
-                "allowFontScaling": true,
-                "children": "NYC",
-                "ellipsizeMode": "tail",
+                "children": <Text
+                  accessible={true}
+                  allowFontScaling={true}
+                  ellipsizeMode="tail"
+                  style={
+                    Object {
+                      "color": undefined,
+                      "fontSize": 13,
+                      "textAlign": "center",
+                    }
+                  }
+                />,
                 "style": Object {
-                  "color": "#929497",
-                  "fontFamily": "Roboto",
-                  "fontSize": 17,
-                  "fontWeight": "normal",
-                  "letterSpacing": 0,
-                  "lineHeight": 22,
+                  "marginLeft": 40,
+                  "marginRight": 40,
+                  "marginTop": 10,
                 },
               },
               "ref": null,
-              "rendered": "NYC",
+              "rendered": Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "class",
+                "props": Object {
+                  "accessible": true,
+                  "allowFontScaling": true,
+                  "children": undefined,
+                  "ellipsizeMode": "tail",
+                  "style": Object {
+                    "color": undefined,
+                    "fontSize": 13,
+                    "textAlign": "center",
+                  },
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
               "type": [Function],
             },
           ],
@@ -586,46 +927,27 @@ ShallowWrapper {
         Object {
           "instance": null,
           "key": undefined,
-          "nodeType": "class",
+          "nodeType": "function",
           "props": Object {
-            "children": <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-              style={
-                Object {
-                  "color": undefined,
-                  "fontSize": 13,
-                  "textAlign": "center",
-                }
-              }
-            />,
+            "children": undefined,
+            "enabled": true,
+            "onPress": [Function],
             "style": Object {
-              "marginLeft": 40,
-              "marginRight": 40,
-              "marginTop": 10,
+              "alignSelf": "stretch",
+              "backgroundColor": "#FF8B00",
+              "borderRadius": 0,
+              "bottom": 0,
+              "height": 54,
             },
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "accessible": true,
-              "allowFontScaling": true,
-              "children": undefined,
-              "ellipsizeMode": "tail",
-              "style": Object {
-                "color": undefined,
-                "fontSize": 13,
-                "textAlign": "center",
-              },
+            "styleTitle": Object {
+              "color": "white",
+              "fontSize": 15,
+              "fontWeight": "900",
             },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
+            "title": "SHARE IDENTITY KEY",
           },
+          "ref": null,
+          "rendered": null,
           "type": [Function],
         },
       ],