Fix typeface and maintain interface consistency (#297)

* fix: update header font to manifold CF

* fix: update account list font family

* fix: make font available in android

* fix: change android default font color to black instead of grey

* fix: apply fonts to all the usage of `Munifold CF`

* fix: change Roboto fonts to Manifold

* fix: change font to manifold of input

* fix: fix previous unfunctional font styles

android/app/src/main/res/values/styles.xml

@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:textColor">#000000</item>
     </style>
 
 </resources>

src/App.js

@@ -30,6 +30,7 @@ import { MenuProvider } from 'react-native-popup-menu';
 
 import '../ReactotronConfig';
 import colors from './colors';
+import fonts from './fonts';
 import Background from './components/Background';
 import HeaderLeftHome from './components/HeaderLeftHome';
 import SecurityHeader from './components/SecurityHeader';
@@ -83,8 +84,7 @@ const globalStackNavigationOptions = {
   },
   headerBackTitleStyle: {
     fontSize: 20,
-    fontWeight: '500',
-    fontFamily: 'Manifold CF'
+    fontFamily: fonts.semiBold
   }
 };
 

src/components/AccountCard.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 import colors from '../colors';
+import fonts from '../fonts';
 import { NETWORK_LIST } from '../constants';
 import AccountIcon from './AccountIcon';
 import TouchableItem from './TouchableItem';
@@ -136,22 +137,20 @@ const styles = StyleSheet.create({
     padding: 5
   },
   titleText: {
-    fontFamily: 'Roboto',
-    fontSize: 20
+    fontFamily: fonts.semiBold,
+    fontSize: 20,
   },
   secondaryText: {
-    fontFamily: 'Roboto',
+    fontFamily: fonts.semiBold,
     color: colors.bg_text_sec,
-    fontWeight: '500',
     fontSize: 14
   },
   footerSeedType: {
-    fontFamily: 'Roboto',
+    fontFamily: fonts.regular,
     color: colors.card_bg
   },
   footerNetwork: {
-    fontFamily: 'Roboto',
+    fontFamily: fonts.semiBold,
     color: colors.card_bg,
-    fontWeight: 'bold'
   }
 });

src/components/AccountIconChooser.js

@@ -29,6 +29,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import AccountIcon from './AccountIcon';
 import Address from './Address'
 import colors from '../colors';
+import fonts from "../fonts";
 import { brainWalletAddress, words } from '../util/native';
 
 export default class AccountIconChooser extends React.PureComponent {
@@ -77,7 +78,7 @@ export default class AccountIconChooser extends React.PureComponent {
         />
       );
     } else {
-      return <Text>Select an icon.</Text>
+      return <Text style={styles.addressSelectionText} >Select an icon.</Text>
     }
   }
  
@@ -163,6 +164,12 @@ const styles = StyleSheet.create({
     height: 50,
     padding: 5,
   },
+  addressSelectionText: {
+    fontFamily: fonts.bold,
+    color: colors.bg,
+    fontSize: 14,
+    paddingLeft: 6
+  },
   addressText: {
     paddingLeft: 6
   },

src/components/AccountSeed.js

@@ -19,6 +19,7 @@
 import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import colors from '../colors';
+import fonts from "../fonts";
 import PARITY_WORDS from '../../res/parity_wordlist.json';
 import BIP39_WORDS from '../../res/bip39_wordlist.json';;
 import TextInput from './TextInput';
@@ -171,7 +172,7 @@ const styles = StyleSheet.create({
     padding: 10
   },
   suggestionText: {
-    fontFamily: 'Roboto',
+    fontFamily: fonts.regular,
     color: colors.card_bg_text
   }
 });

src/components/Address.js

@@ -23,6 +23,7 @@ import {
 } from 'react-native';
 
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default function Address (props) {
   const {address, short = false ,style = {}} = props;
@@ -41,9 +42,8 @@ export default function Address (props) {
 
 const styles = StyleSheet.create({
   secondaryText: {
-    fontFamily: 'Roboto',
+    fontFamily: fonts.regular,
     color: colors.bg_text_sec,
-    fontWeight: '500',
     fontSize: 12
   }
 });
\ No newline at end of file

src/components/Button.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Platform, StyleSheet, Text, TouchableNativeFeedback, TouchableOpacity, View, ViewPropTypes } from 'react-native';
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default class Button extends React.PureComponent<{
   title: string,
@@ -74,10 +75,9 @@ const styles = StyleSheet.create({
     height: 60
   },
   text: {
-    fontFamily: 'Manifold CF',
+    fontFamily: fonts.bold,
     color: 'white',
     padding: 8,
-    fontWeight: 'bold',
     fontSize: 20
   },
   buttonDisabled: {

src/components/HeaderLeftHome.js

 import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default class HeaderLeftHome extends React.PureComponent {
   render() {
@@ -35,9 +36,9 @@ const styles = StyleSheet.create({
   },
   headerTextLeft: {
     flex: 1,
-    paddingLeft: 10,
+    paddingLeft: 4,
     fontSize: 25,
-    fontFamily: 'Manifold CF',
+    fontFamily: fonts.regular,
     color: colors.bg_text
   }
 });

src/components/Markdown.js

@@ -20,6 +20,7 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { default as MarkdownRender } from 'react-native-markdown-renderer';
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default class Markdown extends React.PureComponent {
   render() {
@@ -28,13 +29,13 @@ export default class Markdown extends React.PureComponent {
         style={StyleSheet.create({
           text: {
             marginTop: 10,
-            fontFamily: 'Roboto',
+            fontFamily: fonts.regular,
             fontSize: 14,
             color: colors.card_bg
           },
           listUnorderedItemIcon: {
             color: colors.card_bg,
-            fontWeight: "900",
+            fontFamily: fonts.bold,
             marginRight: 3,
             marginTop: 19
           },

src/components/NetworkButton.js

@@ -23,6 +23,7 @@ import { Text } from 'react-native';
 import React from 'react';
 import { withNavigation } from 'react-navigation';
 import colors from '../colors';
+import fonts from "../fonts";
 
 const styles = {
   card: {
@@ -31,9 +32,8 @@ const styles = {
   },
   cardText: {
     color: colors.card_text,
-    fontFamily: 'Manifold CF',
+    fontFamily: fonts.bold,
     fontSize: 20,
-    fontWeight: 'bold'
   },
   cardTwo: {
     backgroundColor: '#977CF6',

src/components/PopupMenu.js

@@ -26,11 +26,13 @@ import {
 } from 'react-native-popup-menu';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default class PopupMenu extends React.PureComponent {
     render() {
-        const { onSelect, menuTriggerIconName, menuItems } = this.props
-        const menuTriggerIcon = <Icon name={menuTriggerIconName} size={35} color={colors.bg_text_sec} />
+        const { onSelect, menuTriggerIconName, menuItems } = this.props;
+        const menuTriggerIcon = <Icon name={menuTriggerIconName} size={35} color={colors.bg_text_sec} />;
+        console.log('pop up menu items', menuItems);
         return (
             <Menu onSelect={onSelect}>
                 <MenuTrigger children={menuTriggerIcon} />
@@ -38,7 +40,7 @@ export default class PopupMenu extends React.PureComponent {
                     {
                         menuItems.map((menuItem, index) => (
                             <MenuOption key={index} value={menuItem.value} >
-                                <Text style={(menuItem.textStyle) ? menuItem.textStyle : null} >{menuItem.text}</Text>
+                                <Text style={[menuOptionsStyles.optionText, menuItem.textStyle]} >{menuItem.text}</Text>
                             </MenuOption>
                         ))
                     }
@@ -53,7 +55,7 @@ const menuOptionsStyles = {
         padding: 15,
     },
     optionText: {
-        fontFamily: 'Roboto',
+        fontFamily: fonts.regular,
         fontSize: 16
     },
 };

src/components/SecurityHeader.js

@@ -21,6 +21,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { withNavigation } from 'react-navigation';
 
 import colors from '../colors';
+import fonts from "../fonts";
 import TouchableItem from './TouchableItem';
 
 class SecurityHeader extends React.Component {
@@ -60,15 +61,14 @@ const styles = StyleSheet.create({
   headerSecureIcon: {
     marginLeft: 0,
     fontSize: 20,
-    fontWeight: 'bold',
+    fontFamily: fonts.bold,
     paddingRight: 5,
     color: colors.bg_alert
   },
   headerTextRight: {
     marginLeft: 0,
     fontSize: 17,
-    fontFamily: 'Roboto',
-    fontWeight: 'bold',
+    fontFamily: fonts.bold,
     color: colors.bg_alert,
     paddingRight: 14,
   }

src/components/TextInput.js

@@ -17,6 +17,7 @@
 import React from 'react';
 import { StyleSheet, TextInput as TextInputOrigin } from 'react-native';
 import colors from '../colors';
+import fonts from "../fonts";
 
 export default class TextInput extends React.PureComponent {
   static defaultProps = {
@@ -52,6 +53,7 @@ const styles = StyleSheet.create({
   input: {
     fontSize: 24,
     height: 60,
+    fontFamily: fonts.regular,
     justifyContent: 'center',
     alignItems: 'center',
     elevation: 4,

src/components/TxDetailsCard.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
 import colors from '../colors';
+import fonts from "../fonts";
 
 const WEI_IN_ETH = 1000000000000000000;
 
@@ -106,21 +107,18 @@ const styles = StyleSheet.create({
   },
   titleText: {
     textAlign: 'center',
-    fontFamily: 'Manifold CF',
+    fontFamily: fonts.bold,
     fontSize: 14,
-    fontWeight: '600',
     color: colors.card_bg_text
   },
   secondaryText: {
     textAlign: 'center',
     color: colors.card_bg_text,
-    fontFamily: 'Manifold CF',
-    fontWeight: '500',
+    fontFamily: fonts.semiBold,
     fontSize: 12
   },
   footerText: {
     color: colors.card_bg,
-    fontFamily: 'Manifold CF',
-    fontWeight: 'bold'
+    fontFamily: fonts.bold
   }
 });

src/fonts.js

+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default {
+  regular: 'Manifold CF',
+  semiBold: 'ManifoldCF-DemiBold',
+  bold: 'ManifoldCF-Bold',
+}