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

3 years ago · 68259ee3e2
parent 68d7ff73c5
commit 68259ee3e2
90 changed files with 122 additions and 144 deletions
--- a/test/e2e/metamask-ui.spec.js
+++ b/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);
    });

--- a/test/e2e/tests/custom-rpc-history.spec.js
+++ b/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.
--- a/test/e2e/tests/from-import-ui.spec.js
+++ b/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(
--- a/test/e2e/tests/incremental-security.spec.js
+++ b/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(
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/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">
--- a/ui/components/app/account-menu/account-menu.test.js
+++ b/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);
    });

--- a/ui/components/app/account-menu/index.scss
+++ b/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 {
--- a/ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.scss
+++ b/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 {
--- a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
+++ b/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')}
--- a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
+++ b/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 {
--- a/ui/components/app/app-components.scss
+++ b/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'
--- a/ui/components/app/cancel-button/cancel-button.js
+++ b/ui/components/app/cancel-button/cancel-button.js
@ -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}
    >
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/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>}
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/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 && (
--- a/ui/components/app/home-notification/index.scss
+++ b/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;
--- a/ui/components/app/loading-network-screen/index.scss
+++ b/ui/components/app/loading-network-screen/index.scss
@ -0,0 +1,6 @@
+.loading-overlay__error-buttons {
+  button {
+    margin: 5px;
+    padding: 5px 30px;
+  }
+}
--- a/ui/components/app/loading-network-screen/loading-network-screen.component.js
+++ b/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();
--- a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
+++ b/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%',
--- a/ui/components/app/modal/modal.component.js
+++ b/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',
-    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"
--- a/ui/components/app/modal/modal.component.test.js
+++ b/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');
  });

--- a/ui/components/app/modals/cancel-transaction/cancel-transaction.component.js
+++ b/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>
--- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
+++ b/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')}
--- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js
+++ b/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');
--- a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/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()}
--- a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js
+++ b/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);
--- a/ui/components/app/modals/confirm-reset-account/confirm-reset-account.component.js
+++ b/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')}?`}
--- a/ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js
+++ b/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);
--- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js
+++ b/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"
    >
--- a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js
+++ b/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}
--- a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
+++ b/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}
--- a/ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js
+++ b/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)}
--- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ b/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>
--- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js
+++ b/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(
--- a/ui/components/app/modals/qr-scanner/qr-scanner.component.js
+++ b/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"
        />
      </>
    );
--- a/ui/components/app/modals/reject-transactions/reject-transactions.component.js
+++ b/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">
--- a/ui/components/app/modals/reject-transactions/reject-transactions.test.js
+++ b/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');

--- a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js
+++ b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js
@ -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);
--- a/ui/components/app/permission-page-container/permission-page-container.component.js
+++ b/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>
--- a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
+++ b/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>
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/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) => {
--- a/ui/components/app/signature-request/signature-request-footer/index.scss
+++ b/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 {
--- a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
+++ b/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>
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/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);
--- a/ui/components/app/transaction-list-item-details/index.scss
+++ b/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;
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/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>
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@ -122,8 +122,7 @@ export default function TransactionListItem({
    }
    return (
      <Button
-        type="secondary"
-        rounded
+        type="primary"
        onClick={hasCancelled ? cancelTransaction : retryTransaction}
        style={hasCancelled ? { width: 'auto' } : null}
      >
--- a/ui/components/app/transaction-list/transaction-list.component.js
+++ b/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')}
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/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}
--- a/ui/components/ui/button/button.component.js
+++ b/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,
--- a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.js
+++ b/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',
--- a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
+++ b/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', () => {
--- a/ui/components/ui/page-container/page-container.component.js
+++ b/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>
--- a/ui/components/ui/truncated-definition-list/truncated-definition-list.js
+++ b/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
--- a/ui/css/itcss/components/send.scss
+++ b/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;
--- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/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}
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/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) => {
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/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) => {
--- a/ui/pages/confirm-import-token/confirm-import-token.component.js
+++ b/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={() => {
--- a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.js
+++ b/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>
--- a/ui/pages/create-account/connect-hardware/account-list.js
+++ b/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)}
--- a/ui/pages/create-account/import-account/json.js
+++ b/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()}
--- a/ui/pages/create-account/import-account/private-key.js
+++ b/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()}
--- a/ui/pages/create-account/new-account.component.js
+++ b/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}
--- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ b/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">
--- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js
+++ b/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');

--- a/ui/pages/keychains/index.scss
+++ b/ui/pages/keychains/index.scss
@ -185,3 +185,8 @@
    padding-top: 5px;
  }
 }
+
+.page-container__footer-single-button {
+  width: 40%;
+  margin: 8px auto;
+}
--- a/ui/pages/keychains/restore-vault.js
+++ b/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}
--- a/ui/pages/keychains/reveal-seed.js
+++ b/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)
          }
--- a/ui/pages/mobile-sync/mobile-sync.component.js
+++ b/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()}
--- a/ui/pages/onboarding-flow/new-account/new-account.js
+++ b/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>
--- a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
+++ b/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={() => {
--- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
+++ b/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={() => {
--- a/ui/pages/permissions-connect/choose-account/choose-account.component.js
+++ b/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>
--- a/ui/pages/permissions-connect/choose-account/index.scss
+++ b/ui/pages/permissions-connect/choose-account/index.scss
@ -179,7 +179,7 @@
      width: 124px;
    }

-    .btn-default {
+    .btn-secondary {
      background: white;
      margin-left: 16px;
    }
--- a/ui/pages/permissions-connect/permissions-connect.stories.js
+++ b/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>
--- a/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
+++ b/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>
    );
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/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);
          }}
--- a/ui/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
+++ b/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>
    );
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/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;
--- a/ui/pages/settings/networks-tab/index.scss
+++ b/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;
    }

--- a/ui/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/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}
              >
--- a/ui/pages/settings/networks-tab/networks-tab.component.js
+++ b/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('');
--- a/ui/pages/swaps/import-token/import-token.js
+++ b/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>
--- a/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
+++ b/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>
              )}
--- a/ui/pages/swaps/select-quote-popover/index.scss
+++ b/ui/pages/swaps/select-quote-popover/index.scss
@ -2,7 +2,6 @@

 .select-quote-popover {
  &__button {
-    border-radius: 100px;
    height: 39px;
    width: 140px;
  }
--- a/ui/pages/swaps/select-quote-popover/select-quote-popover.js
+++ b/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}
      >
--- a/ui/pages/swaps/swaps-footer/snapshots/swaps-footer.test.js.snap
+++ b/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"
--- a/ui/pages/swaps/swaps-footer/swaps-footer.js
+++ b/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,
--- a/ui/pages/unlock-page/index.scss
+++ b/ui/pages/unlock-page/index.scss
@ -41,6 +41,7 @@

    button {
      font-weight: bold;
+      border-radius: 100px;
    }
  }

--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/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 (