Improve styles of onboarding tooltip

1 files changed, 10 insertions, 7 deletions

diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1f88297de..cb542a386 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 } from 'polished';
+import { darken, grayscale } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
@@ -12,32 +12,34 @@ export interface ButtonProps {
     borderColor?: string;
     width?: string;
     type?: string;
+    isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, onClick, type, className }) => (
-    <button type={type} className={className} onClick={onClick}>
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
         {children}
     </button>
 );
 
 export const Button = styled(PlainButton)`
-    cursor: pointer;
+    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
+    transition: background-color 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;
     font-family: ${props => props.fontFamily};
     width: ${props => props.width};
-    background-color: ${props => props.backgroundColor};
+    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
-        background-color: ${props => darken(0.1, props.backgroundColor)};
+        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
     }
     &:active {
-        background-color: ${props => darken(0.2, props.backgroundColor)};
+        background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
     }
 `;
 
@@ -46,6 +48,7 @@ Button.defaultProps = {
     backgroundColor: colors.white,
     width: 'auto',
     fontFamily: 'Roboto',
+    isDisabled: false,
 };
 
 Button.displayName = 'Button';