Change btn-secondary styles to btn-default. Make btn-secondary red warning style buttons

2 files changed, 29 insertions, 13 deletions

diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index fe3bf363c..e8e798445 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -2,20 +2,15 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-const SECONDARY = 'secondary'
+const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
-const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
 const CLASSNAME_SECONDARY = 'btn-secondary'
-const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+const CLASSNAME_LARGE = 'btn--large'
 
-const getClassName = (type, large = false) => {
-  let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
-
-  if (large) {
-    output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
-  }
-
-  return output
+const typeHash = {
+  default: CLASSNAME_DEFAULT,
+  primary: CLASSNAME_PRIMARY,
+  secondary: CLASSNAME_SECONDARY,
 }
 
 class Button extends Component {
@@ -24,7 +19,11 @@ class Button extends Component {
 
     return (
       <button
-        className={classnames(getClassName(type, large), className)}
+        className={classnames(
+          typeHash[type],
+          large && CLASSNAME_LARGE,
+          className
+        )}
         { ...buttonProps }
       >
         { this.props.children }
diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js
index d1e14e869..dec084a25 100644
--- a/ui/app/components/button/button.stories.js
+++ b/ui/app/components/button/button.stories.js
@@ -13,13 +13,21 @@ storiesOf('Button', module)
       {text('text', 'Click me')}
     </Button>
   )
-  .add('secondary', () => (
+  .add('secondary', () =>
     <Button
       onClick={action('clicked')}
       type="secondary"
     >
       {text('text', 'Click me')}
     </Button>
+  )
+  .add('default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+    >
+      {text('text', 'Click me')}
+    </Button>
   ))
   .add('large primary', () => (
     <Button
@@ -39,3 +47,12 @@ storiesOf('Button', module)
       {text('text', 'Click me')}
     </Button>
   ))
+  .add('large default', () => (
+    <Button
+      onClick={action('clicked')}
+      type="default"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))