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

Fix design inconsistencies in the connect flow (#19800)

Browse Source
This commit is contained in:
Frederik Bolding 2023-06-28 14:36:20 +02:00 committed by GitHub
parent 994a71d30e
commit c8f26d8c24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/ui/account-list/index.scss
View File

@ -11,7 +11,7 @@
flex: 0; flex: 0;
margin-top: 36px; margin-top: 36px;
width: 100%; width: 100%;
padding-inline-start: 15px; padding-inline-start: 16px;
padding-inline-end: 17px; padding-inline-end: 17px;
} }
@ -25,7 +25,6 @@
&__select-all { &__select-all {
display: flex; display: flex;
margin-inline-start: 16px;
align-items: center; align-items: center;
} }

25
ui/pages/permissions-connect/choose-account/choose-account.js
View File

@ -1,10 +1,10 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../../components/ui/button';
import PermissionsConnectHeader from '../../../components/app/permissions-connect-header'; import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer'; import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
import AccountList from '../../../components/ui/account-list'; import AccountList from '../../../components/ui/account-list';
import { PageContainerFooter } from '../../../components/ui/page-container';
const ChooseAccount = ({ const ChooseAccount = ({
selectedAccountAddresses, selectedAccountAddresses,
@ -75,21 +75,14 @@ const ChooseAccount = ({
</div> </div>
<div className="permissions-connect-choose-account__footer-container"> <div className="permissions-connect-choose-account__footer-container">
<PermissionsConnectFooter /> <PermissionsConnectFooter />
<div className="permissions-connect-choose-account__bottom-buttons"> <PageContainerFooter
<Button cancelButtonType="default"
onClick={() => cancelPermissionsRequest(permissionsRequestId)} onCancel={() => cancelPermissionsRequest(permissionsRequestId)}
type="secondary" cancelText={t('cancel')}
> onSubmit={() => selectAccounts(selectedAccounts)}
{t('cancel')} submitText={t('next')}
</Button> disabled={selectedAccounts.size === 0}
<Button />
onClick={() => selectAccounts(selectedAccounts)}
type="primary"
disabled={selectedAccounts.size === 0}
>
{t('next')}
</Button>
</div>
</div> </div>
</> </>
); );

26
ui/pages/permissions-connect/choose-account/index.scss
View File

@ -29,31 +29,9 @@
justify-content: space-between; justify-content: space-between;
padding-bottom: 20px; padding-bottom: 20px;
} }
}
&__bottom-buttons { .page-container__footer {
display: flex; margin-top: 12px;
justify-content: space-between;
width: 100%;
padding-top: 16px;
padding-bottom: 16px;
margin-top: 12px;
border-top: 1px solid var(--color-border-muted);
@include screen-sm-min {
border-top: none;
}
button {
width: 124px;
}
.btn-secondary {
margin-left: 16px;
}
.btn-primary {
margin-right: 16px;
} }
} }
} }

2
ui/pages/permissions-connect/permissions-connect.component.js
View File

@ -279,7 +279,7 @@ export default class PermissionConnect extends Component {
onClick={() => this.goBack()} onClick={() => this.goBack()}
> >
<Icon <Icon
name={IconName.ArrowRight} name={IconName.ArrowLeft}
marginInlineEnd={1} marginInlineEnd={1}
size={IconSize.Xs} size={IconSize.Xs}
/> />