From 68259ee3e261986f24261bff37b1fb298ac7aea9 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Tue, 5 Oct 2021 15:20:42 -0400
Subject: [PATCH] UX Papercuts Epic: Create a consistent representation of the
 Buttons (#12096)

---
 test/e2e/metamask-ui.spec.js                           |  2 +-
 test/e2e/tests/custom-rpc-history.spec.js              |  6 +++---
 test/e2e/tests/from-import-ui.spec.js                  |  2 +-
 test/e2e/tests/incremental-security.spec.js            |  2 +-
 .../app/account-menu/account-menu.component.js         |  5 +++--
 ui/components/app/account-menu/account-menu.test.js    |  3 ++-
 ui/components/app/account-menu/index.scss              |  6 +++---
 .../invalid-custom-network-alert.scss                  |  1 -
 .../unconnected-account-alert.js                       |  1 -
 .../unconnected-account-alert.scss                     |  1 -
 ui/components/app/app-components.scss                  |  1 +
 ui/components/app/cancel-button/cancel-button.js       |  5 ++---
 .../confirm-page-container-content.component.js        |  1 -
 .../confirm-page-container.component.js                |  1 -
 ui/components/app/home-notification/index.scss         |  2 --
 ui/components/app/loading-network-screen/index.scss    |  6 ++++++
 .../loading-network-screen.component.js                |  2 +-
 .../metamask-template-renderer.stories.js              |  2 --
 ui/components/app/modal/modal.component.js             |  9 ++-------
 ui/components/app/modal/modal.component.test.js        | 10 +++++-----
 .../cancel-transaction/cancel-transaction.component.js |  1 -
 .../confirm-delete-network.component.js                |  2 +-
 .../confirm-delete-network.test.js                     |  4 ++--
 .../confirm-remove-account.component.js                |  1 -
 .../confirm-remove-account.test.js                     |  4 ++--
 .../confirm-reset-account.component.js                 |  2 +-
 .../confirm-reset-account.test.js                      |  6 ++++--
 .../customize-nonce/customize-nonce.component.js       |  3 ---
 .../edit-approval-permission.component.js              |  1 -
 .../export-private-key-modal.component.js              |  6 +++---
 .../hide-token-confirmation-modal.js                   |  4 ++--
 .../metametrics-opt-in-modal.component.js              |  1 -
 .../metametrics-opt-in-modal.test.js                   |  4 +++-
 .../app/modals/qr-scanner/qr-scanner.component.js      |  1 -
 .../reject-transactions.component.js                   |  1 -
 .../reject-transactions/reject-transactions.test.js    |  4 ++--
 .../transaction-confirmed.test.js                      |  4 +---
 .../permission-page-container.component.js             |  1 -
 .../recovery-phrase-reminder.js                        |  2 +-
 .../signature-request-original.component.js            |  4 ++--
 .../signature-request-footer/index.scss                |  1 -
 .../signature-request-footer.component.js              |  2 +-
 .../signature-request.container.test.js                |  2 +-
 .../app/transaction-list-item-details/index.scss       |  7 ++++++-
 .../transaction-list-item-details.component.js         |  4 ++--
 .../transaction-list-item.component.js                 |  3 +--
 .../app/transaction-list/transaction-list.component.js |  1 -
 ui/components/app/whats-new-popup/whats-new-popup.js   |  1 -
 ui/components/ui/button/button.component.js            |  6 +++---
 .../page-container-footer.component.js                 |  4 ++--
 .../page-container-footer.component.test.js            |  2 +-
 .../ui/page-container/page-container.component.js      |  1 -
 .../truncated-definition-list.js                       |  1 -
 ui/css/itcss/components/send.scss                      |  3 ++-
 .../confirm-add-suggested-token.component.js           |  4 ++--
 .../confirm-decrypt-message.component.js               |  4 ++--
 .../confirm-encryption-public-key.component.js         |  4 ++--
 .../confirm-import-token.component.js                  |  4 ++--
 .../confirmation-footer/confirmation-footer.js         |  4 ++--
 .../create-account/connect-hardware/account-list.js    |  2 +-
 ui/pages/create-account/import-account/json.js         |  4 ++--
 ui/pages/create-account/import-account/private-key.js  |  4 ++--
 ui/pages/create-account/new-account.component.js       |  4 ++--
 .../metametrics-opt-in/metametrics-opt-in.component.js |  1 -
 .../metametrics-opt-in/metametrics-opt-in.test.js      |  2 +-
 ui/pages/keychains/index.scss                          |  5 +++++
 ui/pages/keychains/restore-vault.js                    |  2 +-
 ui/pages/keychains/reveal-seed.js                      |  8 ++++----
 ui/pages/mobile-sync/mobile-sync.component.js          |  8 ++++----
 ui/pages/onboarding-flow/new-account/new-account.js    |  1 -
 .../recovery-phrase/confirm-recovery-phrase.js         |  1 -
 .../recovery-phrase/review-recovery-phrase.js          |  2 --
 .../choose-account/choose-account.component.js         |  2 +-
 ui/pages/permissions-connect/choose-account/index.scss |  2 +-
 .../permissions-connect/permissions-connect.stories.js |  1 -
 .../add-contact/add-contact.component.js               |  1 -
 .../contact-list-tab/contact-list-tab.component.js     |  1 -
 .../edit-contact/edit-contact.component.js             |  1 -
 ui/pages/settings/contact-list-tab/index.scss          |  1 -
 ui/pages/settings/networks-tab/index.scss              |  4 ++--
 .../network-form/network-form.component.js             |  4 ++--
 .../settings/networks-tab/networks-tab.component.js    |  2 +-
 ui/pages/swaps/import-token/import-token.js            |  4 +---
 .../item-list/item-list.component.js                   |  2 +-
 ui/pages/swaps/select-quote-popover/index.scss         |  1 -
 .../swaps/select-quote-popover/select-quote-popover.js |  4 ++--
 .../__snapshots__/swaps-footer.test.js.snap            |  4 ++--
 ui/pages/swaps/swaps-footer/swaps-footer.js            |  1 -
 ui/pages/unlock-page/index.scss                        |  1 +
 ui/pages/unlock-page/unlock-page.component.js          |  4 ++--
 90 files changed, 122 insertions(+), 144 deletions(-)
 create mode 100644 ui/components/app/loading-network-screen/index.scss

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 74ea431f2..3f57d00ae 100644
--- 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);
     });
 
diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js
index 08a2bdd31..078cb124f 100644
--- 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.
diff --git a/test/e2e/tests/from-import-ui.spec.js b/test/e2e/tests/from-import-ui.spec.js
index 176b51e48..a7fba5982 100644
--- 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(
diff --git a/test/e2e/tests/incremental-security.spec.js b/test/e2e/tests/incremental-security.spec.js
index 185a0d8c0..f6e5e5066 100644
--- 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(
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 41c809be8..c391a08aa 100644
--- 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">
diff --git a/ui/components/app/account-menu/account-menu.test.js b/ui/components/app/account-menu/account-menu.test.js
index fc715ead1..501c187dd 100644
--- 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);
     });
 
diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss
index 8f1f5c8c8..18059a7e8 100644
--- 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 {
diff --git 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
index de7010883..a1a170466 100644
--- 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 {
diff --git a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js b/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
index 1b887bba4..cbcac50eb 100644
--- 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')}
diff --git a/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss b/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.scss
index 11c12f420..cedd14617 100644
--- 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 {
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index aabadf245..d76c2998f 100644
--- 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'
diff --git a/ui/components/app/cancel-button/cancel-button.js b/ui/components/app/cancel-button/cancel-button.js
index bef23f98c..0efce2212 100644
--- 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}
     >
diff --git 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
index 0ab2af228..030cb14f2 100644
--- 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>}
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js
index 491235122..397fc7ff0 100644
--- 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 && (
diff --git a/ui/components/app/home-notification/index.scss b/ui/components/app/home-notification/index.scss
index 8d522a0e4..62a556fbb 100644
--- 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;
diff --git a/ui/components/app/loading-network-screen/index.scss b/ui/components/app/loading-network-screen/index.scss
new file mode 100644
index 000000000..95039f422
--- /dev/null
+++ b/ui/components/app/loading-network-screen/index.scss
@@ -0,0 +1,6 @@
+.loading-overlay__error-buttons {
+  button {
+    margin: 5px;
+    padding: 5px 30px;
+  }
+}
diff --git a/ui/components/app/loading-network-screen/loading-network-screen.component.js b/ui/components/app/loading-network-screen/loading-network-screen.component.js
index 7f2f2df48..0b3f05229 100644
--- 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();
diff --git a/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js b/ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
index 030f20af3..a877f33d7 100644
--- 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%',
diff --git a/ui/components/app/modal/modal.component.js b/ui/components/app/modal/modal.component.js
index 3ad24196b..14335c634 100644
--- 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"
diff --git a/ui/components/app/modal/modal.component.test.js b/ui/components/app/modal/modal.component.test.js
index 31fb1ce8a..646c9b11a 100644
--- 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');
   });
 
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction.component.js b/ui/components/app/modals/cancel-transaction/cancel-transaction.component.js
index 9b436f7d9..f98ce7c7b 100644
--- 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>
diff --git 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
index a8be936a5..74b48bb85 100644
--- 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')}
diff --git 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
index 701f01a84..64d6689d5 100644
--- 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');
diff --git 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
index e7bfd69cd..891e40f87 100644
--- 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()}
diff --git 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
index da59aeffa..f55fec4be 100644
--- 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);
diff --git 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
index c4e5a9a17..f9c4fe8fb 100644
--- 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')}?`}
diff --git 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
index 9dd3b40f7..eda960772 100644
--- 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);
diff --git a/ui/components/app/modals/customize-nonce/customize-nonce.component.js b/ui/components/app/modals/customize-nonce/customize-nonce.component.js
index d2cacc816..91357d89e 100644
--- 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"
     >
diff --git 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
index 2e100353f..b6cfec569 100644
--- 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}
diff --git 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
index ba6e4ca8b..ae378f3ce 100644
--- 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}
diff --git 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
index 934ca70d0..2c0965ebf 100644
--- 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)}
diff --git 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
index 9daf60e56..847a57bf6 100644
--- 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>
diff --git 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
index 7b90b24ff..ff6650652 100644
--- 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(
diff --git a/ui/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/components/app/modals/qr-scanner/qr-scanner.component.js
index fac593717..610c2631b 100644
--- 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"
         />
       </>
     );
diff --git a/ui/components/app/modals/reject-transactions/reject-transactions.component.js b/ui/components/app/modals/reject-transactions/reject-transactions.component.js
index 3bb4cd9d9..6ef0daa91 100644
--- 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">
diff --git a/ui/components/app/modals/reject-transactions/reject-transactions.test.js b/ui/components/app/modals/reject-transactions/reject-transactions.test.js
index 043f9bab7..e8ec7a7b5 100644
--- 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');
 
diff --git a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js
index 84111a9ee..0e1658242 100644
--- 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);
diff --git a/ui/components/app/permission-page-container/permission-page-container.component.js b/ui/components/app/permission-page-container/permission-page-container.component.js
index a8378f746..2a8daa2f6 100644
--- 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>
diff --git a/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js b/ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js
index 1b8b66ba3..23dd36442 100644
--- 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>
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index c999cf282..41312296c 100644
--- 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) => {
diff --git a/ui/components/app/signature-request/signature-request-footer/index.scss b/ui/components/app/signature-request/signature-request-footer/index.scss
index b0c07f0b1..b1470d3e3 100644
--- 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 {
diff --git 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
index c0a08812b..0ca254079 100644
--- 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>
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js
index c0bc03540..0eb4a6deb 100644
--- 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);
diff --git a/ui/components/app/transaction-list-item-details/index.scss b/ui/components/app/transaction-list-item-details/index.scss
index 4ad7cd094..27a64f2e9 100644
--- 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;
diff --git 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
index 75f637e4d..a940cfcaa 100644
--- 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>
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 4f7210d16..88227e7d0 100644
--- 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}
       >
diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js
index 7a86e1513..2660be340 100644
--- 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')}
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js
index 9b944135a..06233371a 100644
--- 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}
diff --git a/ui/components/ui/button/button.component.js b/ui/components/ui/button/button.component.js
index c994bb311..97c7bdd23 100644
--- 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,
diff --git 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
index cc5384817..4bc576f50 100644
--- 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',
diff --git 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
index c24fcd372..0cf5d6f93 100644
--- 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', () => {
diff --git a/ui/components/ui/page-container/page-container.component.js b/ui/components/ui/page-container/page-container.component.js
index 28b5f75b0..a7bee1fe6 100644
--- 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>
diff --git a/ui/components/ui/truncated-definition-list/truncated-definition-list.js b/ui/components/ui/truncated-definition-list/truncated-definition-list.js
index 2382b045b..f7354cffd 100644
--- 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
diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss
index 9874b09ab..ef44990cd 100644
--- 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;
diff --git 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
index ec8d163aa..5e222c002 100644
--- 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}
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index 7f4d5e0ff..29455db4e 100644
--- 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) => {
diff --git 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
index 3be8d21ff..cf31ee051 100644
--- 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) => {
diff --git a/ui/pages/confirm-import-token/confirm-import-token.component.js b/ui/pages/confirm-import-token/confirm-import-token.component.js
index 5b6a9a95a..b64baacec 100644
--- 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={() => {
diff --git a/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.js b/ui/pages/confirmation/components/confirmation-footer/confirmation-footer.js
index 9574a13a4..7a73d42b7 100644
--- 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>
diff --git a/ui/pages/create-account/connect-hardware/account-list.js b/ui/pages/create-account/connect-hardware/account-list.js
index 96a31bd05..29922fcd2 100644
--- 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)}
diff --git a/ui/pages/create-account/import-account/json.js b/ui/pages/create-account/import-account/json.js
index 1aa35c493..bd14d6a2e 100644
--- 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()}
diff --git a/ui/pages/create-account/import-account/private-key.js b/ui/pages/create-account/import-account/private-key.js
index 507fb09f6..08495cf23 100644
--- 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()}
diff --git a/ui/pages/create-account/new-account.component.js b/ui/pages/create-account/new-account.component.js
index 252eb2821..112b6ba08 100644
--- 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}
diff --git 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
index 2ba9a4648..97ba3cd47 100644
--- 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">
diff --git 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
index 4a83441b0..5f60c8d37 100644
--- 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');
 
diff --git a/ui/pages/keychains/index.scss b/ui/pages/keychains/index.scss
index a38d6a5ab..2ad54763a 100644
--- 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;
+}
diff --git a/ui/pages/keychains/restore-vault.js b/ui/pages/keychains/restore-vault.js
index a8ba320ca..96d260911 100644
--- 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}
diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js
index f9ac0c105..ea3005a9a 100644
--- 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)
           }
diff --git a/ui/pages/mobile-sync/mobile-sync.component.js b/ui/pages/mobile-sync/mobile-sync.component.js
index bb61df1ae..45f37a2ff 100644
--- 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()}
diff --git a/ui/pages/onboarding-flow/new-account/new-account.js b/ui/pages/onboarding-flow/new-account/new-account.js
index 2eb351ff8..cc6ebed7e 100644
--- 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>
diff --git a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
index 52d3926e1..2828b5fd7 100644
--- 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={() => {
diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
index 78f8437dc..fae50a3f1 100644
--- 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={() => {
diff --git a/ui/pages/permissions-connect/choose-account/choose-account.component.js b/ui/pages/permissions-connect/choose-account/choose-account.component.js
index 8e245e62e..d4fc98216 100644
--- 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>
diff --git a/ui/pages/permissions-connect/choose-account/index.scss b/ui/pages/permissions-connect/choose-account/index.scss
index d02f5136b..4fcd11e70 100644
--- 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;
     }
diff --git a/ui/pages/permissions-connect/permissions-connect.stories.js b/ui/pages/permissions-connect/permissions-connect.stories.js
index 6eff21540..87af63ee2 100644
--- 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>
diff --git 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
index 6ce7f06f0..3ed6296d6 100644
--- 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>
     );
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
index 2f4b135f0..0f315517f 100644
--- 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);
           }}
diff --git 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
index 51419b302..0f64dfa15 100644
--- 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>
     );
diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss
index 4084afa0f..8f00641b6 100644
--- 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;
diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss
index 40a182264..d8da8cf79 100644
--- 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;
     }
 
diff --git a/ui/pages/settings/networks-tab/network-form/network-form.component.js b/ui/pages/settings/networks-tab/network-form/network-form.component.js
index e2968001d..2e722031e 100644
--- 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}
               >
diff --git a/ui/pages/settings/networks-tab/networks-tab.component.js b/ui/pages/settings/networks-tab/networks-tab.component.js
index f42591dd6..a7ab9e24a 100644
--- 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('');
diff --git a/ui/pages/swaps/import-token/import-token.js b/ui/pages/swaps/import-token/import-token.js
index 9be183878..88a0645a8 100644
--- 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>
diff --git 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
index 13ee5afa8..d74b50460 100644
--- 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>
               )}
diff --git a/ui/pages/swaps/select-quote-popover/index.scss b/ui/pages/swaps/select-quote-popover/index.scss
index ad305a3f8..e2a3a2cc7 100644
--- 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;
   }
diff --git a/ui/pages/swaps/select-quote-popover/select-quote-popover.js b/ui/pages/swaps/select-quote-popover/select-quote-popover.js
index c3efcba48..c4f9e8977 100644
--- 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}
       >
diff --git a/ui/pages/swaps/swaps-footer/__snapshots__/swaps-footer.test.js.snap b/ui/pages/swaps/swaps-footer/__snapshots__/swaps-footer.test.js.snap
index 3edd2af66..410501e81 100644
--- 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"
diff --git a/ui/pages/swaps/swaps-footer/swaps-footer.js b/ui/pages/swaps/swaps-footer/swaps-footer.js
index faefa85db..18192bfe1 100644
--- 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,
diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss
index 4ffd8d24a..aaad02b85 100644
--- 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;
     }
   }
 
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index 32935696f..907cda27c 100644
--- 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 (