From 7a5145135c8bf0c71246e83231fcc72ba60b044f Mon Sep 17 00:00:00 2001
From: raboid <sean@dawnlabs.io>
Date: Mon, 7 Jan 2019 17:35:01 -0500
Subject: [PATCH] Update Button component

---
 components/Button.js | 65 ++++++++++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/components/Button.js b/components/Button.js
index 761d789..885b429 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -1,39 +1,62 @@
 import React from 'react'
+
 import { COLORS } from '../lib/constants'
 
-export default props => (
-  <button
-    onClick={props.onClick}
-    style={{
-      ...props.style,
-      background: COLORS.BLACK,
-      color: props.color,
-      boxShadow: `inset 0px 0px 0px ${props.selected ? 2 : 1}px ${props.color}`,
-      border: 'none'
-    }}
-    disabled={props.disabled}
-  >
-    <span>{props.title}</span>
+const Button = ({
+  onClick = () => {},
+  className = '',
+  background = COLORS.BLACK,
+  color = COLORS.SECONDARY,
+  hoverBackground = COLORS.HOVER,
+  hoverColor,
+  disabled,
+  notAllowed,
+  selected,
+  title,
+  children,
+  border,
+  center,
+  large,
+  style = {},
+  flex = 1,
+  padding = 0,
+  margin = 0
+}) => (
+  <button onClick={onClick} className={className} disabled={disabled || notAllowed} style={style}>
+    {title && <span className="button-title">{title}</span>}
+    {children}
     <style jsx>
       {`
         button {
-          cursor: pointer;
+          display: flex;
+          flex: ${flex};
+          background-color: ${background};
+          color: ${color};
+          box-shadow: ${border ? `inset 0px 0px 0px ${selected ? 2 : 1}px ${color}` : 'initial'};
+          cursor: ${notAllowed ? 'not-allowed' : 'pointer'};
           outline: none;
-          height: 100%;
-          padding: 0 16px;
-          border-radius: 3px;
+          border: none;
+          padding: ${padding};
+          margin: ${margin};
+          border-radius: ${border ? '3px' : 0};
           user-select: none;
+          justify-content: ${center ? 'center' : 'initial'};
+          align-items: ${center ? 'center' : 'initial'};
+          align-self: stretch;
+          font-size: ${large ? '14px' : '12px'};
         }
 
         button:hover {
-          background: ${COLORS.HOVER} !important;
+          background-color: ${hoverBackground} !important;
+          color: ${hoverColor || color};
         }
 
-        button > span {
-          font-size: 14px;
-          line-height: 1;
+        .button-title {
+          font-size: ${large ? '14px' : '12px'};
         }
       `}
     </style>
   </button>
 )
+
+export default Button