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

UX: Multichain: Ensure network picker renders properly for long and short names (#18974)

Browse Source 
* UX: Multichain: Ensure network picker renders properly for long and short network names

* Updatte ui/components/multichain/app-header/app-header.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/multichain/app-header/app-header.scss

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Fix jest issue

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
David Walsh 2023-05-08 09:50:13 -05:00 committed by GitHub
parent 90630edef7
commit 995887aa92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -8,6 +8,7 @@ exports[`App Header should match snapshot 1`] = `
<div
class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
>
<div>
<button
class="box mm-picker-network multichain-app-header__contents__network-picker 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"
>
@ -26,6 +27,7 @@ exports[`App Header should match snapshot 1`] = `
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</button>
</div>
<div
class="app-header__logo-container app-header__logo-container--clickable"
data-testid="app-header-logo"

9
ui/components/multichain/app-header/app-header.js
View File

@ -161,13 +161,18 @@ export const AppHeader = ({ onClick }) => {
onClick={networkOpenCallback}
display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
/>
{popupStatus ? null : (
<div>
<PickerNetwork
margin={2}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={networkOpenCallback}
display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
className="multichain-app-header__contents__network-picker"
/>
</div>
)}
{showProductTour &&
popupStatus &&
multichainProductTourStep === 1 ? (
@ -316,12 +321,16 @@ export const AppHeader = ({ onClick }) => {
padding={2}
gap={2}
>
{popupStatus ? null : (
<div>
<PickerNetwork
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={() => dispatch(toggleNetworkMenu())}
className="multichain-app-header__contents__network-picker"
/>
</div>
)}
<MetafoxLogo
unsetIconHeight
onClick={async () => {

2
ui/components/multichain/app-header/app-header.scss
View File

@ -30,7 +30,7 @@
}
&__network-picker {
max-width: 200px;
max-width: 250px;
}
&--avatar-network {