mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
UX: Multichain: Ensure network picker renders properly for long and short names (#18974)
* 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
GitHub
parent
90630edef7
commit
995887aa92
@ -8,24 +8,26 @@ exports[`App Header should match snapshot 1`] = `
|
|||||||
<div
|
<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"
|
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"
|
||||||
>
|
>
|
||||||
<button
|
<div>
|
||||||
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"
|
<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"
|
||||||
<div
|
|
||||||
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
|
|
||||||
>
|
>
|
||||||
G
|
<div
|
||||||
</div>
|
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
|
||||||
<p
|
>
|
||||||
class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
|
G
|
||||||
>
|
</div>
|
||||||
Goerli
|
<p
|
||||||
</p>
|
class="box mm-text mm-text--body-sm mm-text--ellipsis box--flex-direction-row box--color-text-default"
|
||||||
<span
|
>
|
||||||
class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
|
Goerli
|
||||||
style="mask-image: url('./images/icons/arrow-down.svg');"
|
</p>
|
||||||
/>
|
<span
|
||||||
</button>
|
class="box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs box--display-inline-block box--flex-direction-row box--color-icon-default"
|
||||||
|
style="mask-image: url('./images/icons/arrow-down.svg');"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="app-header__logo-container app-header__logo-container--clickable"
|
class="app-header__logo-container app-header__logo-container--clickable"
|
||||||
data-testid="app-header-logo"
|
data-testid="app-header-logo"
|
||||||
|
|||||||
@ -161,13 +161,18 @@ export const AppHeader = ({ onClick }) => {
|
|||||||
onClick={networkOpenCallback}
|
onClick={networkOpenCallback}
|
||||||
display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
|
display={[DISPLAY.FLEX, DISPLAY.NONE]} // show on popover hide on desktop
|
||||||
/>
|
/>
|
||||||
<PickerNetwork
|
{popupStatus ? null : (
|
||||||
label={currentNetwork?.nickname}
|
<div>
|
||||||
src={currentNetwork?.rpcPrefs?.imageUrl}
|
<PickerNetwork
|
||||||
onClick={networkOpenCallback}
|
margin={2}
|
||||||
display={[DISPLAY.NONE, DISPLAY.FLEX]} // show on desktop hide on popover
|
label={currentNetwork?.nickname}
|
||||||
className="multichain-app-header__contents__network-picker"
|
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 &&
|
{showProductTour &&
|
||||||
popupStatus &&
|
popupStatus &&
|
||||||
multichainProductTourStep === 1 ? (
|
multichainProductTourStep === 1 ? (
|
||||||
@ -316,12 +321,16 @@ export const AppHeader = ({ onClick }) => {
|
|||||||
padding={2}
|
padding={2}
|
||||||
gap={2}
|
gap={2}
|
||||||
>
|
>
|
||||||
<PickerNetwork
|
{popupStatus ? null : (
|
||||||
label={currentNetwork?.nickname}
|
<div>
|
||||||
src={currentNetwork?.rpcPrefs?.imageUrl}
|
<PickerNetwork
|
||||||
onClick={() => dispatch(toggleNetworkMenu())}
|
label={currentNetwork?.nickname}
|
||||||
className="multichain-app-header__contents__network-picker"
|
src={currentNetwork?.rpcPrefs?.imageUrl}
|
||||||
/>
|
onClick={() => dispatch(toggleNetworkMenu())}
|
||||||
|
className="multichain-app-header__contents__network-picker"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<MetafoxLogo
|
<MetafoxLogo
|
||||||
unsetIconHeight
|
unsetIconHeight
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__network-picker {
|
&__network-picker {
|
||||||
max-width: 200px;
|
max-width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--avatar-network {
|
&--avatar-network {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user