Merge branch 'main' of github.com:MetaMask/metamask-mobile into fix-3…

…420-privacy-mode-toggle
MetaMask · Nov 8, 2024 · aee4253 · aee4253
2 parents 1edc8b4 + 1b48bbc
commit aee4253
Show file tree

Hide file tree

Showing 47 changed files with 3,926 additions and 2,349 deletions.
diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts b/app/component-library/components/Pickers/PickerAccount/PickerAccount.styles.ts
@@ -3,7 +3,6 @@ import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { Theme } from '../../../../util/theme/models';
-import { fontStyles } from '../../../../styles/common';
 
 // Internal dependencies.
 import { PickerAccountStyleSheetVars } from './PickerAccount.types';
@@ -24,34 +23,39 @@ const styleSheet = (params: {
   const { colors } = theme;
   const { style, cellAccountContainerStyle } = vars;
   return StyleSheet.create({
-    base: Object.assign({} as ViewStyle, style) as ViewStyle,
+    base: {
+      ...(style as ViewStyle),
+      flexDirection: 'row',
+      padding: 0,
+      borderWidth: 0,
+    },
     accountAvatar: {
-      marginRight: 16,
+      marginRight: 8,
     },
     accountAddressLabel: {
       color: colors.text.alternative,
+      textAlign: 'center',
     },
     cellAccount: {
-      flex: 1,
       flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
       ...cellAccountContainerStyle,
     },
     accountNameLabel: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    accountNameAvatar: {
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'flex-start',
     },
-    accountNameLabelText: {
-      marginTop: 4,
-      marginHorizontal: 5,
-      paddingHorizontal: 5,
-      ...fontStyles.bold,
-      color: colors.text.alternative,
-      borderWidth: 1,
-      borderRadius: 10,
-      borderColor: colors.border.default,
+    pickerAccountContainer: {
       justifyContent: 'center',
-      textAlign: 'center',
+      alignItems: 'center',
+    },
+    dropDownIcon: {
+      marginLeft: 8,
     },
   });
 };

diff --git a/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx b/app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx
@@ -9,6 +9,7 @@ import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
 import Text, { TextVariant } from '../../Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import { useStyles } from '../../../hooks';
+import { IconSize } from '../../Icons/Icon';
 
 // Internal dependencies.
 import PickerBase from '../PickerBase';
@@ -25,7 +26,6 @@ const PickerAccount: React.ForwardRefRenderFunction<
     accountAddress,
     accountName,
     accountAvatarType,
-    accountTypeLabel,
     showAddress = true,
     cellAccountContainerStyle = {},
     ...props
@@ -40,33 +40,46 @@ const PickerAccount: React.ForwardRefRenderFunction<
 
   const renderCellAccount = () => (
     <View style={styles.cellAccount}>
-      <Avatar
-        variant={AvatarVariant.Account}
-        type={accountAvatarType}
-        accountAddress={accountAddress}
-        size={AvatarSize.Md}
-        style={styles.accountAvatar}
-      />
       <View style={styles.accountNameLabel}>
-        <Text
-          variant={TextVariant.BodyMDMedium}
-          testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
-        >
-          {accountName}
-        </Text>
-        {showAddress && (
-          <Text variant={TextVariant.BodyMD} style={styles.accountAddressLabel}>
-            {shortenedAddress}
+        <View style={styles.accountNameAvatar}>
+          <Avatar
+            variant={AvatarVariant.Account}
+            type={accountAvatarType}
+            accountAddress={accountAddress}
+            size={AvatarSize.Xs}
+            style={styles.accountAvatar}
+          />
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
+          >
+            {accountName}
           </Text>
-        )}
+        </View>
       </View>
     </View>
   );
 
   return (
-    <PickerBase style={styles.base} {...props} ref={ref}>
-      {renderCellAccount()}
-    </PickerBase>
+    <View style={styles.pickerAccountContainer}>
+      <PickerBase
+        iconSize={IconSize.Xs}
+        style={styles.base}
+        dropdownIconStyle={styles.dropDownIcon}
+        {...props}
+        ref={ref}
+      >
+        {renderCellAccount()}
+      </PickerBase>
+      {showAddress && (
+        <Text
+          variant={TextVariant.BodySMMedium}
+          style={styles.accountAddressLabel}
+        >
+          {shortenedAddress}
+        </Text>
+      )}
+    </View>
   );
 };