updated background color for picker network (#16466)

* updated background color for picker network

* updated color for pressed state

* fixed linting error

* updated snapshots

* removed borderstyle

* update color

* updated snapshot

* added truncate to the text

* updated snapshot

ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap

@@ -3,7 +3,7 @@
 exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
 <div>
   <button
-    class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-inline-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
     data-testid="picker-network"
   >
     <div
@@ -12,7 +12,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
       I
     </div>
     <p
-      class="box text text--body-sm text--color-text-default box--flex-direction-row"
+      class="box text text--body-sm text--ellipsis text--color-text-default box--flex-direction-row"
     >
       Imported
     </p>

ui/components/component-library/picker-network/picker-network.js

@@ -26,15 +26,13 @@ export const PickerNetwork = ({
     <Box
       className={classnames('mm-picker-network', className)}
       as="button"
-      backgroundColor={COLORS.BACKGROUND_DEFAULT}
-      borderColor={COLORS.BORDER_DEFAULT}
-      borderWidth={1}
+      backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
       alignItems={ALIGN_ITEMS.CENTER}
       paddingLeft={2}
       paddingRight={4}
       gap={2}
       borderRadius={BORDER_RADIUS.PILL}
-      display={DISPLAY.INLINE_FLEX}
+      display={DISPLAY.FLEX}
       {...props}
     >
       <AvatarNetwork
@@ -44,7 +42,9 @@ export const PickerNetwork = ({
         size={SIZES.XS}
         {...avatarNetworkProps}
       />
-      <Text variant={TEXT.BODY_SM}>{label}</Text>
+      <Text ellipsis variant={TEXT.BODY_SM}>
+        {label}
+      </Text>
       <Icon
         className="mm-picker-network__arrow-down-icon"
         name={ICON_NAMES.ARROW_DOWN}

ui/components/component-library/picker-network/picker-network.scss

@@ -3,4 +3,8 @@
 
   max-width: fit-content;
   height: var(--picker-network-height);
+
+  &:active {
+    background-color: var(--color-background-default-hover);
+  }
 }