Update Button component

components/Button.js

@@ -1,39 +1,62 @@
 import React from 'react'
+
 import { COLORS } from '../lib/constants'
 
-export default props => (
+const Button = ({
-  <button
+  onClick = () => {},
-    onClick={props.onClick}
+  className = '',
-    style={{
+  background = COLORS.BLACK,
-      ...props.style,
+  color = COLORS.SECONDARY,
-      background: COLORS.BLACK,
+  hoverBackground = COLORS.HOVER,
-      color: props.color,
+  hoverColor,
-      boxShadow: `inset 0px 0px 0px ${props.selected ? 2 : 1}px ${props.color}`,
+  disabled,
-      border: 'none'
+  notAllowed,
-    }}
+  selected,
-    disabled={props.disabled}
+  title,
-  >
+  children,
-    <span>{props.title}</span>
+  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%;
+          border: none;
-          padding: 0 16px;
+          padding: ${padding};
-          border-radius: 3px;
+          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 {
+        .button-title {
-          font-size: 14px;
+          font-size: ${large ? '14px' : '12px'};
-          line-height: 1;
         }
       `}
     </style>
   </button>
 )
+
+export default Button