5 files changed, 61 insertions, 20 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
new file mode 100644
index 000000000..136f3d005
--- /dev/null
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { keyframes, styled } from 'ts/style/theme';
+
+export type AnimationType = 'easeUpFromBottom';
+
+export interface AnimationProps {
+    type: AnimationType;
+}
+
+const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />;
+
+const appearFromBottomFrames = keyframes`
+    from {
+        position: fixed;
+        bottom: -500px;
+        left: 0px;
+    }
+
+    to {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+    }
+`;
+
+const animations: { [K in AnimationType]: string } = {
+    easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
+};
+
+export const Animation = styled(PlainAnimation)`
+    animation: ${props => animations[props.type]};
+`;
+
+Animation.displayName = 'Animation';
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 = {
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 1776345da..a747ef01f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     width?: StringOrNum;
+    minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
@@ -23,6 +24,7 @@ export interface ContainerProps {
     left?: string;
     right?: string;
     bottom?: string;
+    zIndex?: number;
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index 30df995c8..cc1655962 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -23,7 +23,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
         const radius = diameter / 2;
         return (
             <div
-                className="circle mx-auto relative transitionFix"
+                className="circle relative transitionFix"
                 style={{
                     width: diameter,
                     height: diameter,
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index de90b664f..c8abfb7e0 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -1,31 +1,28 @@
 import * as React from 'react';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 
 export interface IslandProps {
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     className?: string;
     Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+    borderRadius?: string;
 }
 
-const defaultStyle: React.CSSProperties = {
-    backgroundColor: colors.white,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderTopLeftRadius: 10,
-    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-    overflow: 'hidden',
-};
-
-export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
-    <props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
-        {props.children}
-    </props.Component>
+const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, style, className, children }) => (
+    <Component style={style} className={className} children={children} />
 );
 
+export const Island = styled(PlainIsland)`
+    background-color: ${colors.white};
+    border-radius: ${props => props.borderRadius};
+    box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
+    overflow: hidden;
+`;
+
 Island.defaultProps = {
     Component: 'div',
+    borderRadius: '10px',
     style: {},
 };