Update button style

src/components/base/Button/index.js

@@ -5,6 +5,8 @@ import styled from 'styled-components'
 import { space, fontSize, fontWeight, color } from 'styled-system'
 import noop from 'lodash/noop'
 
+import { darken, lighten } from 'styles/helpers'
+
 import Box from 'components/base/Box'
 import Icon from 'components/base/Icon'
 
@@ -14,11 +16,19 @@ const Base = styled.button`
   ${fontSize};
   ${fontWeight};
   border-radius: 5px;
-  border: ${p => (p.primary ? '' : `1px solid ${p.theme.colors.fog}`)};
+  border: ${p =>
+    p.primary ? 'none' : `2px solid ${p.disabled ? 'transparent' : p.theme.colors.grey}`};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: 40px;
-  box-shadow: ${p => (p.withShadow ? 'rgba(0, 0, 0, 0.2) 0 3px 10px' : '')};
   outline: none;
+
+  &:hover {
+    background: ${p => (p.primary ? lighten(p.theme.colors.wallet, 0.05) : '')};
+  }
+
+  &:active {
+    background: ${p => (p.primary ? darken(p.theme.colors.wallet, 0.1) : '')};
+  }
 `
 
 type Props = {
@@ -33,6 +43,7 @@ function getProps({ disabled, icon, primary }: Object) {
   const props = (predicate, props, defaults = {}) => (predicate ? props : defaults)
 
   return {
+    color: 'grey',
     ...props(
       icon,
       {
@@ -49,7 +60,6 @@ function getProps({ disabled, icon, primary }: Object) {
       {
         color: 'white',
         bg: 'wallet',
-        withShadow: true,
       },
       {
         bg: 'transparent',
@@ -58,12 +68,13 @@ function getProps({ disabled, icon, primary }: Object) {
     ...props(disabled, {
       color: 'white',
       bg: 'fog',
-      withShadow: false,
     }),
   }
 }
 
-const Button = ({ children, onClick, primary, icon, disabled, ...props }: Props) => {
+const Button = (props: Props) => {
+  const { onClick, primary, icon, disabled } = props
+  let { children } = props
   children = icon ? (
     <Box alignItems="center" justifyContent="center">
       <Icon name={icon} />

src/components/base/Button/stories.js

@@ -2,10 +2,51 @@
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import styled from 'styled-components'
 
 import Button from 'components/base/Button'
 
 const stories = storiesOf('Components/Button', module)
 
-stories.add('basic', () => <Button>{'Do some action'}</Button>)
-stories.add('primary', () => <Button primary>{'Validate'}</Button>)
+const Th = styled.th`
+  padding: 20px;
+`
+
+const Td = styled.td`
+  padding: 20px;
+  min-width: 150px;
+`
+
+stories.add('all', () => (
+  <table border={1}>
+    <thead>
+      <tr>
+        <Th />
+        <Th>normal</Th>
+        <Th>disabled</Th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <Td>normal</Td>
+        <Td>
+          <Button>Normal button</Button>
+        </Td>
+        <Td>
+          <Button disabled>Normal button</Button>
+        </Td>
+      </tr>
+      <tr>
+        <Td>primary</Td>
+        <Td>
+          <Button primary>Primary button</Button>
+        </Td>
+        <Td>
+          <Button primary disabled>
+            Primary button
+          </Button>
+        </Td>
+      </tr>
+    </tbody>
+  </table>
+))

src/styles/helpers.js

@@ -11,6 +11,16 @@ export const rgba = (c: string, a: number) =>
     .rgb()
     .toString()
 
+export const darken = (c: string, a: number) =>
+  Color(c)
+    .darken(a)
+    .toString()
+
+export const lighten = (c: string, a: number) =>
+  Color(c)
+    .lighten(a)
+    .toString()
+
 export const ff = (v: string) => {
   const [font, type = 'Regular'] = v.split('|')
   const { style, weight } = fontFamilies[font][type]