Dappkit Redesign

packages/mobile/locales/en-US/dappkit.json

@@ -1,15 +1,14 @@
 {
   "connectToWallet": "{{dappName}} would like to connect to {{appName}}",
-  "connect": "Connect",
   "cancel": "Cancel",
   "allow": "Allow",
-  "address": "Address",
+  "address": "Account No.",
   "transaction": {
     "operation": "Operation",
     "data": "Data",
     "signTX": "Sign TX",
     "details": "Show details"
   },
-  "shareInfo": "Share the following info:",
+  "shareInfo": "This application will be able to access the following information:",
   "data": "Data"
 }

packages/mobile/locales/es-419/dappkit.json

@@ -1,15 +1,14 @@
 {
   "connectToWallet": "{{dappName}} desea conectarse a {{appName}}",
-  "connect": "Conectar",
   "cancel": "Cancelar",
   "allow": "Permitir",
-  "address": "Dirección",
+  "address": "Número de Cuenta",
   "transaction": {
     "operation": "Operación",
     "data": "Datos",
     "signTX": "Boleto TX",
     "details": "Mostrar detalles"
   },
-  "shareInfo": "Comparte la siguiente información:",
+  "shareInfo": "Esta aplicación podrá acceder a la siguiente información:",
   "data": "Datos"
 }

packages/mobile/src/dappkit/DappKitAccountScreen.tsx

@@ -1,6 +1,6 @@
-import Button, { BtnTypes } from '@celo/react-components/components/Button'
+import Button, { BtnSizes, BtnTypes } from '@celo/react-components/components/Button.v2'
 import colors from '@celo/react-components/styles/colors'
-import fontStyles from '@celo/react-components/styles/fonts'
+import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { StackScreenProps } from '@react-navigation/stack'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
@@ -10,10 +10,10 @@ import { connect } from 'react-redux'
 import { e164NumberSelector } from 'src/account/selectors'
 import { approveAccountAuth } from 'src/dappkit/dappkit'
 import { Namespaces, withTranslation } from 'src/i18n'
-import DappkitExchangeIcon from 'src/icons/DappkitExchange'
 import { noHeader } from 'src/navigator/Headers.v2'
 import { navigateBack, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
+import { TopBarTextButton } from 'src/navigator/TopBarButton.v2'
 import { StackParamList } from 'src/navigator/types'
 import { RootState } from 'src/redux/reducers'
 import Logger from 'src/utils/Logger'
@@ -76,10 +76,13 @@ class DappKitAccountAuthScreen extends React.Component<Props> {
     const { dappName } = route.params.dappKitRequest
     return (
       <SafeAreaView style={styles.container}>
+        <TopBarTextButton
+          title={t('cancel')}
+          onPress={this.cancel}
+          titleStyle={{ color: colors.dark }}
+        />
+
         <ScrollView contentContainerStyle={styles.scrollContainer}>
-          <View style={styles.logo}>
-            <DappkitExchangeIcon />
-          </View>
           {!!dappName && <Text style={styles.header}>{t('connectToWallet', { dappName })}</Text>}
 
           <Text style={styles.share}>{t('shareInfo')}</Text>
@@ -88,22 +91,14 @@ class DappKitAccountAuthScreen extends React.Component<Props> {
             <Text style={styles.sectionHeaderText}>{t('address')}</Text>
             <Text style={styles.bodyText}>{account}</Text>
           </View>
-        </ScrollView>
-
-        <View style={styles.footer}>
           <Button
-            text={t('connect')}
-            onPress={this.linkBack}
-            standard={false}
+            style={styles.button}
             type={BtnTypes.PRIMARY}
+            size={BtnSizes.MEDIUM}
+            text={t('allow')}
+            onPress={this.linkBack}
           />
-          <Button
-            text={t('cancel')}
-            onPress={this.cancel}
-            standard={false}
-            type={BtnTypes.SECONDARY}
-          />
-        </View>
+        </ScrollView>
       </SafeAreaView>
     )
   }
@@ -112,49 +107,39 @@ class DappKitAccountAuthScreen extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'space-between',
   },
   scrollContainer: {
-    flex: 1,
+    flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: '15%',
   },
   header: {
     ...fontStyles.h1,
     alignItems: 'center',
-    paddingBottom: 30,
-  },
-  footer: {
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    textAlign: 'center',
-  },
-  logo: {
-    marginBottom: 20,
+    paddingBottom: 16,
   },
   share: {
-    ...fontStyles.bodySecondary,
-    fontSize: 13,
-    alignSelf: 'center',
+    ...fontStyles.regular,
+    color: colors.gray4,
+    textAlign: 'center',
   },
   sectionDivider: {
     alignItems: 'center',
     width: 200,
   },
   sectionHeaderText: {
-    ...fontStyles.bodyBold,
-    textTransform: 'uppercase',
-    fontSize: 12,
-    marginTop: 20,
-    marginBottom: 5,
+    ...fontStyles.label,
+    marginTop: 16,
   },
   bodyText: {
-    ...fontStyles.paragraph,
-    fontSize: 15,
-    color: colors.gray5,
+    ...fontStyles.regular,
+    color: colors.gray4,
     textAlign: 'center',
   },
+  button: {
+    marginTop: 24,
+  },
 })
 
 export default connect<StateProps, DispatchProps, {}, RootState>(

packages/mobile/src/dappkit/DappKitSignTxScreen.tsx

@@ -1,6 +1,6 @@
-import Button, { BtnTypes } from '@celo/react-components/components/Button'
+import Button, { BtnSizes, BtnTypes } from '@celo/react-components/components/Button.v2'
 import colors from '@celo/react-components/styles/colors'
-import fontStyles from '@celo/react-components/styles/fonts'
+import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { StackScreenProps } from '@react-navigation/stack'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
@@ -9,10 +9,10 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { connect } from 'react-redux'
 import { requestTxSignature } from 'src/dappkit/dappkit'
 import { Namespaces, withTranslation } from 'src/i18n'
-import DappkitExchangeIcon from 'src/icons/DappkitExchange'
 import { noHeader } from 'src/navigator/Headers.v2'
 import { navigate, navigateBack, navigateHome } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
+import { TopBarTextButton } from 'src/navigator/TopBarButton.v2'
 import { StackParamList } from 'src/navigator/types'
 import Logger from 'src/utils/Logger'
 
@@ -74,10 +74,13 @@ class DappKitSignTxScreen extends React.Component<Props> {
 
     return (
       <SafeAreaView style={styles.container}>
+        <TopBarTextButton
+          title={t('cancel')}
+          onPress={this.cancel}
+          titleStyle={{ color: colors.dark }}
+        />
+
         <ScrollView contentContainerStyle={styles.scrollContainer}>
-          <View style={styles.logo}>
-            <DappkitExchangeIcon />
-          </View>
           {!!dappName && <Text style={styles.header}>{t('connectToWallet', { dappName })}</Text>}
 
           <Text style={styles.share}> {t('shareInfo')} </Text>
@@ -90,22 +93,15 @@ class DappKitSignTxScreen extends React.Component<Props> {
               <Text style={[styles.bodyText, styles.underLine]}>{t('transaction.details')}</Text>
             </TouchableOpacity>
           </View>
-        </ScrollView>
 
-        <View style={styles.footer}>
           <Button
+            style={styles.button}
+            type={BtnTypes.PRIMARY}
+            size={BtnSizes.MEDIUM}
             text={t('allow')}
             onPress={this.linkBack}
-            standard={false}
-            type={BtnTypes.PRIMARY}
-          />
-          <Button
-            text={t('cancel')}
-            onPress={this.cancel}
-            standard={false}
-            type={BtnTypes.SECONDARY}
           />
-        </View>
+        </ScrollView>
       </SafeAreaView>
     )
   }
@@ -114,31 +110,22 @@ class DappKitSignTxScreen extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'space-between',
   },
   scrollContainer: {
-    flex: 1,
+    flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: '15%',
   },
   header: {
     ...fontStyles.h1,
     alignItems: 'center',
-    paddingBottom: 30,
-  },
-  footer: {
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    textAlign: 'center',
-  },
-  logo: {
-    marginBottom: 20,
+    paddingBottom: 16,
   },
   share: {
-    ...fontStyles.bodySecondary,
-    fontSize: 13,
-    alignSelf: 'center',
+    ...fontStyles.regular,
+    color: colors.gray4,
+    textAlign: 'center',
   },
   space: {
     paddingHorizontal: 5,
@@ -147,22 +134,20 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   sectionHeaderText: {
-    ...fontStyles.sectionLabel,
-    ...fontStyles.semiBold,
-    color: colors.dark,
-    textTransform: 'uppercase',
-    marginTop: 20,
-    marginBottom: 5,
+    ...fontStyles.label,
+    marginTop: 16,
   },
   bodyText: {
-    ...fontStyles.paragraph,
-    fontSize: 15,
-    color: colors.gray5,
+    ...fontStyles.regular,
+    color: colors.gray4,
     textAlign: 'center',
   },
   underLine: {
     textDecorationLine: 'underline',
   },
+  button: {
+    marginTop: 24,
+  },
 })
 
 export default connect<null, DispatchProps>(

packages/mobile/src/dappkit/DappKitTxDataScreen.tsx

@@ -1,5 +1,5 @@
 import colors from '@celo/react-components/styles/colors'
-import fontStyles from '@celo/react-components/styles/fonts'
+import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { StackScreenProps } from '@react-navigation/stack'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
@@ -41,13 +41,12 @@ const styles = StyleSheet.create({
   },
   header: {
     ...fontStyles.h1,
-    textAlign: 'center',
+    textAlign: 'left',
     paddingBottom: 15,
   },
   bodyText: {
-    ...fontStyles.paragraph,
-    fontSize: 15,
-    color: colors.gray5,
+    ...fontStyles.small,
+    color: colors.gray4,
   },
 })