add some love to the about section

ios/Podfile.lock

@@ -261,7 +261,7 @@ PODS:
     - React
   - RNDeviceInfo (4.0.1):
     - React
-  - RNFS (2.16.4):
+  - RNFS (2.16.6):
     - React
   - RNGestureHandler (1.5.6):
     - React
@@ -356,7 +356,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  trunk:
+  https://github.com/cocoapods/specs.git:
     - boost-for-react-native
     - EFQRCode
     - lottie-ios
@@ -520,7 +520,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 8539fc80a0075fcc9c8e2dff84cd22dc5bf1dacf
   RNDefaultPreference: 12d246dd2222e66dadcd76cc1250560663befc3a
   RNDeviceInfo: 12faae605ba42a1a5041c3c41a77834bc23f049d
-  RNFS: 90d1a32d3bc8f75cc7fc3dd2f67506049664346b
+  RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
   RNGestureHandler: 911d3b110a7a233a34c4f800e7188a84b75319c6
   RNHandoff: d3b0754cca3a6bcd9b25f544f733f7f033ccf5fa
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
@@ -539,4 +539,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 932f5bffd3ddea34b78c9ed0921a6f8cccf442b5
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.7.5

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bluewallet",
   "version": "5.2.1",
-  "license" : "MIT",
+  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",

screen/settings/about.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Linking, Dimensions } from 'react-native';
+import { ScrollView, Linking, Dimensions, Image, View, Text, TouchableOpacity } from 'react-native';
 import { useNavigation } from 'react-navigation-hooks';
 import {
   BlueTextCentered,
@@ -10,6 +10,7 @@ import {
   BlueCard,
   BlueText,
   BlueNavigationStyle,
+  BlueListItem,
 } from '../../BlueComponents';
 import { getApplicationName, getVersion, getBundleId, getBuildNumber } from 'react-native-device-info';
 import Rate, { AndroidMarket } from 'react-native-rate';
@@ -24,7 +25,7 @@ const About = () => {
 
   useEffect(() => {
     setIsLoading(false);
-  });
+  });  
 
   const handleOnReleaseNotesPress = () => {
     navigate('ReleaseNotes');
@@ -65,82 +66,93 @@ const About = () => {
   return isLoading ? (
     <BlueLoading />
   ) : (
-    <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+    <SafeBlueArea style={{ flex: 1 }}>
       <ScrollView testID="AboutScrollView">
         <BlueCard>
-          <BlueTextCentered h4>BlueWallet is a free and open source Bitcoin wallet. Licensed MIT.</BlueTextCentered>
-          <BlueSpacing20 />
-
-          <BlueTextCentered h4>Always backup your keys</BlueTextCentered>
-          <BlueSpacing20 />
-
-          <BlueButton
-            icon={{
-              name: 'github',
-              type: 'font-awesome',
-              color: BlueApp.settings.buttonTextColor,
-            }}
-            onPress={handleOnGithubPress}
-            title="github.com/BlueWallet/BlueWallet"
-          />
-          <BlueSpacing20 />
-
-          <BlueButton
-            icon={{
-              name: 'twitter',
-              type: 'font-awesome',
-              color: BlueApp.settings.buttonTextColor,
-            }}
-            onPress={handleOnTwitterPress}
-            title="Follow us on Twitter"
-          />
-          <BlueSpacing20 />
-
-          <BlueButton
-            icon={{
-              name: 'telegram',
-              type: 'font-awesome',
-              color: BlueApp.settings.buttonTextColor,
-            }}
-            onPress={handleOnTelegramPress}
-            title="Join Telegram chat"
-          />
-          <BlueSpacing20 />
-
-          <BlueButton
-            icon={{
-              name: 'thumbs-up',
-              type: 'font-awesome',
-              color: BlueApp.settings.buttonTextColor,
-            }}
+          <View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 54 }}>
+            <Image
+              source={require('../../img/bluebeast.png')}
+              style={{
+                width: 102,
+                height: 124,
+              }}
+            />
+            <Text style={{ maxWidth: 260, marginVertical: 24, color: "#9AA0AA", fontSize: 15, textAlign: 'center', fontWeight: '500' }}>Blue Wallet is a free and open source project. Crafted by Bitcoin users.</Text>
+            <Text style={{ maxWidth: 260, marginBottom: 40, color: "#0C2550", fontSize: 15, textAlign: 'center', fontWeight: '500' }}>Always backup your keys!</Text>
+            <BlueButton
             onPress={handleOnRatePress}
-            title="Rate BlueWallet"
+            title="help with a review ⭐🙏"
           />
-
-          <BlueSpacing20 />
-          <BlueText h3>Built with awesome:</BlueText>
-          <BlueSpacing20 />
-          <BlueText h4>* React Native</BlueText>
-          <BlueText h4>* bitcoinjs-lib</BlueText>
-          <BlueText h4>* Nodejs</BlueText>
-          <BlueText h4>* Electrum server</BlueText>
-          <BlueSpacing20 />
-          <BlueSpacing20 />
-
-          <BlueButton onPress={handleOnReleaseNotesPress} title="Release notes" />
-          <BlueSpacing20 />
-
-          <BlueButton onPress={handleOnSelfTestPress} title="Run self test" testID="RunSelfTestButton" />
-          <BlueTextCentered />
-          <BlueTextCentered>
-            {getApplicationName()} ver {getVersion()} (build {getBuildNumber()})
-          </BlueTextCentered>
-          <BlueTextCentered>{new Date(getBuildNumber() * 1000).toGMTString()}</BlueTextCentered>
-          <BlueTextCentered>{getBundleId()}</BlueTextCentered>
-          <BlueTextCentered>
-            w, h = {width}, {height}
-          </BlueTextCentered>
+          </View>
         </BlueCard>
+        <BlueListItem
+          leftIcon={{
+            name: 'twitter',
+            type: 'font-awesome',
+            color: "#1da1f2",
+          }}
+          onPress={handleOnTwitterPress}
+          title="Follow us on Twitter"
+        />
+        <BlueListItem
+          leftIcon={{
+            name: 'telegram',
+            type: 'font-awesome',
+            color: "#0088cc",
+          }}
+          onPress={handleOnTelegramPress}
+          title="Telegram chat"
+        />
+        <BlueListItem
+          leftIcon={{
+            name: 'github',
+            type: 'font-awesome',
+            color: "black",
+          }}
+          onPress={handleOnGithubPress}
+          title="GitHub"
+        />
+        <BlueCard>
+          <View style={{ backgroundColor: '#f9f9f9', padding: 16, paddingTop: 0, borderRadius: 8 }}>
+          <BlueSpacing20 />
+
+          <BlueTextCentered>Built with the awesome 👍</BlueTextCentered>
+          <BlueSpacing20 />
+          <BlueTextCentered>React Native</BlueTextCentered>
+          <BlueTextCentered>bitcoinjs-lib</BlueTextCentered>
+          <BlueTextCentered>Nodejs</BlueTextCentered>
+          <BlueTextCentered>Electrum server</BlueTextCentered>
+          </View>
+        </BlueCard>
+        <BlueListItem
+          leftIcon={{
+            name: 'book',
+            type: 'font-awesome',
+            color: "#9AA0AA",
+          }}
+          onPress={handleOnReleaseNotesPress}
+          title="Release notes"
+        />
+         <BlueListItem
+          leftIcon={{
+            name: 'flask',
+            type: 'font-awesome',
+            color: "#FC0D44",
+          }}
+          onPress={handleOnSelfTestPress}
+          title="Run self test"
+          testID="RunSelfTestButton"
+        />
+        <BlueSpacing20 />
+        <BlueSpacing20 />
+        <BlueTextCentered>
+          {getApplicationName()} ver {getVersion()} (build {getBuildNumber()})
+        </BlueTextCentered>
+        <BlueTextCentered>{new Date(getBuildNumber() * 1000).toGMTString()}</BlueTextCentered>
+        <BlueTextCentered>{getBundleId()}</BlueTextCentered>
+        <BlueTextCentered>
+          w, h = {width}, {height}
+        </BlueTextCentered>
       </ScrollView>
     </SafeBlueArea>
   );