(Fix) Font familiy and weight (#384)

* Set fontWeight default to 500 (normal) * Set Section.Text default size to 16 * Group Paddings * Remove already set default values * Simplified canContinue method with defaultProps * Update ClaimButton text styles * Remove unnecessary spaces * Update `BackupWallet` - default fontSize, set fontWeight to 700 * Update CustomButton text component/styles * Update IconButton text styles * Fix lineHeight calculation - added a factor for default values - properly set the lineHeight (using normalize) * Update SaveButton text styles * Update ScanQRButton text * Update CustomDialog `Text` component and styles * Update `EventDialog` Text props/styles * Update `SectionTitle` Text props/styles * Update `BigNumber` Text props/styles * Update `KeyboardKey` Text props/styles * Update `SummaryTable` Text props/styles * Set `Text`'s fontWeight to `normal` - Also set default value for linespacing calculation function - Created a method to support descriptive fontWeight (regular, medium, bold) * Update About layout according to V6 Wireframes * Update Text default values and fontWeight conversion values * Set SectionText as a mere wrapper for Text component * Update `About` according to wireframes * Update BackupWallet * Update ClaimButton * Update SaveButton - change background color to what's stated in wireframes - updated Text props according to wireframes * Update ScanQRButton * Update dialogs * Update Auth * Update `common/view` components * Update FR components * Update `common/` components * Update `dashboard/FeedItems` components * Update Claim component * Update `Confirmation` component * Update `Dashboard` component * Update `FeedActions` component * Update `CustomButton` text color implementatio * Update Receive/Send * Fix Text fontWeight validation * Update SideMenu * Update `signin` * Update `signup` * Update Splash * Final review * Update profile * Update snapshots * Fix text color in `ListEventItem` * Fix FeedItems * update snapshots * Fix buttons fonts weight * Remove extra space from FRError * Fix PushButtonProps type * Tweak to prevent scrollbar
GoodDollar · Aug 18, 2019 · 4af2b2d · 4af2b2d
1 parent 9f43274
commit 4af2b2d
Show file tree

Hide file tree

Showing 92 changed files with 924 additions and 1,345 deletions.
diff --git a/src/components/about/About.js b/src/components/about/About.js
@@ -6,6 +6,7 @@ import wavePattern from '../../assets/wave.svg'
 import Wrapper from '../common/layout/Wrapper'
 import Section from '../common/layout/Section'
 import Config from '../../config/config'
+import normalize from '../../lib/utils/normalizeText'
 
 //minimize delay <Image> has over web <img>
 Image.prefetch(splashImage)
@@ -26,7 +27,7 @@ const About = () => (
         </Section.Text>
         <Section.Text fontSize={18} color="surface" style={styles.aboutDescription}>
           GoodDollar is a payment system with a built-in small basic income based on blockchain technology.
-          <Section.Text fontSize={18} fontWeight="700" color="surface">
+          <Section.Text fontSize={18} fontWeight="bold" color="surface">
             {`\nLet's change the world, for good.`}
           </Section.Text>
         </Section.Text>
@@ -55,7 +56,8 @@ const styles = StyleSheet.create({
   },
   content: {
     transform: [{ rotateY: '180deg' }],
-    marginVertical: '10vh',
+    marginTop: '5vh',
+    marginBottom: '8vh',
   },
   logo: {
     maxWidth: '100%',
@@ -68,7 +70,7 @@ const styles = StyleSheet.create({
     minWidth: 212,
   },
   aboutDescription: {
-    maxWidth: 270,
+    maxWidth: normalize(270),
   },
 })
 

diff --git a/src/components/about/__tests__/__snapshots__/About.js.snap b/src/components/about/__tests__/__snapshots__/About.js.snap
@@ -100,8 +100,8 @@ exports[`About matches snapshot 1`] = `
             "flexDirection": "column",
             "flexGrow": 1,
             "justifyContent": "space-between",
-            "marginBottom": "10vh",
-            "marginTop": "10vh",
+            "marginBottom": "8vh",
+            "marginTop": "5vh",
             "msFlexAlign": "stretch",
             "msFlexDirection": "column",
             "msFlexPack": "justify",

diff --git a/src/components/appNavigation/PushButton.js b/src/components/appNavigation/PushButton.js
@@ -14,31 +14,22 @@ type PushButtonProps = {
 /**
  * PushButton
  * This button gets the push action from screenProps. Is meant to be used inside a stackNavigator
- * @param routeName
- * @param screenProps
- * @param params
+ * @param {PushButtonProps} args
+ * @param {string} args.routeName
+ * @param {object} args.screenProps
+ * @param {Function|undefined} args.canContinue
+ * @param {object} args.params
  * @param {ButtonProps} props
  */
-export const PushButton = ({ routeName, screenProps, canContinue, params, ...props }: PushButtonProps) => {
-  const shouldContinue = async () => {
-    if (canContinue === undefined) {
-      return true
-    }
-
-    const result = await canContinue()
-    return result
-  }
-
-  return (
-    <CustomButton
-      onPress={async () => screenProps && (await shouldContinue()) && screenProps.push(routeName, params)}
-      {...props}
-    />
-  )
-}
+export const PushButton = ({ routeName, screenProps, canContinue, params, ...props }: PushButtonProps) => (
+  <CustomButton
+    onPress={async () => screenProps && (await canContinue()) && screenProps.push(routeName, params)}
+    {...props}
+  />
+)
 
 PushButton.defaultProps = {
   mode: 'contained',
   dark: true,
-  canContinue: () => true,
+  canContinue: () => Promise.resolve(true),
 }
diff --git a/src/components/appNavigation/__tests__/__snapshots__/AppNavigation.js.snap b/src/components/appNavigation/__tests__/__snapshots__/AppNavigation.js.snap
@@ -582,7 +582,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                 "fontFamily": "Roboto Slab",
                 "fontSize": "18px",
                 "fontWeight": "normal",
-                "lineHeight": "20px",
+                "lineHeight": "24px",
                 "textAlign": "center",
                 "textDecoration": "none",
                 "textTransform": "none",
@@ -640,7 +640,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                     "fontFamily": "Roboto Slab",
                     "fontSize": "42px",
                     "fontWeight": "600",
-                    "lineHeight": "22px",
+                    "lineHeight": "30px",
                     "marginRight": "2px",
                     "textAlign": "right",
                     "textDecoration": "none",
@@ -660,7 +660,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                     "fontFamily": "Roboto Slab",
                     "fontSize": "18px",
                     "fontWeight": "700",
-                    "lineHeight": "22px",
+                    "lineHeight": "24px",
                     "textAlign": "right",
                     "textDecoration": "none",
                     "textTransform": "none",
@@ -678,7 +678,7 @@ exports[`AppNavigation matches snapshot 1`] = `
                   "fontFamily": "Roboto Slab",
                   "fontSize": "18px",
                   "fontWeight": "700",
-                  "lineHeight": "20px",
+                  "lineHeight": "24px",
                   "marginRight": "-20px",
                   "textAlign": "center",
                   "textDecoration": "none",
@@ -858,17 +858,13 @@ exports[`AppNavigation matches snapshot 1`] = `
                         "fontWeight": "500",
                         "justifyContent": "center",
                         "letterSpacing": "0px",
-                        "marginBottom": "0px",
-                        "marginLeft": "0px",
+                        "lineHeight": "22px",
                         "marginRight": "16px",
-                        "marginTop": "0px",
                         "msFlexAlign": "center",
                         "msFlexPack": "center",
-                        "paddingBottom": "0px",
-                        "paddingLeft": "0px",
-                        "paddingRight": "0px",
                         "paddingTop": "1px",
-                        "textAlign": "left",
+                        "textAlign": "center",
+                        "textDecoration": "none",
                         "textTransform": "uppercase",
                       }
                     }
@@ -1001,13 +997,13 @@ exports[`AppNavigation matches snapshot 1`] = `
                     style={
                       Object {
                         "color": "rgba(255,255,255,1.00)",
+                        "direction": "ltr",
                         "fontFamily": "Roboto",
                         "fontSize": "16px",
                         "fontWeight": "500",
-                        "marginBottom": "0px",
-                        "marginLeft": "0px",
-                        "marginRight": "0px",
-                        "marginTop": "0px",
+                        "lineHeight": "22px",
+                        "textAlign": "center",
+                        "textDecoration": "none",
                         "textTransform": "uppercase",
                       }
                     }
@@ -1147,17 +1143,13 @@ exports[`AppNavigation matches snapshot 1`] = `
                         "fontWeight": "500",
                         "justifyContent": "center",
                         "letterSpacing": "0px",
-                        "marginBottom": "0px",
+                        "lineHeight": "22px",
                         "marginLeft": "16px",
-                        "marginRight": "0px",
-                        "marginTop": "0px",
                         "msFlexAlign": "center",
                         "msFlexPack": "center",
-                        "paddingBottom": "0px",
-                        "paddingLeft": "0px",
-                        "paddingRight": "0px",
                         "paddingTop": "1px",
-                        "textAlign": "left",
+                        "textAlign": "center",
+                        "textDecoration": "none",
                         "textTransform": "uppercase",
                       }
                     }

diff --git a/src/components/appNavigation/__tests__/__snapshots__/stackNavigation.js.snap b/src/components/appNavigation/__tests__/__snapshots__/stackNavigation.js.snap
@@ -139,17 +139,12 @@ exports[`NextButton matches snapshot 1`] = `
                 "fontWeight": "500",
                 "justifyContent": "center",
                 "letterSpacing": "0px",
-                "marginBottom": "0px",
-                "marginLeft": "0px",
-                "marginRight": "0px",
-                "marginTop": "0px",
+                "lineHeight": "22px",
                 "msFlexAlign": "center",
                 "msFlexPack": "center",
-                "paddingBottom": "0px",
-                "paddingLeft": "0px",
-                "paddingRight": "0px",
                 "paddingTop": "1px",
-                "textAlign": "left",
+                "textAlign": "center",
+                "textDecoration": "none",
                 "textTransform": "uppercase",
               }
             }
@@ -299,17 +294,12 @@ exports[`PushButton matches snapshot 1`] = `
                 "fontWeight": "500",
                 "justifyContent": "center",
                 "letterSpacing": "0px",
-                "marginBottom": "0px",
-                "marginLeft": "0px",
-                "marginRight": "0px",
-                "marginTop": "0px",
+                "lineHeight": "22px",
                 "msFlexAlign": "center",
                 "msFlexPack": "center",
-                "paddingBottom": "0px",
-                "paddingLeft": "0px",
-                "paddingRight": "0px",
                 "paddingTop": "1px",
-                "textAlign": "left",
+                "textAlign": "center",
+                "textDecoration": "none",
                 "textTransform": "uppercase",
               }
             }

diff --git a/src/components/auth/Auth.js b/src/components/auth/Auth.js
@@ -54,13 +54,13 @@ class Auth extends React.Component<Props> {
       <Wrapper backgroundColor="#fff" style={styles.mainWrapper}>
         <Section justifyContent="space-between" style={styles.mainSection} alignItems="center">
           <Section.Row alignItems="center" justifyContent="center" style={styles.topRow}>
-            <Section.Text color="surface" fontFamily="slab" fontSize={22} fontWeight={700}>
+            <Section.Text color="surface" fontFamily="slab" fontSize={22} fontWeight="bold">
               {`Alpha tokens are\nfor test use only!`}
             </Section.Text>
           </Section.Row>
           <Section.Separator color="#fff" width={2} style={styles.separator} />
           <Section.Row alignItems="center" justifyContent="center">
-            <Section.Text color="surface" fontWeight="500" fontSize={16}>
+            <Section.Text color="surface" fontWeight="medium">
               {`They have no real value and will be deleted at the end of the Alpha`}
             </Section.Text>
           </Section.Row>
@@ -72,7 +72,7 @@ class Auth extends React.Component<Props> {
             <Text
               fontSize={12}
               color="gray80Percent"
-              fontWeight="700"
+              fontWeight="bold"
               textDecorationLine="underline"
               onPress={this.handleNavigateTermsOfUse}
             >
@@ -82,7 +82,7 @@ class Auth extends React.Component<Props> {
             <Text
               fontSize={12}
               color="gray80Percent"
-              fontWeight="700"
+              fontWeight="bold"
               textDecorationLine="underline"
               onPress={this.handleNavigatePrivacyPolicy}
             >
@@ -92,15 +92,9 @@ class Auth extends React.Component<Props> {
           <CustomButton style={styles.buttonLayout} onPress={this.handleSignUp}>
             Create a wallet
           </CustomButton>
-          <Text fontWeight="500" fontSize={14} color="primary" onPress={this.handleSignIn}>
+          <Text fontSize={14} color="primary" onPress={this.handleSignIn}>
             {`Already have a wallet? `}
-            <Text
-              fontWeight="500"
-              fontSize={14}
-              color="primary"
-              textDecorationLine="underline"
-              onPress={this.handleSignIn}
-            >
+            <Text fontSize={14} color="primary" textDecorationLine="underline" onPress={this.handleSignIn}>
               Login
             </Text>
           </Text>

diff --git a/src/components/backupWallet/BackupWallet.js b/src/components/backupWallet/BackupWallet.js
@@ -40,7 +40,7 @@ const BackupWallet = ({ screenProps, styles, theme }: BackupWalletProps) => {
 
   return (
     <Section grow={5} style={styles.wrapper}>
-      <Section.Text grow fontWeight="700" fontSize={16} style={styles.instructions}>
+      <Section.Text grow fontWeight="bold" fontSize={16} style={styles.instructions}>
         {'please save your 12-word pass phrase\n' +
           'and keep it in a secure location\n' +
           'so you can recover your wallet anytime'}
@@ -78,6 +78,7 @@ const backupWalletStyles = ({ theme }) => ({
     marginBottom: theme.paddings.defaultMargin,
   },
   resendButton: {
+    color: theme.colors.primary,
     fontWeight: 'normal',
     fontSize: normalize(15),
   },

diff --git a/src/components/common/buttons/ClaimButton.js b/src/components/common/buttons/ClaimButton.js
@@ -1,33 +1,22 @@
 // @flow
 import React from 'react'
-import { Text } from 'react-native'
-import normalize from '../../../lib/utils/normalizeText'
 import { PushButton } from '../../appNavigation/PushButton'
 import { withStyles } from '../../../lib/styles'
+import Text from '../view/Text'
 
-const ClaimButton = props => {
-  const { screenProps, styles } = props
-
-  return (
-    <PushButton routeName={'Claim'} screenProps={screenProps} style={[styles.claimButton]}>
-      <Text style={styles.buttonText}>Claim</Text>
-    </PushButton>
-  )
-}
+const ClaimButton = ({ screenProps, styles }) => (
+  <PushButton routeName="Claim" screenProps={screenProps} style={styles.claimButton}>
+    <Text color="surface" textTransform="uppercase" fontWeight="medium">
+      Claim
+    </Text>
+  </PushButton>
+)
 
 const getStylesFromProps = ({ theme }) => ({
-  buttonText: {
-    color: '#fff',
-    fontFamily: theme.fonts.default,
-    fontSize: normalize(16),
-    fontWeight: '500',
-    margin: 0,
-    textTransform: 'uppercase',
-  },
   claimButton: {
     alignItems: 'center',
     backgroundColor: theme.colors.green,
-    borderColor: '#fff',
+    borderColor: theme.colors.surface,
     borderRadius: '50%',
     borderWidth: 3,
     height: 72,