Add icons to import menu

MetaMask · Nov 22, 2024 · 992abf4 · 992abf4
1 parent e8326af
commit 992abf4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 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
@@ -264,9 +267,15 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
         }}
       >
         <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/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
@@ -168,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);

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
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { Box, Text } from '../../../../component-library';
 import { SortOrder, SortingCallbacksT } from '../../util/sort';
 import {
+  AlignItems,
   BackgroundColor,
   BlockSize,
   BorderRadius,
@@ -50,6 +51,7 @@ export const SelectableListItem = ({
         width={BlockSize.Full}
         backgroundColor={BackgroundColor.backgroundDefault}
         display={Display.Flex}
+        alignItems={AlignItems.center}
       >
         {children}
       </Text>