feature(settings): wallet settings revamp

Emurgo · Sep 11, 2023 · b5e9e7c · b5e9e7c
1 parent 12c2eda
commit b5e9e7c
Show file tree

Hide file tree

Showing 20 changed files with 894 additions and 530 deletions.
diff --git a/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx b/apps/wallet-mobile/src/components/Icon/Icon.stories.tsx
@@ -222,6 +222,10 @@ storiesOf('Icon', module).add('Gallery', () => {
         <Item icon={<Icon.MuesliSwap />} title="MuesliSwap" />
 
         <Item icon={<Icon.WingRiders />} title="WingRiders" />
+
+        <Item icon={<Icon.Logout />} title="Logout" />
+
+        <Item icon={<Icon.Resync />} title="Resync" />
       </ScrollView>
     </FilterProvider>
   )

diff --git a/apps/wallet-mobile/src/components/Icon/Logout.tsx b/apps/wallet-mobile/src/components/Icon/Logout.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Logout = ({size = 36, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 4a1 1 0 00-1 1v14a1 1 0 001 1h4a1 1 0 110 2H5a3 3 0 01-3-3V5a3 3 0 013-3h4a1 1 0 010 2H5z"
+      fill={color}
+    />
+
+    <Path
+      d="M15.293 6.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L18.586 13H9a1 1 0 110-2h9.586l-3.293-3.293a1 1 0 010-1.414z"
+      fill={color}
+    />
+  </Svg>
+)
diff --git a/apps/wallet-mobile/src/components/Icon/Resync.tsx b/apps/wallet-mobile/src/components/Icon/Resync.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, {Path} from 'react-native-svg'
+
+type Props = {
+  size?: number
+  color?: string
+}
+
+export const Resync = ({size = 36, color = 'black'}: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M21 3a1 1 0 10-2 0v3.194l-.997-.898L18 5.294a8.997 8.997 0 00-15 6.705 1 1 0 102 .002 7.013 7.013 0 014.145-6.392 6.993 6.993 0 017.52 1.174l.001.001L18.016 8H14a1 1 0 100 2h6a1 1 0 001-1V3zM3 15a1 1 0 011-1h6a1 1 0 110 2H5.984l1.35 1.216A6.997 6.997 0 0019 12a1 1 0 112 .002 9.013 9.013 0 01-5.33 8.216A8.993 8.993 0 016 18.706l-.003-.002L5 17.805V21a1 1 0 11-2 0v-6z"
+      fill={color}
+    />
+  </Svg>
+)
diff --git a/apps/wallet-mobile/src/components/Icon/WalletStack.tsx b/apps/wallet-mobile/src/components/Icon/WalletStack.tsx
@@ -8,9 +8,9 @@ type Props = {
 
 export const WalletStack = ({size = 36, color = 'black'}: Props) => (
   <Svg width={size} height={size} viewBox="-2 -2 28 28">
-    <Path d="M8 2C6.89543 2 6 2.89543 6 4H18C18 2.89543 17.1046 2 16 2H8Z" fill="black" />
+    <Path d="M8 2C6.89543 2 6 2.89543 6 4H18C18 2.89543 17.1046 2 16 2H8Z" fill={color} />
 
-    <Path d="M4 7C4 5.89543 4.89543 5 6 5H18C19.1046 5 20 5.89543 20 7H4Z" fill="black" />
+    <Path d="M4 7C4 5.89543 4.89543 5 6 5H18C19.1046 5 20 5.89543 20 7H4Z" fill={color} />
 
     <Path
       fillRule="evenodd"

diff --git a/apps/wallet-mobile/src/components/Icon/index.ts b/apps/wallet-mobile/src/components/Icon/index.ts
@@ -41,6 +41,7 @@ import {Launchpad} from './Launchpad'
 import {Lightning} from './Lightning'
 import {Link} from './Link'
 import {Lock} from './Lock'
+import {Logout} from './Logout'
 import {Magnify} from './Magnify'
 import {Megaphone} from './Megaphone'
 import {Menu} from './Menu'
@@ -60,6 +61,7 @@ import {Qr} from './Qr'
 import {QuestionMark} from './QuestionMark'
 import {Received} from './Received'
 import {Refresh} from './Refresh'
+import {Resync} from './Resync'
 import {RewardManuallyPayout} from './RewardManuallyPayout'
 import {RewardWithdrawn} from './RewardWithdrawn'
 import {Sandbox} from './Sandbox'
@@ -140,6 +142,7 @@ export const Icon = {
   Lightning,
   Link,
   Lock,
+  Logout,
   Magnify,
   Megaphone,
   Menu,
@@ -155,6 +158,7 @@ export const Icon = {
   Qr,
   QuestionMark,
   Received,
+  Resync,
   RewardManuallyPayout,
   RewardWithdrawn,
   Sandbox,

diff --git a/apps/wallet-mobile/src/features/Settings/ChangePassword/ChangePasswordScreen.tsx b/apps/wallet-mobile/src/features/Settings/ChangePassword/ChangePasswordScreen.tsx
@@ -95,6 +95,7 @@ export const ChangePasswordScreen = () => {
           onPress={() => changePassword({currentPassword, newPassword})}
           disabled={hasErrors}
           title={strings.continueButton}
+          shelleyTheme
         />
       </Actions>
     </SafeAreaView>

diff --git a/apps/wallet-mobile/src/features/Settings/ChangeWalletName/ChangeWalletName.tsx b/apps/wallet-mobile/src/features/Settings/ChangeWalletName/ChangeWalletName.tsx
@@ -63,6 +63,7 @@ export const ChangeWalletName = () => {
           }}
           title={strings.changeButton}
           disabled={hasErrors || isLoading}
+          shelleyTheme
         />
       </View>
     </SafeAreaView>

diff --git a/apps/wallet-mobile/src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx b/apps/wallet-mobile/src/features/Settings/RemoveWallet/RemoveWalletScreen.tsx
@@ -32,6 +32,8 @@ export const RemoveWalletScreen = () => {
         <Description>
           {!wallet.isHW && <Text style={styles.description}>{strings.descriptionParagraph1}</Text>}
 
+          <Spacer height={24} />
+
           <Text style={styles.description}>{strings.descriptionParagraph2}</Text>
         </Description>
 
@@ -40,14 +42,13 @@ export const RemoveWalletScreen = () => {
         <WalletInfo>
           <Text style={styles.walletNameLabel}>{strings.walletName}</Text>
 
-          <Spacer height={8} />
+          <Spacer height={10} />
 
           <Text style={styles.walletName}>{walletName}</Text>
 
           <Spacer height={24} />
 
           <WalletNameInput
-            label={strings.walletNameInput}
             value={typedWalletName}
             onChangeText={setTypedWalletName}
             right={typedWalletName === walletName ? <Checkmark /> : undefined}
@@ -65,9 +66,17 @@ export const RemoveWalletScreen = () => {
           />
         )}
 
-        <Spacer height={16} />
+        <Spacer height={30} />
 
-        <Button onPress={() => removeWallet()} title={strings.remove} style={styles.removeButton} disabled={disabled} />
+        <View style={{paddingHorizontal: 16, paddingBottom: 36}}>
+          <Button
+            onPress={() => removeWallet()}
+            title={strings.remove}
+            style={styles.removeButton}
+            disabled={disabled}
+            block
+          />
+        </View>
       </Actions>
     </SafeAreaView>
   )
@@ -89,8 +98,7 @@ const Actions = (props) => {
 const messages = defineMessages({
   descriptionParagraph1: {
     id: 'components.settings.removewalletscreen.descriptionParagraph1',
-    defaultMessage:
-      '!!!If you really wish to permanently delete the wallet make sure you have written down the mnemonic.',
+    defaultMessage: '!!!If you wish to permanently delete the wallet make sure you have written down the mnemonic.',
   },
   descriptionParagraph2: {
     id: 'components.settings.removewalletscreen.descriptionParagraph2',
@@ -145,14 +153,14 @@ const styles = StyleSheet.create({
   description: {
     fontSize: 16,
     lineHeight: 24,
-    textAlign: 'center',
   },
 
   walletNameLabel: {
     fontSize: 16,
+    fontFamily: 'Rubik',
+    fontWeight: '500',
   },
   walletName: {
-    color: COLORS.DISABLED,
     fontSize: 16,
   },
 

diff --git a/apps/wallet-mobile/src/features/Settings/SettingsItems.tsx b/apps/wallet-mobile/src/features/Settings/SettingsItems.tsx
@@ -14,18 +14,15 @@ type SettingsSectionProps = {
 }
 
 export const SettingsSection = ({title, children}: SettingsSectionProps) => (
-  <View style={styles.section}>
+  <View>
     {title != null && (
       <>
-        <Text
-          style={[
-            styles.sectionTitle,
-            {fontFamily: 'Rubik-Regular', color: lightPalette.gray['600'], fontSize: 14, lineHeight: 22},
-          ]}
-        >
+        <Text style={{fontFamily: 'Rubik-Regular', color: lightPalette.gray['600'], fontSize: 14, lineHeight: 22}}>
           {title}
         </Text>
 
+        <Spacer height={5} />
+
         <Hr />
       </>
     )}
@@ -119,6 +116,17 @@ export const NavigatedSettingsItem = ({label, onNavigate, icon, disabled, select
   )
 }
 
+type SettingsBuildItemProps = {
+  label: string
+  value: string
+}
+
+export const SettingsBuildItem = ({label, value}: SettingsBuildItemProps) => (
+  <SettingsItem label={label}>
+    <Text secondary>{value}</Text>
+  </SettingsItem>
+)
+
 const styles = StyleSheet.create({
   itemInner: {
     paddingVertical: 16,
@@ -131,12 +139,6 @@ const styles = StyleSheet.create({
   label: {
     flex: 1,
   },
-  section: {
-    paddingHorizontal: 16,
-  },
-  sectionTitle: {
-    paddingBottom: 5,
-  },
   disabled: {
     color: COLORS.DISABLED,
   },

diff --git a/apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx b/apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx
@@ -31,6 +31,7 @@ export const SettingsScreenNavigator = () => {
     <Stack.Navigator
       screenOptions={{
         ...defaultStackNavigationOptions,
+        cardStyle: {backgroundColor: 'white'},
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >
@@ -138,11 +139,15 @@ const SettingsTabNavigator = () => {
         tabBarStyle: {backgroundColor: COLORS.WHITE, elevation: 0, shadowOpacity: 0},
         tabBarIndicatorStyle: {backgroundColor: COLORS.SHELLEY_BLUE, height: 2},
         tabBarLabelStyle: {
-          fontWeight: 'bold',
+          textTransform: 'none',
+          fontFamily: 'Rubik',
+          fontSize: 16,
+          fontWeight: '500',
         },
         tabBarActiveTintColor: COLORS.SHELLEY_BLUE,
         tabBarInactiveTintColor: COLORS.NOT_SELECTED_TAB_TEXT,
       })}
+      style={{marginHorizontal: 16}}
     >
       <Tab.Screen name="wallet-settings" component={WalletSettingsScreen} />