Update confirm to use btn-primary (#6473)

* Update confirm to use btn-primary

* Remove console

* Fix e2e test

2 files changed, 7 insertions, 6 deletions

diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js
index b1ed8536e..9ef560556 100644
--- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js
@@ -123,7 +123,7 @@ describe('MetaMask', function () {
       })
 
       it('clicks the "I agree" option on the metametrics opt-in screen', async () => {
-        const optOutButton = await findElement(driver, By.css('.btn-confirm'))
+        const optOutButton = await findElement(driver, By.css('.btn-primary'))
         optOutButton.click()
         await delay(largeDelayMs)
       })
diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js
index 01d946927..39e81317c 100644
--- a/ui/app/components/ui/button/button.component.js
+++ b/ui/app/components/ui/button/button.component.js
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
 const CLASSNAME_SECONDARY = 'btn-secondary'
-const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_CONFIRM = 'btn-primary'
 const CLASSNAME_RAISED = 'btn-raised'
 const CLASSNAME_LARGE = 'btn--large'
 const CLASSNAME_FIRST_TIME = 'btn--first-time'
@@ -14,13 +14,14 @@ const typeHash = {
   default: CLASSNAME_DEFAULT,
   primary: CLASSNAME_PRIMARY,
   secondary: CLASSNAME_SECONDARY,
-  confirm: CLASSNAME_CONFIRM,
-  raised: CLASSNAME_RAISED,
-  'first-time': CLASSNAME_FIRST_TIME,
   warning: 'btn-warning',
   danger: 'btn-danger',
   'danger-primary': 'btn-danger-primary',
   link: 'btn-link',
+  // TODO: Legacy button type to be deprecated
+  confirm: CLASSNAME_CONFIRM,
+  raised: CLASSNAME_RAISED,
+  'first-time': CLASSNAME_FIRST_TIME,
 }
 
 export default class Button extends Component {
@@ -42,7 +43,7 @@ export default class Button extends Component {
       <button
         className={classnames(
           'button',
-          typeHash[type],
+          typeHash[type] || CLASSNAME_DEFAULT,
           large && CLASSNAME_LARGE,
           className
         )}