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 Papercuts Epic: Create a consistent representation of the Buttons (#12096)

Browse Source
This commit is contained in:
Niranjana Binoy 2021-10-05 15:20:42 -04:00 committed by GitHub
parent 68d7ff73c5
commit 68259ee3e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
90 changed files with 122 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/metamask-ui.spec.js
View File

@ -100,7 +100,7 @@ describe('MetaMask', function () {
});
it('clicks the "No thanks" option on the metametrics opt-in screen', async function () {
await driver.clickElement('.btn-default');
await driver.clickElement('.btn-secondary');
await driver.delay(largeDelayMs);
});

6
test/e2e/tests/custom-rpc-history.spec.js
View File

@ -48,7 +48,7 @@ describe('Stores custom RPC history', function () {
await chainIdInput.clear();
await chainIdInput.sendKeys(chainId.toString());
await driver.clickElement('.network-form__footer .btn-secondary');
await driver.clickElement('.network-form__footer .btn-primary');
await driver.findElement({ text: networkName, tag: 'span' });
},
);
@ -192,7 +192,7 @@ describe('Stores custom RPC history', function () {
await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
// cancel new custom rpc
await driver.clickElement('.network-form__footer button.btn-default');
await driver.clickElement('.network-form__footer button.btn-secondary');
const networkListItems = await driver.findClickableElements(
'.networks-tab__networks-list-name',
@ -209,7 +209,7 @@ describe('Stores custom RPC history', function () {
);
await driver.clickElement(
'.button.btn-danger.modal-container__footer-button',
'.button.btn-danger-primary.modal-container__footer-button',
);
// wait for confirm delete modal to be removed from DOM.

2
test/e2e/tests/from-import-ui.spec.js
View File

@ -38,7 +38,7 @@ describe('Metamask Import UI', function () {
await driver.clickElement({ text: 'Import wallet', tag: 'button' });
// clicks the "No thanks" option on the metametrics opt-in screen
await driver.clickElement('.btn-default');
await driver.clickElement('.btn-secondary');
// Import Secret Recovery Phrase
await driver.fill(

2
test/e2e/tests/incremental-security.spec.js
View File

@ -42,7 +42,7 @@ describe('Incremental Security', function () {
await driver.clickElement({ text: 'Create a Wallet', tag: 'button' });
// clicks the "No thanks" option on the metametrics opt-in screen
await driver.clickElement('.btn-default');
await driver.clickElement('.btn-secondary');
// accepts a secure password
await driver.fill(

5
ui/components/app/account-menu/account-menu.component.js
View File

@ -19,6 +19,7 @@ import {
} from '../../../helpers/constants/routes';
import TextField from '../../ui/text-field';
import SearchIcon from '../../ui/search-icon';
import Button from '../../ui/button';
import { isBeta } from '../../../helpers/utils/build-types';
@ -324,7 +325,7 @@ export default class AccountMenu extends Component {
<div className="account-menu__close-area" onClick={toggleAccountMenu} />
<AccountMenuItem className="account-menu__header">
{t('myAccounts')}
<button
<Button
className="account-menu__lock-button"
onClick={() => {
lockMetamask();
@ -332,7 +333,7 @@ export default class AccountMenu extends Component {
}}
>
{t('lock')}
</button>
</Button>
</AccountMenuItem>
<div className="account-menu__divider" />
<div className="account-menu__accounts-container">

3
ui/components/app/account-menu/account-menu.test.js
View File

@ -3,6 +3,7 @@ import sinon from 'sinon';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { mountWithRouter } from '../../../../test/lib/render-helpers';
import Button from '../../ui/button';
import AccountMenu from '.';
describe('Account Menu', () => {
@ -103,7 +104,7 @@ describe('Account Menu', () => {
let logout;
it('logout', () => {
logout = wrapper.find('.account-menu__lock-button');
logout = wrapper.find(Button);
expect(logout).toHaveLength(1);
});

6
ui/components/app/account-menu/index.scss
View File

@ -97,14 +97,14 @@
align-items: center;
}
&__lock-button {
& &__lock-button {
@include H7;
border: 1px solid $dusty-gray;
border: 1px solid $ui-white;
background-color: transparent;
color: $white;
border-radius: 4px;
padding: 3.5px 24px;
width: 59px;
}
&__item-icon {

1
ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.scss
View File

@ -37,7 +37,6 @@
& &-button {
height: 40px;
width: 50%;
border-radius: 100px;
margin-right: 24px;
&:last-of-type {

1
ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
View File

@ -76,7 +76,6 @@ const UnconnectedAccountAlert = () => {
disabled={alertState === LOADING}
onClick={onClose}
type="primary"
rounded
className="unconnected-account-alert__dismiss-button"
>
{t('dismiss')}

1
ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
View File

@ -22,7 +22,6 @@
height: 40px;
width: 100px;
border: 0;
border-radius: 100px;
}
&__error {

1
ui/components/app/app-components.scss
View File

@ -46,3 +46,4 @@
@import 'transaction-total-banner/index';
@import 'wallet-overview/index';
@import 'whats-new-popup/index';
@import 'loading-network-screen/index'

5
ui/components/app/cancel-button/cancel-button.js
View File

@ -33,11 +33,10 @@ export default function CancelButton({
const btn = (
<Button
onClick={cancelTransaction}
rounded={!detailsModal}
type={detailsModal ? 'raised' : null}
type="secondary"
className={classnames({
'transaction-list-item__header-button': !detailsModal,
'transaction-list-item-details__header-button': detailsModal,
'transaction-list-item-details__header-button-rounded-button': detailsModal,
})}
disabled={!hasEnoughCancelGas}
>

1
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -122,7 +122,6 @@ export default class ConfirmPageContainerContent extends Component {
cancelText={cancelText}
onSubmit={onSubmit}
submitText={submitText}
submitButtonType="confirm"
disabled={disabled}
>
{unapprovedTxCount > 1 && <a onClick={onCancelAll}>{rejectNText}</a>}

1
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -198,7 +198,6 @@ export default class ConfirmPageContainer extends Component {
cancelText={this.context.t('reject')}
onSubmit={onSubmit}
submitText={this.context.t('confirm')}
submitButtonType="confirm"
disabled={disabled}
>
{unapprovedTxCount > 1 && (

2
ui/components/app/home-notification/index.scss
View File

@ -71,7 +71,6 @@
& &__ignore-button {
border-color: #6a737d;
box-sizing: border-box;
border-radius: 6px;
color: $white;
background-color: inherit;
height: 34px;
@ -95,7 +94,6 @@
& &__accept-button {
border-color: #6a737d;
box-sizing: border-box;
border-radius: 6px;
color: $white;
background-color: inherit;
height: 34px;

6
ui/components/app/loading-network-screen/index.scss Normal file
View File

@ -0,0 +1,6 @@
.loading-overlay__error-buttons {
button {
margin: 5px;
padding: 5px 30px;
}
}

2
ui/components/app/loading-network-screen/loading-network-screen.component.js
View File

@ -71,7 +71,7 @@ export default class LoadingNetworkScreen extends PureComponent {
<span>{this.context.t('somethingWentWrong')}</span>
<div className="loading-overlay__error-buttons">
<Button
type="default"
type="secondary"
onClick={() => {
window.clearTimeout(this.cancelCallTimeout);
showNetworkDropdown();

2
ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
View File

@ -61,7 +61,6 @@ const SECTIONS = {
children: 'Cancel',
key: 'cancel-button',
props: {
rounded: true,
type: 'outlined',
style: {
width: '45%',
@ -73,7 +72,6 @@ const SECTIONS = {
children: 'OK',
key: 'ok-button',
props: {
rounded: true,
type: 'primary',
style: {
width: '45%',

9
ui/components/app/modal/modal.component.js
View File

@ -21,13 +21,11 @@ export default class Modal extends PureComponent {
onCancel: PropTypes.func,
cancelType: PropTypes.string,
cancelText: PropTypes.string,
rounded: PropTypes.bool,
};
static defaultProps = {
submitType: 'secondary',
cancelType: 'default',
rounded: false,
submitType: 'primary',
cancelType: 'secondary',
};
render() {
@ -45,7 +43,6 @@ export default class Modal extends PureComponent {
contentClass,
containerClass,
hideFooter,
rounded,
} = this.props;
return (
@ -64,7 +61,6 @@ export default class Modal extends PureComponent {
{onCancel && (
<Button
type={cancelType}
rounded={rounded}
onClick={onCancel}
className="modal-container__footer-button"
>
@ -73,7 +69,6 @@ export default class Modal extends PureComponent {
)}
<Button
type={submitType}
rounded={rounded || false}
onClick={onSubmit}
disabled={submitDisabled}
className="modal-container__footer-button"

10
ui/components/app/modal/modal.component.test.js
View File

@ -11,7 +11,7 @@ describe('Modal Component', () => {
expect(wrapper.find('.modal-container')).toHaveLength(1);
const buttons = wrapper.find(Button);
expect(buttons).toHaveLength(1);
expect(buttons.at(0).props().type).toStrictEqual('secondary');
expect(buttons.at(0).props().type).toStrictEqual('primary');
});
it('should render a modal with a cancel and a submit button', () => {
@ -31,13 +31,13 @@ describe('Modal Component', () => {
const cancelButton = buttons.at(0);
const submitButton = buttons.at(1);
expect(cancelButton.props().type).toStrictEqual('default');
expect(cancelButton.props().type).toStrictEqual('secondary');
expect(cancelButton.props().children).toStrictEqual('Cancel');
expect(handleCancel.callCount).toStrictEqual(0);
cancelButton.simulate('click');
expect(handleCancel.callCount).toStrictEqual(1);
expect(submitButton.props().type).toStrictEqual('secondary');
expect(submitButton.props().type).toStrictEqual('primary');
expect(submitButton.props().children).toStrictEqual('Submit');
expect(handleSubmit.callCount).toStrictEqual(0);
submitButton.simulate('click');
@ -49,7 +49,7 @@ describe('Modal Component', () => {
<Modal
onCancel={() => undefined}
cancelText="Cancel"
cancelType="secondary"
cancelType="default"
onSubmit={() => undefined}
submitText="Submit"
submitType="confirm"
@ -58,7 +58,7 @@ describe('Modal Component', () => {
const buttons = wrapper.find(Button);
expect(buttons).toHaveLength(2);
expect(buttons.at(0).props().type).toStrictEqual('secondary');
expect(buttons.at(0).props().type).toStrictEqual('default');
expect(buttons.at(1).props().type).toStrictEqual('confirm');
});

1
ui/components/app/modals/cancel-transaction/cancel-transaction.component.js
View File

@ -55,7 +55,6 @@ export default class CancelTransaction extends PureComponent {
onCancel={this.handleCancel}
submitText={t('yesLetsTry')}
cancelText={t('nevermind')}
submitType="secondary"
submitDisabled={busy}
>
<div>

2
ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
View File

@ -30,7 +30,7 @@ export default class ConfirmDeleteNetwork extends PureComponent {
onCancel={() => this.props.hideModal()}
submitText={t('delete')}
cancelText={t('cancel')}
submitType="danger"
submitType="danger-primary"
>
<ModalContent
title={t('deleteNetwork')}

4
ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js
View File

@ -34,7 +34,7 @@ describe('Confirm Delete Network', () => {
it('clicks cancel to hide modal', () => {
const cancelButton = wrapper.find(
'.button.btn-default.modal-container__footer-button',
'.button.btn-secondary.modal-container__footer-button',
);
cancelButton.simulate('click');
@ -43,7 +43,7 @@ describe('Confirm Delete Network', () => {
it('clicks delete to delete the target and hides modal', async () => {
const deleteButton = wrapper.find(
'.button.btn-danger.modal-container__footer-button',
'.button.btn-danger-primary.modal-container__footer-button',
);
deleteButton.simulate('click');

1
ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
View File

@ -95,7 +95,6 @@ export default class ConfirmRemoveAccount extends Component {
onCancel={this.handleCancel}
submitText={t('remove')}
cancelText={t('nevermind')}
submitType="secondary"
>
<div>
{this.renderSelectedAccount()}

4
ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js
View File

@ -51,14 +51,14 @@ describe('Confirm Remove Account', () => {
});
it('nevermind', () => {
const nevermind = wrapper.find({ type: 'default' });
const nevermind = wrapper.find({ type: 'secondary' });
nevermind.simulate('click');
expect(props.hideModal.calledOnce).toStrictEqual(true);
});
it('remove', async () => {
const remove = wrapper.find({ type: 'secondary' });
const remove = wrapper.find({ type: 'primary' });
remove.simulate('click');
expect(await props.removeAccount.calledOnce).toStrictEqual(true);

2
ui/components/app/modals/confirm-reset-account/confirm-reset-account.component.js
View File

@ -25,7 +25,7 @@ export default class ConfirmResetAccount extends PureComponent {
onCancel={() => this.props.hideModal()}
submitText={t('reset')}
cancelText={t('nevermind')}
submitType="danger"
submitType="danger-primary"
>
<ModalContent
title={`${t('resetAccount')}?`}

6
ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js
View File

@ -25,7 +25,7 @@ describe('Confirm Reset Account', () => {
it('hides modal when nevermind button is clicked', () => {
const nevermind = wrapper.find(
'.btn-default.modal-container__footer-button',
'.btn-secondary.modal-container__footer-button',
);
nevermind.simulate('click');
@ -33,7 +33,9 @@ describe('Confirm Reset Account', () => {
});
it('resets account and hides modal when reset button is clicked', async () => {
const reset = wrapper.find('.btn-danger.modal-container__footer-button');
const reset = wrapper.find(
'.btn-danger-primary.modal-container__footer-button',
);
reset.simulate('click');
expect(await props.resetAccount.calledOnce).toStrictEqual(true);

3
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -37,11 +37,8 @@ const CustomizeNonce = ({
hideModal();
}}
submitText={t('save')}
submitType="primary"
onCancel={() => hideModal()}
cancelText={t('cancel')}
cancelType="secondary"
rounded
contentClass="customize-nonce-modal-content"
containerClass="customize-nonce-modal-container"
>

1
ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
View File

@ -226,7 +226,6 @@ export default class EditApprovalPermission extends PureComponent {
hideModal();
}}
submitText={t('save')}
submitType="primary"
contentClass="edit-approval-permission-modal-content"
containerClass="edit-approval-permission-modal-container"
submitDisabled={disabled}

6
ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
View File

@ -93,7 +93,7 @@ export default class ExportPrivateKeyModal extends Component {
<div className="export-private-key-modal__buttons">
{!privateKey && (
<Button
type="default"
type="secondary"
large
className="export-private-key-modal__button export-private-key-modal__button--cancel"
onClick={() => hideModal()}
@ -104,7 +104,7 @@ export default class ExportPrivateKeyModal extends Component {
{privateKey ? (
<Button
onClick={() => hideModal()}
type="secondary"
type="primary"
large
className="export-private-key-modal__button"
>
@ -115,7 +115,7 @@ export default class ExportPrivateKeyModal extends Component {
onClick={() =>
this.exportAccountAndGetPrivateKey(this.state.password, address)
}
type="secondary"
type="primary"
large
className="export-private-key-modal__button"
disabled={!this.state.password}

4
ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js
View File

@ -61,7 +61,7 @@ class HideTokenConfirmationModal extends Component {
</div>
<div className="hide-token-confirmation__buttons">
<Button
type="default"
type="secondary"
className="hide-token-confirmation__button"
data-testid="hide-token-confirmation__cancel"
onClick={() => hideModal()}
@ -69,7 +69,7 @@ class HideTokenConfirmationModal extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
className="hide-token-confirmation__button"
data-testid="hide-token-confirmation__hide"
onClick={() => hideToken(address)}

1
ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
View File

@ -140,7 +140,6 @@ export default class MetaMetricsOptInModal extends Component {
});
}}
submitText={t('affirmAgree')}
submitButtonType="confirm"
disabled={false}
/>
</div>

4
ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js
View File

@ -28,7 +28,9 @@ describe('MetaMetrics Opt In', () => {
});
it('passes false to setParticipateInMetaMetrics and hides modal', async () => {
const noThanks = wrapper.find('.btn-default.page-container__footer-button');
const noThanks = wrapper.find(
'.btn-secondary.page-container__footer-button',
);
noThanks.simulate('click');
expect(await props.setParticipateInMetaMetrics.calledOnce).toStrictEqual(

1
ui/components/app/modals/qr-scanner/qr-scanner.component.js
View File

@ -221,7 +221,6 @@ export default class QrScanner extends Component {
onSubmit={this.tryAgain}
cancelText={t('cancel')}
submitText={t('tryAgain')}
submitButtonType="confirm"
/>
</>
);

1
ui/components/app/modals/reject-transactions/reject-transactions.component.js
View File

@ -32,7 +32,6 @@ export default class RejectTransactionsModal extends PureComponent {
onCancel={hideModal}
submitText={t('rejectAll')}
cancelText={t('cancel')}
submitType="secondary"
>
<div>
<div className="reject-transactions__description">

4
ui/components/app/modals/reject-transactions/reject-transactions.test.js
View File

@ -26,7 +26,7 @@ describe('Reject Transactions Model', () => {
it('hides modal when cancel button is clicked', () => {
const cancelButton = wrapper.find(
'.btn-default.modal-container__footer-button',
'.btn-secondary.modal-container__footer-button',
);
cancelButton.simulate('click');
@ -35,7 +35,7 @@ describe('Reject Transactions Model', () => {
it('onSubmit is called and hides modal when reject all clicked', async () => {
const rejectAllButton = wrapper.find(
'.btn-secondary.modal-container__footer-button',
'.btn-primary.modal-container__footer-button',
);
rejectAllButton.simulate('click');

4
ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js
View File

@ -17,9 +17,7 @@ describe('Transaction Confirmed', () => {
},
},
);
const submit = wrapper.find(
'.btn-secondary.modal-container__footer-button',
);
const submit = wrapper.find('.btn-primary.modal-container__footer-button');
submit.simulate('click');
expect(props.onSubmit.calledOnce).toStrictEqual(true);

1
ui/components/app/permission-page-container/permission-page-container.component.js
View File

@ -141,7 +141,6 @@ export default class PermissionPageContainer extends Component {
cancelText={this.context.t('cancel')}
onSubmit={() => this.onSubmit()}
submitText={this.context.t('connect')}
submitButtonType="confirm"
buttonSizeLarge={false}
/>
</div>

2
ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
View File

@ -75,7 +75,7 @@ export default function RecoveryPhraseReminder({ onConfirm, hasBackedUp }) {
</Box>
<Box justifyContent={JUSTIFY_CONTENT.CENTER}>
<Box width={BLOCK_SIZES.TWO_FIFTHS}>
<Button rounded type="primary" onClick={onConfirm}>
<Button type="primary" onClick={onConfirm}>
{t('recoveryPhraseReminderConfirm')}
</Button>
</Box>

4
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -290,7 +290,7 @@ export default class SignatureRequestOriginal extends Component {
return (
<div className="request-signature__footer">
<Button
type="default"
type="secondary"
large
className="request-signature__footer__cancel-button"
onClick={async (event) => {
@ -311,7 +311,7 @@ export default class SignatureRequestOriginal extends Component {
</Button>
<Button
data-testid="request-signature__sign"
type="secondary"
type="primary"
large
className="request-signature__footer__sign-button"
onClick={async (event) => {

1
ui/components/app/signature-request/signature-request-footer/index.scss
View File

@ -6,7 +6,6 @@
text-transform: uppercase;
flex: 1;
margin: 1rem 0.5rem;
border-radius: 3px;
}
button:first-child {

2
ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
View File

@ -16,7 +16,7 @@ export default class SignatureRequestFooter extends PureComponent {
const { cancelAction, signAction } = this.props;
return (
<div className="signature-request-footer">
<Button onClick={cancelAction} type="default" large>
<Button onClick={cancelAction} type="secondary" large>
{this.context.t('cancel')}
</Button>
<Button onClick={signAction} type="primary" large>

2
ui/components/app/signature-request/signature-request.container.test.js
View File

@ -64,7 +64,7 @@ describe('Signature Request', () => {
});
it('cancel', () => {
const cancelButton = wrapper.find('button.btn-default');
const cancelButton = wrapper.find('button.btn-secondary');
cancelButton.simulate('click');
expect(props.cancel.calledOnce).toStrictEqual(true);

7
ui/components/app/transaction-list-item-details/index.scss
View File

@ -17,7 +17,12 @@
}
& &__header-button {
@include H8;
&-rounded-button {
@include H8;
padding: 0 16px;
margin-right: 8px;
}
&-tooltip-container {
display: flex !important;

4
ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
View File

@ -147,9 +147,9 @@ export default class TransactionListItemDetails extends PureComponent {
<div className="transaction-list-item-details__header-buttons">
{showSpeedUp && (
<Button
type="raised"
type="primary"
onClick={this.handleRetry}
className="transaction-list-item-details__header-button"
className="transaction-list-item-details__header-button-rounded-button"
>
{t('speedUp')}
</Button>

3
ui/components/app/transaction-list-item/transaction-list-item.component.js
View File

@ -122,8 +122,7 @@ export default function TransactionListItem({
}
return (
<Button
type="secondary"
rounded
type="primary"
onClick={hasCancelled ? cancelTransaction : retryTransaction}
style={hasCancelled ? { width: 'auto' } : null}
>

1
ui/components/app/transaction-list/transaction-list.component.js
View File

@ -157,7 +157,6 @@ export default function TransactionList({
<Button
className="transaction-list__view-more"
type="secondary"
rounded
onClick={viewMore}
>
{t('viewMore')}

1
ui/components/app/whats-new-popup/whats-new-popup.js
View File

@ -103,7 +103,6 @@ const renderFirstNotification = (notification, idRefMap, history, isLast) => {
<Button
type="secondary"
className="whats-new-popup__button"
rounded
onClick={actionFunction}
>
{actionText}

6
ui/components/ui/button/button.component.js
View File

@ -31,7 +31,6 @@ const Button = ({
large,
children,
icon,
rounded,
className,
...buttonProps
}) => {
@ -40,8 +39,10 @@ const Button = ({
// we know to be erroneous attributes for a link. We will likely want to extract Link
// to its own component in the future.
let Tag = 'button';
let rounded = true;
if (type === 'link') {
Tag = 'a';
rounded = false;
} else if (submit) {
buttonProps.type = 'submit';
}
@ -58,9 +59,9 @@ const Button = ({
<Tag
className={classnames(
'button',
rounded && CLASSNAME_ROUNDED,
typeHash[type] || CLASSNAME_DEFAULT,
large && CLASSNAME_LARGE,
rounded && CLASSNAME_ROUNDED,
className,
)}
{...buttonProps}
@ -75,7 +76,6 @@ Button.propTypes = {
type: PropTypes.string,
submit: PropTypes.bool,
large: PropTypes.bool,
rounded: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node,
icon: PropTypes.node,

4
ui/components/ui/page-container/page-container-footer/page-container-footer.component.js
View File

@ -44,7 +44,7 @@ export default class PageContainerFooter extends Component {
<footer>
{!hideCancel && (
<Button
type={cancelButtonType || 'default'}
type={cancelButtonType || 'secondary'}
large={buttonSizeLarge}
className={classnames(
'page-container__footer-button',
@ -58,7 +58,7 @@ export default class PageContainerFooter extends Component {
)}
<Button
type={submitButtonType || 'secondary'}
type={submitButtonType || 'primary'}
large={buttonSizeLarge}
className={classnames(
'page-container__footer-button',

2
ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
View File

@ -45,7 +45,7 @@ describe('Page Footer', () => {
it('has button type of default', () => {
expect(
wrapper.find('.page-container__footer-button').first().prop('type'),
).toStrictEqual('default');
).toStrictEqual('secondary');
});
it('has children text of Cancel', () => {

1
ui/components/ui/page-container/page-container.component.js
View File

@ -143,7 +143,6 @@ export default class PageContainer extends PureComponent {
onSubmit={onSubmit}
submitText={tabSubmitText || submitText}
disabled={disabled}
submitButtonType="primary"
/>
</div>
</div>

1
ui/components/ui/truncated-definition-list/truncated-definition-list.js
View File

@ -49,7 +49,6 @@ export default function TruncatedDefinitionList({
<Button
type="primary"
style={{ width: '50%' }}
rounded
onClick={() => setIsPopoverOpen(false)}
>
Close

3
ui/css/itcss/components/send.scss
View File

@ -785,13 +785,14 @@
width: 56px;
height: 20px;
margin-top: 5px;
border-radius: 100px;
&__button {
width: 56px;
height: 20px;
position: absolute;
border: 1px solid #b0d7f2;
border-radius: 6px;
border-radius: 100px;
cursor: pointer;
top: 0;
left: 0;

4
ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
View File

@ -125,7 +125,7 @@ export default class ConfirmAddSuggestedToken extends Component {
<div className="page-container__footer">
<footer>
<Button
type="default"
type="secondary"
large
className="page-container__footer-button"
onClick={async () => {
@ -138,7 +138,7 @@ export default class ConfirmAddSuggestedToken extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="page-container__footer-button"
disabled={suggestedAssets.length === 0}

4
ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
View File

@ -296,7 +296,7 @@ export default class ConfirmDecryptMessage extends Component {
return (
<div className="request-decrypt-message__footer">
<Button
type="default"
type="secondary"
large
className="request-decrypt-message__footer__cancel-button"
onClick={async (event) => {
@ -316,7 +316,7 @@ export default class ConfirmDecryptMessage extends Component {
{t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="request-decrypt-message__footer__sign-button"
onClick={async (event) => {

4
ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
View File

@ -199,7 +199,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
return (
<div className="request-encryption-public-key__footer">
<Button
type="default"
type="secondary"
large
className="request-encryption-public-key__footer__cancel-button"
onClick={async (event) => {
@ -219,7 +219,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="request-encryption-public-key__footer__sign-button"
onClick={async (event) => {

4
ui/pages/confirm-import-token/confirm-import-token.component.js
View File

@ -94,7 +94,7 @@ export default class ConfirmImportToken extends Component {
<div className="page-container__footer">
<footer>
<Button
type="default"
type="secondary"
large
className="page-container__footer-button"
onClick={() => history.push(IMPORT_TOKEN_ROUTE)}
@ -102,7 +102,7 @@ export default class ConfirmImportToken extends Component {
{this.context.t('back')}
</Button>
<Button
type="secondary"
type="primary"
large
className="page-container__footer-button"
onClick={() => {

4
ui/pages/confirmation/components/confirmation-footer/confirmation-footer.js
View File

@ -13,10 +13,10 @@ export default function ConfirmationFooter({
<div className="confirmation-footer">
{alerts}
<div className="confirmation-footer__actions">
<Button rounded type="secondary" onClick={onCancel}>
<Button type="secondary" onClick={onCancel}>
{cancelText}
</Button>
<Button rounded type="primary" onClick={onApprove}>
<Button type="primary" onClick={onApprove}>
{approveText}
</Button>
</div>

2
ui/pages/create-account/connect-hardware/account-list.js
View File

@ -194,7 +194,7 @@ class AccountList extends Component {
return (
<div className="new-external-account-form__buttons">
<Button
type="default"
type="secondary"
large
className="new-external-account-form__button"
onClick={this.props.onCancel.bind(this)}

4
ui/pages/create-account/import-account/json.js
View File

@ -57,7 +57,7 @@ class JsonImportSubview extends Component {
/>
<div className="new-account-create-form__buttons">
<Button
type="default"
type="secondary"
large
className="new-account-create-form__button"
onClick={() => history.push(mostRecentOverviewPage)}
@ -65,7 +65,7 @@ class JsonImportSubview extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="new-account-create-form__button"
onClick={() => this.createNewKeychain()}

4
ui/pages/create-account/import-account/private-key.js
View File

@ -104,7 +104,7 @@ class PrivateKeyImportView extends Component {
</div>
<div className="new-account-import-form__buttons">
<Button
type="default"
type="secondary"
large
className="new-account-create-form__button"
onClick={() => {
@ -116,7 +116,7 @@ class PrivateKeyImportView extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="new-account-create-form__button"
onClick={() => this.createNewKeychain()}

4
ui/pages/create-account/new-account.component.js
View File

@ -60,7 +60,7 @@ export default class NewAccountCreateForm extends Component {
/>
<div className="new-account-create-form__buttons">
<Button
type="default"
type="secondary"
large
className="new-account-create-form__button"
onClick={() => history.push(mostRecentOverviewPage)}
@ -68,7 +68,7 @@ export default class NewAccountCreateForm extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="new-account-create-form__button"
onClick={createClick}

1
ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
View File

@ -166,7 +166,6 @@ export default class MetaMetricsOptIn extends Component {
}
}}
submitText={t('affirmAgree')}
submitButtonType="primary"
disabled={false}
/>
<div className="metametrics-opt-in__bottom-text">

2
ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js
View File

@ -21,7 +21,7 @@ describe('MetaMetricsOptIn', () => {
store,
);
const noThanksButton = wrapper.find(
'.btn-default.page-container__footer-button',
'.btn-secondary.page-container__footer-button',
);
noThanksButton.simulate('click');

5
ui/pages/keychains/index.scss
View File

@ -185,3 +185,8 @@
padding-top: 5px;
}
}
.page-container__footer-single-button {
width: 40%;
margin: 8px auto;
}

2
ui/pages/keychains/restore-vault.js
View File

@ -239,7 +239,7 @@ class RestoreVaultPage extends Component {
largeLabel
/>
<Button
type="first-time"
type="primary"
className="first-time-flow__button"
onClick={() => !disabled && this.onClick()}
disabled={disabled}

8
ui/pages/keychains/reveal-seed.js
View File

@ -114,7 +114,7 @@ class RevealSeedPage extends Component {
<div className="page-container__footer">
<footer>
<Button
type="default"
type="secondary"
large
className="page-container__footer-button"
onClick={() =>
@ -124,7 +124,7 @@ class RevealSeedPage extends Component {
{this.context.t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="page-container__footer-button"
onClick={(event) => this.handleSubmit(event)}
@ -141,9 +141,9 @@ class RevealSeedPage extends Component {
return (
<div className="page-container__footer">
<Button
type="default"
type="secondary"
large
className="page-container__footer-button"
className="page-container__footer-single-button"
onClick={() =>
this.props.history.push(this.props.mostRecentOverviewPage)
}

8
ui/pages/mobile-sync/mobile-sync.component.js
View File

@ -408,10 +408,10 @@ export default class MobileSyncPage extends Component {
return (
<div
className="new-account-import-form__buttons"
style={{ padding: 30, marginTop: 0 }}
style={{ padding: '30px 15px 30px 15px', marginTop: 0 }}
>
<Button
type="default"
type="secondary"
large
className="new-account-create-form__button"
onClick={() => this.goBack()}
@ -419,7 +419,7 @@ export default class MobileSyncPage extends Component {
{t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
large
className="new-account-create-form__button"
onClick={(event) => this.handleSubmit(event)}
@ -437,7 +437,7 @@ export default class MobileSyncPage extends Component {
return (
<div className="page-container__footer" style={{ padding: 30 }}>
<Button
type="default"
type="secondary"
large
className="page-container__footer-button"
onClick={() => this.goBack()}

1
ui/pages/onboarding-flow/new-account/new-account.js
View File

@ -169,7 +169,6 @@ export default function NewAccount({ onSubmit }) {
className="new-account__form--submit-button"
disabled={!isValid || !termsChecked}
onClick={handleCreate}
rounded
>
{t('createNewWallet')}
</Button>

1
ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
View File

@ -80,7 +80,6 @@ export default function ConfirmRecoveryPhrase({ seedPhrase = '' }) {
/>
<div className="recovery-phrase__footer">
<Button
rounded
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {

2
ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
View File

@ -92,7 +92,6 @@ export default function RecoveryPhrase({ seedPhrase }) {
{copied ? t('copiedExclamation') : t('copyToClipboard')}
</Button>
<Button
rounded
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {
@ -104,7 +103,6 @@ export default function RecoveryPhrase({ seedPhrase }) {
</div>
) : (
<Button
rounded
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {

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

@ -224,7 +224,7 @@ export default class ChooseAccount extends Component {
<div className="permissions-connect-choose-account__bottom-buttons">
<Button
onClick={() => cancelPermissionsRequest(permissionsRequestId)}
type="default"
type="secondary"
>
{t('cancel')}
</Button>

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

@ -179,7 +179,7 @@
width: 124px;
}
.btn-default {
.btn-secondary {
background: white;
margin-left: 16px;
}

1
ui/pages/permissions-connect/permissions-connect.stories.js
View File

@ -74,7 +74,6 @@ export const PermissionPageContainerComponent = () => {
cancelButtonType="default"
onSubmit={action('Account(s) Connected')}
submitText="connect"
submitButtonType="confirm"
buttonSizeLarge={false}
/>
</div>

1
ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
View File

@ -153,7 +153,6 @@ export default class AddContact extends PureComponent {
history.push(CONTACT_LIST_ROUTE);
}}
submitText={this.context.t('save')}
submitButtonType="confirm"
/>
</div>
);

1
ui/pages/settings/contact-list-tab/contact-list-tab.component.js
View File

@ -80,7 +80,6 @@ export default class ContactListTab extends Component {
viewingContact || editingContact,
})}
type="secondary"
rounded
onClick={() => {
history.push(CONTACT_ADD_ROUTE);
}}

1
ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
View File

@ -177,7 +177,6 @@ export default class EditContact extends PureComponent {
history.push(`${viewRoute}/${address}`);
}}
submitText={this.context.t('save')}
submitButtonType="confirm"
/>
</div>
);

1
ui/pages/settings/contact-list-tab/index.scss
View File

@ -257,7 +257,6 @@
top: 85px;
right: 16px;
width: auto;
border-radius: 100px;
@media screen and (max-width: $break-small) {
top: 16px;

4
ui/pages/settings/networks-tab/index.scss
View File

@ -232,11 +232,11 @@
width: 93%;
}
.btn-default {
.btn-secondary {
margin-right: 0.375rem;
}
.btn-secondary {
.btn-primary {
margin-left: 0.375rem;
}

4
ui/pages/settings/networks-tab/network-form/network-form.component.js
View File

@ -629,14 +629,14 @@ export default class NetworkForm extends PureComponent {
</Button>
)}
<Button
type="default"
type="secondary"
onClick={this.onCancel}
disabled={this.stateIsUnchanged()}
>
{t('cancel')}
</Button>
<Button
type="secondary"
type="primary"
disabled={isSubmitDisabled}
onClick={this.onSubmit}
>

2
ui/pages/settings/networks-tab/networks-tab.component.js
View File

@ -56,7 +56,7 @@ export default class NetworksTab extends PureComponent {
</span>
<div className="networks-tab__add-network-header-button-wrapper">
<Button
type="secondary"
type="primary"
onClick={(event) => {
event.preventDefault();
setSelectedSettingsRpcUrl('');

4
ui/pages/swaps/import-token/import-token.js
View File

@ -27,15 +27,13 @@ export default function ImportToken({
type="secondary"
className="page-container__footer-button"
onClick={onImportTokenCloseClick}
rounded
>
{t('cancel')}
</Button>
<Button
type="confirm"
type="primary"
className="page-container__footer-button"
onClick={onImportTokenClick}
rounded
>
{t('import')}
</Button>

2
ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
View File

@ -139,7 +139,7 @@ export default function ItemList({
)}
</div>
{result.notImported && (
<Button type="confirm" onClick={onClick} rounded>
<Button type="confirm" onClick={onClick}>
{t('import')}
</Button>
)}

1
ui/pages/swaps/select-quote-popover/index.scss
View File

@ -2,7 +2,6 @@
.select-quote-popover {
&__button {
border-radius: 100px;
height: 39px;
width: 140px;
}

4
ui/pages/swaps/select-quote-popover/select-quote-popover.js
View File

@ -57,7 +57,7 @@ const SelectQuotePopover = ({
const footer = (
<>
<Button
type="default"
type="secondary"
className="page-container__footer-button select-quote-popover__button"
onClick={onClose}
>
@ -65,7 +65,7 @@ const SelectQuotePopover = ({
</Button>
<Button
type="confirm"
type="primary"
className="page-container__footer-button select-quote-popover__button"
onClick={onSubmitClick}
>

4
ui/pages/swaps/swaps-footer/__snapshots__/swaps-footer.test.js.snap
View File

@ -13,7 +13,7 @@ exports[`SwapsFooter renders the component with initial props 1`] = `
>
<footer>
<button
class="button btn-default page-container__footer-button swaps-footer__custom-page-container-footer-button-class"
class="button btn--rounded btn-secondary page-container__footer-button swaps-footer__custom-page-container-footer-button-class"
data-testid="page-container-footer-cancel"
role="button"
tabindex="0"
@ -21,7 +21,7 @@ exports[`SwapsFooter renders the component with initial props 1`] = `
Back
</button>
<button
class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class"
class="button btn--rounded btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class"
data-testid="page-container-footer-next"
role="button"
tabindex="0"

1
ui/pages/swaps/swaps-footer/swaps-footer.js
View File

@ -30,7 +30,6 @@ export default function SwapsFooter({
cancelText={t('back')}
onSubmit={onSubmit}
submitText={submitText}
submitButtonType="confirm"
footerClassName={classnames(
'swaps-footer__custom-page-container-footer-class',
className,

1
ui/pages/unlock-page/index.scss
View File

@ -41,6 +41,7 @@
button {
font-weight: bold;
border-radius: 100px;
}
}

4
ui/pages/unlock-page/unlock-page.component.js
View File

@ -1,8 +1,8 @@
import { EventEmitter } from 'events';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import getCaretCoordinates from 'textarea-caret';
import Button from '../../components/ui/button';
import TextField from '../../components/ui/text-field';
import Mascot from '../../components/ui/mascot';
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
@ -115,7 +115,7 @@ export default class UnlockPage extends Component {
height: '60px',
fontWeight: '400',
boxShadow: 'none',
borderRadius: '4px',
borderRadius: '100px',
};
return (