UX Papercuts Epic: Create a consistent representation of the Buttons (#12096)

test/e2e/metamask-ui.spec.js

@@ -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);
     });
 

test/e2e/tests/custom-rpc-history.spec.js

@@ -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.

test/e2e/tests/from-import-ui.spec.js

@@ -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(

test/e2e/tests/incremental-security.spec.js

@@ -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(

ui/components/app/account-menu/account-menu.component.js

@@ -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">

ui/components/app/account-menu/account-menu.test.js

@@ -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);
     });
 

ui/components/app/account-menu/index.scss

@@ -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 {

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

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

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

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

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss

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

ui/components/app/app-components.scss

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

ui/components/app/cancel-button/cancel-button.js

@@ -33,11 +33,10 @@ export default function CancelButton({
   const btn = (
     <Button
       onClick={cancelTransaction}
-      rounded={!detailsModal}
+      type="secondary"
-      type={detailsModal ? 'raised' : null}
       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}
     >

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

@@ -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>}

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -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 && (

ui/components/app/home-notification/index.scss

@@ -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;

ui/components/app/loading-network-screen/index.scss

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

ui/components/app/loading-network-screen/loading-network-screen.component.js

@@ -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();

ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js

@@ -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%',

ui/components/app/modal/modal.component.js

@@ -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',
+    submitType: 'primary',
-    cancelType: 'default',
+    cancelType: 'secondary',
-    rounded: false,
   };
 
   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"

ui/components/app/modal/modal.component.test.js

@@ -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');
   });
 

ui/components/app/modals/cancel-transaction/cancel-transaction.component.js

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

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

@@ -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')}

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

@@ -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');

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

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

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

@@ -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);

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

@@ -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')}?`}

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

@@ -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);

ui/components/app/modals/customize-nonce/customize-nonce.component.js

@@ -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"
     >

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

@@ -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}

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

@@ -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}

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

@@ -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)}

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

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

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

@@ -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(

ui/components/app/modals/qr-scanner/qr-scanner.component.js

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

ui/components/app/modals/reject-transactions/reject-transactions.component.js

@@ -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">

ui/components/app/modals/reject-transactions/reject-transactions.test.js

@@ -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');
 

ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js

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

ui/components/app/permission-page-container/permission-page-container.component.js

@@ -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>

ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js

@@ -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>

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -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) => {

ui/components/app/signature-request/signature-request-footer/index.scss

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

ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js

@@ -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>

ui/components/app/signature-request/signature-request.container.test.js

@@ -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);

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

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

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

@@ -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>

ui/components/app/transaction-list-item/transaction-list-item.component.js

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

ui/components/app/transaction-list/transaction-list.component.js

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

ui/components/app/whats-new-popup/whats-new-popup.js

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

ui/components/ui/button/button.component.js

@@ -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,

ui/components/ui/page-container/page-container-footer/page-container-footer.component.js

@@ -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',

ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js

@@ -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', () => {

ui/components/ui/page-container/page-container.component.js

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

ui/components/ui/truncated-definition-list/truncated-definition-list.js

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

ui/css/itcss/components/send.scss

@@ -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;

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js

@@ -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}

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -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) => {

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -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) => {

ui/pages/confirm-import-token/confirm-import-token.component.js

@@ -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={() => {

ui/pages/confirmation/components/confirmation-footer/confirmation-footer.js

@@ -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>

ui/pages/create-account/connect-hardware/account-list.js

@@ -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)}

ui/pages/create-account/import-account/json.js

@@ -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()}

ui/pages/create-account/import-account/private-key.js

@@ -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()}

ui/pages/create-account/new-account.component.js

@@ -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}

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

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

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

@@ -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');
 

ui/pages/keychains/index.scss

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

ui/pages/keychains/restore-vault.js

@@ -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}

ui/pages/keychains/reveal-seed.js

@@ -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)
           }

ui/pages/mobile-sync/mobile-sync.component.js

@@ -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()}

ui/pages/onboarding-flow/new-account/new-account.js

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

ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js

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

ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js

@@ -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={() => {

ui/pages/permissions-connect/choose-account/choose-account.component.js

@@ -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>

ui/pages/permissions-connect/choose-account/index.scss

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

ui/pages/permissions-connect/permissions-connect.stories.js

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

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

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

ui/pages/settings/contact-list-tab/contact-list-tab.component.js

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

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

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

ui/pages/settings/contact-list-tab/index.scss

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

ui/pages/settings/networks-tab/index.scss

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

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

@@ -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}
               >

ui/pages/settings/networks-tab/networks-tab.component.js

@@ -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('');

ui/pages/swaps/import-token/import-token.js

@@ -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>

ui/pages/swaps/searchable-item-list/item-list/item-list.component.js

@@ -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>
               )}

ui/pages/swaps/select-quote-popover/index.scss

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

ui/pages/swaps/select-quote-popover/select-quote-popover.js

@@ -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}
       >

ui/pages/swaps/swaps-footer/__snapshots__/swaps-footer.test.js.snap

@@ -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"

ui/pages/swaps/swaps-footer/swaps-footer.js

@@ -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,

ui/pages/unlock-page/index.scss

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

ui/pages/unlock-page/unlock-page.component.js

@@ -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 (