chore: PortfolioView™: Design Review Cleanup: Networks, sort, & Menu (#…

…28663) ## **Description** Improves various design review aspects pointed out by @amandaye0h [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28663?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Nov 22, 2024 · 23ec947 · 23ec947
1 parent 6eb7ccf
commit 23ec947
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 46 deletions.
diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx
@@ -6,7 +6,9 @@ import {
   Box,
   ButtonBase,
   ButtonBaseSize,
+  Icon,
   IconName,
+  IconSize,
   Popover,
   PopoverPosition,
 } from '../../../../component-library';
@@ -198,7 +200,8 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
               className="asset-list-control-bar__button"
               onClick={toggleTokenSortPopover}
               size={ButtonBaseSize.Sm}
-              endIconName={IconName.SwapVertical}
+              startIconName={IconName.Filter}
+              startIconProps={{ marginInlineEnd: 0 }}
               backgroundColor={
                 isTokenSortPopoverOpen
                   ? BackgroundColor.backgroundPressed
@@ -221,13 +224,13 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
         isOpen={isNetworkFilterPopoverOpen}
         position={PopoverPosition.BottomStart}
         referenceElement={popoverRef.current}
-        matchWidth={!isFullScreen}
+        matchWidth={false}
         style={{
           zIndex: 10,
           display: 'flex',
           flexDirection: 'column',
           padding: 0,
-          minWidth: isFullScreen ? '325px' : '',
+          minWidth: isFullScreen ? '250px' : '',
         }}
       >
         <NetworkFilter handleClose={closePopover} />
@@ -237,13 +240,13 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
         isOpen={isTokenSortPopoverOpen}
         position={PopoverPosition.BottomEnd}
         referenceElement={popoverRef.current}
-        matchWidth={!isFullScreen}
+        matchWidth={false}
         style={{
           zIndex: 10,
           display: 'flex',
           flexDirection: 'column',
           padding: 0,
-          minWidth: isFullScreen ? '325px' : '',
+          minWidth: isFullScreen ? '250px' : '',
         }}
       >
         <SortControl handleClose={closePopover} />
@@ -254,19 +257,25 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
         isOpen={isImportTokensPopoverOpen}
         position={PopoverPosition.BottomEnd}
         referenceElement={popoverRef.current}
-        matchWidth={!isFullScreen}
+        matchWidth={false}
         style={{
           zIndex: 10,
           display: 'flex',
           flexDirection: 'column',
           padding: 0,
-          minWidth: isFullScreen ? '325px' : '',
+          minWidth: isFullScreen ? '158px' : '',
         }}
       >
         <SelectableListItem onClick={handleImport} testId="importTokens">
+          <Icon name={IconName.Add} size={IconSize.Sm} marginInlineEnd={2} />
           {t('importTokensCamelCase')}
         </SelectableListItem>
         <SelectableListItem onClick={handleRefresh} testId="refreshList">
+          <Icon
+            name={IconName.Refresh}
+            size={IconSize.Sm}
+            marginInlineEnd={2}
+          />
           {t('refreshList')}
         </SelectableListItem>
       </Popover>

diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss b/ui/components/app/assets/asset-list/asset-list-control-bar/index.scss
@@ -8,12 +8,7 @@
     min-width: auto;
     border-radius: 8px;
     padding: 0 8px !important;
-    gap: 5px;
-    text-transform: lowercase;
-
-    span::first-letter {
-      text-transform: uppercase;
-    }
+    gap: 4px;
   }
 
   &__buttons {

diff --git a/ui/components/app/assets/asset-list/import-control/import-control.tsx b/ui/components/app/assets/asset-list/import-control/import-control.tsx
@@ -33,6 +33,7 @@ const AssetListControlBar = ({
       disabled={!shouldShowTokensLinks}
       size={ButtonBaseSize.Sm}
       startIconName={IconName.MoreVertical}
+      startIconProps={{ marginInlineEnd: 0 }}
       backgroundColor={BackgroundColor.backgroundDefault}
       color={TextColor.textDefault}
       onClick={onClick}

diff --git a/ui/components/app/assets/asset-list/network-filter/index.scss b/ui/components/app/assets/asset-list/network-filter/index.scss
diff --git a/ui/components/app/assets/asset-list/network-filter/network-filter.tsx b/ui/components/app/assets/asset-list/network-filter/network-filter.tsx
@@ -15,6 +15,7 @@ import { SelectableListItem } from '../sort-control/sort-control';
 import { Text } from '../../../../component-library/text/text';
 import {
   AlignItems,
+  BlockSize,
   Display,
   JustifyContent,
   TextColor,
@@ -108,6 +109,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
         <Box
           display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
+          width={BlockSize.Full}
         >
           <Box>
             <Text
@@ -121,8 +123,6 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
               color={TextColor.textAlternative}
               data-testid="network-filter-all__total"
             >
-              {/* TODO: Should query cross chain account balance */}
-
               <UserPreferencedCurrencyDisplay
                 value={selectedAccountBalanceForAllNetworks}
                 type="PRIMARY"
@@ -170,6 +170,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
           display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
           alignItems={AlignItems.center}
+          width={BlockSize.Full}
         >
           <Box>
             <Text

diff --git a/ui/components/app/assets/asset-list/sort-control/index.scss b/ui/components/app/assets/asset-list/sort-control/index.scss
@@ -4,7 +4,7 @@
 
 .selectable-list-item {
   cursor: pointer;
-  padding: 12px 16px;
+  padding: 16px;
 
   &--selected {
     background: var(--color-primary-muted);
@@ -24,4 +24,9 @@
     top: 4px;
     left: 4px;
   }
+
+  .currency-display-component__text,
+  .currency-display-component__suffix {
+    color: var(--color-text-alternative);
+  }
 }
diff --git a/ui/components/app/assets/asset-list/sort-control/sort-control.tsx b/ui/components/app/assets/asset-list/sort-control/sort-control.tsx
@@ -1,11 +1,15 @@
 import React, { ReactNode, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
-import { Box } from '../../../../component-library';
+import { Box, Text } from '../../../../component-library';
 import { SortOrder, SortingCallbacksT } from '../../util/sort';
 import {
+  AlignItems,
   BackgroundColor,
+  BlockSize,
   BorderRadius,
+  Display,
+  TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import { setTokenSortConfig } from '../../../../../store/actions';
 import { MetaMetricsContext } from '../../../../../contexts/metametrics';
@@ -36,15 +40,21 @@ export const SelectableListItem = ({
 }: SelectableListItemProps) => {
   return (
     <Box className="selectable-list-item-wrapper" data-testid={testId}>
-      <Box
+      <Text
         data-testid={`${testId}__button`}
         className={classnames('selectable-list-item', {
           'selectable-list-item--selected': Boolean(isSelected),
         })}
         onClick={onClick}
+        variant={TextVariant.bodyMd}
+        as="button"
+        width={BlockSize.Full}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
       >
         {children}
-      </Box>
+      </Text>
       {isSelected && (
         <Box
           className="selectable-list-item__selected-indicator"