m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

UX Multichain: fixed padding for edit screen (#19707)

Browse Source 
* fixed padding for edit screen

* Use network picker for header trigger

* Fix swaps display

* updated snapshot

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
Nidhi Kumari 2023-06-26 23:27:56 +05:30 committed by GitHub
parent 9a9625d96c
commit eb506a5694
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 7 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

@ -200,7 +200,7 @@ exports[`App Header should match snapshot 1`] = `
</button> </button>
</div> </div>
<div <div
class="box multichain-app-header box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-alternative" class="box multichain-app-header box--margin-bottom-4 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-alternative"
> >
<div <div
class="box multichain-app-header__contents multichain-app-header-shadow box--padding-2 box--padding-right-4 box--padding-left-4 box--gap-2 box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--display-flex" class="box multichain-app-header__contents multichain-app-header-shadow box--padding-2 box--padding-right-4 box--padding-left-4 box--gap-2 box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--display-flex"

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

@ -149,6 +149,10 @@ export const AppHeader = ({ location }) => {
}); });
}, [chainId, dispatch, trackEvent]); }, [chainId, dispatch, trackEvent]);
// This is required to ensure send and confirmation screens
// look as desired
const headerBottomMargin = disableNetworkPicker ? 4 : 0;
return ( return (
<> <>
{isUnlocked && !popupStatus ? ( {isUnlocked && !popupStatus ? (
@ -175,6 +179,7 @@ export const AppHeader = ({ location }) => {
className={classnames('multichain-app-header', { className={classnames('multichain-app-header', {
'multichain-app-header-shadow': !isUnlocked || popupStatus, 'multichain-app-header-shadow': !isUnlocked || popupStatus,
})} })}
marginBottom={headerBottomMargin}
alignItems={AlignItems.center} alignItems={AlignItems.center}
width={BlockSize.Full} width={BlockSize.Full}
backgroundColor={ backgroundColor={

5
ui/pages/routes/routes.component.js
View File

@ -562,10 +562,7 @@ export default class Routes extends Component {
{accountDetailsAddress ? ( {accountDetailsAddress ? (
<AccountDetails address={accountDetailsAddress} /> <AccountDetails address={accountDetailsAddress} />
) : null} ) : null}
<Box <Box className="main-container-wrapper">
className="main-container-wrapper"
paddingTop={isUnlocked && [0, 4]}
>
{isLoading ? <Loading loadingMessage={loadMessage} /> : null} {isLoading ? <Loading loadingMessage={loadMessage} /> : null}
{!isLoading && isNetworkLoading ? <LoadingNetwork /> : null} {!isLoading && isNetworkLoading ? <LoadingNetwork /> : null}
{this.renderRoutes()} {this.renderRoutes()}

3
ui/pages/swaps/index.scss
View File

@ -57,8 +57,7 @@
background: var(--color-background-default); background: var(--color-background-default);
box-shadow: var(--shadow-size-xs) var(--color-shadow-default); box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
border: 1px solid var(--color-border-muted); border: 1px solid var(--color-border-muted);
border-top: 0; border-radius: 8px;
border-radius: 0 0 8px 8px;
height: 620px; height: 620px;
} }
} }