feat(3448): header update

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,41 @@ 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: {
+ flexDirection: 'column',
+ 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: {
+ flexDirection: 'column',
  justifyContent: 'center',
- textAlign: 'center',
+ alignItems: 'center',
+ },
+ dropDownIcon: {
+ marginLeft: 8,
  },
  });
 };

app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx

@@ -9,14 +9,13 @@ import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
 import Text, { TextVariant } from '../../Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import { useStyles } from '../../../hooks';
-import { strings } from '../../../../../locales/i18n';
+import { IconSize } from '../../Icons/Icon';
 
 // Internal dependencies.
 import PickerBase from '../PickerBase';
 import { PickerAccountProps } from './PickerAccount.types';
 import styleSheet from './PickerAccount.styles';
 import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
-import { AccountListViewSelectorsIDs } from '../../../../../e2e/selectors/AccountListView.selectors';
 
 const PickerAccount: React.ForwardRefRenderFunction<
  TouchableOpacity,
@@ -27,7 +26,6 @@ const PickerAccount: React.ForwardRefRenderFunction<
  accountAddress,
  accountName,
  accountAvatarType,
- accountTypeLabel,
  showAddress = true,
  cellAccountContainerStyle = {},
  ...props
@@ -42,42 +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>
- {accountTypeLabel && (
+ <View style={styles.accountNameAvatar}>
+ <Avatar
+ variant={AvatarVariant.Account}
+ type={accountAvatarType}
+ accountAddress={accountAddress}
+ size={AvatarSize.Xs}
+ style={styles.accountAvatar}
+ />
  <Text
- variant={TextVariant.BodySM}
- style={styles.accountNameLabelText}
- testID={AccountListViewSelectorsIDs.ACCOUNT_TYPE_LABEL}
+ variant={TextVariant.BodyMDMedium}
+ testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
  >
- {strings(accountTypeLabel)}
- </Text>
- )}
- {showAddress && (
- <Text variant={TextVariant.BodyMD} style={styles.accountAddressLabel}>
- {shortenedAddress}
+ {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>
  );
 };