m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

updated background color for picker network (#16466)

Browse Source 
* 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
This commit is contained in:
Nidhi Kumari 2022-11-18 22:29:25 +05:30 committed by GitHub
parent 3af83f8f98
commit af09521a69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = ` exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
<div> <div>
<button <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" data-testid="picker-network"
> >
<div <div
@ -12,7 +12,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
I I
</div> </div>
<p <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 Imported
</p> </p>

10
ui/components/component-library/picker-network/picker-network.js
View File

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

4
ui/components/component-library/picker-network/picker-network.scss
View File

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