Merge branch 'v2-prototype' into refactor/check-revert-reasons

* v2-prototype: (40 commits)
  Use make-promises-safe as a preloader instead of manually importing
  Updated compiler runs to be 1,000,000
  Add event to setSignatureValidatorApproval, rename signer => signerAddress accross all contracts
  Add senderAddress to Fill and Cancel logs, add comments to events and types
  Fix Island component
  Add missing image assets for Chris and Mel
  Fix some bugs in sol-cov
  Remove unreachable PreSigned check
  Fix linting
  Buttons look hella disabled now
  Remove border radius, fix width issue for unlock step
  Add Chris and Mel to about page
  fix linter issues
  only call getLocationByOffset if source if defined
  Set settleOrder and settleMatchedOrders to private
  Prevent prettier issue
  Support mobile friendly onboarding flows
  Removed MixinSettlement. Moved `settleOrder` into `MixinExchangeCore` and `settleMatchedOrders` into `MixinMatchOrders`
  Migrations after rebasing
  Linter
  ...

1 files changed, 12 insertions, 4 deletions

diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index cb542a386..02fa47480 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -1,5 +1,5 @@
 import { colors } from '@0xproject/react-shared';
-import { darken, grayscale } from 'polished';
+import { darken, saturate } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
@@ -17,7 +17,7 @@ export interface ButtonProps {
 }
 
 const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
         {children}
     </button>
 );
@@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
     cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
-    transition: background-color 0.5s ease;
+    transition: background-color, opacity 0.5s ease;
     padding: 0.8em 2.2em;
     border-radius: 6px;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
+    outline: none;
     font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
+    background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
         background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
@@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
     &:active {
         background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
     }
+    &:disabled {
+        opacity: 0.5;
+        box-shadow: none;
+    }
+    &:focus {
+        background-color: ${props => saturate(0.2, props.backgroundColor)};
+    }
 `;
 
 Button.defaultProps = {