8 files changed, 75 insertions, 9 deletions
diff --git a/packages/website/ts/components/ui/account_connection.tsx b/packages/website/ts/components/ui/account_connection.tsx
new file mode 100644
index 000000000..6d0b90922
--- /dev/null
+++ b/packages/website/ts/components/ui/account_connection.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { AccountState } from 'ts/types';
+
+export interface AccountConnectionProps {
+    accountState: AccountState;
+    injectedProviderName: string;
+}
+
+export const AccountConnection: React.StatelessComponent<AccountConnectionProps> = ({
+    accountState,
+    injectedProviderName,
+}) => {
+    return (
+        <Container className="flex items-center">
+            <Circle diameter={6} fillColor={getInjectedProviderColor(accountState)} />
+            <Container marginLeft="6px">
+                <Text fontSize="12px" lineHeight="14px" fontColor={colors.darkGrey}>
+                    {injectedProviderName}
+                </Text>
+            </Container>
+        </Container>
+    );
+};
+
+const getInjectedProviderColor = (accountState: AccountState) => {
+    switch (accountState) {
+        case AccountState.Ready:
+            return colors.limeGreen;
+        case AccountState.Locked:
+        case AccountState.Loading:
+        case AccountState.Disconnected:
+        default:
+            return colors.red;
+    }
+};
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,21 +14,29 @@ const appearFromBottomFrames = keyframes`
         position: fixed;
         bottom: -500px;
         left: 0px;
+        right: 0px;
     }
 
     to {
         position: fixed;
         bottom: 0px;
         left: 0px;
+        right: 0px;
     }
 `;
 
+const stylesForAnimation: { [K in AnimationType]: string } = {
+    // Needed for safari
+    easeUpFromBottom: `position: fixed`,
+};
+
 const animations: { [K in AnimationType]: string } = {
     easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
 };
 
 export const Animation = styled(PlainAnimation)`
     animation: ${props => animations[props.type]};
+    ${props => stylesForAnimation[props.type]};
 `;
 
 Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 02fa47480..1489a74a6 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -37,7 +37,7 @@ export const Button = styled(PlainButton)`
     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) : '')};
+        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important;
     }
     &:active {
         background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx
new file mode 100644
index 000000000..75103d066
--- /dev/null
+++ b/packages/website/ts/components/ui/circle.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface CircleProps {
+    className?: string;
+    diameter: number;
+    fillColor: string;
+}
+
+export const Circle: React.StatelessComponent<CircleProps> = ({ className, diameter, fillColor }) => {
+    const radius = diameter / 2;
+    return (
+        <svg className={className} height={diameter} width={diameter}>
+            <circle cx={radius} cy={radius} r={radius} fill={fillColor} />
+        </svg>
+    );
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index a747ef01f..fb718d731 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -14,7 +14,9 @@ export interface ContainerProps {
     backgroundColor?: string;
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
+    maxHeight?: StringOrNum;
     width?: StringOrNum;
+    height?: StringOrNum;
     minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index cc1655962..b5b374973 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -2,6 +2,7 @@ import blockies = require('blockies');
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { Circle } from 'ts/components/ui/circle';
 import { Image } from 'ts/components/ui/image';
 import { colors } from 'ts/style/colors';
 
@@ -20,7 +21,6 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
     public render(): React.ReactNode {
         const address = this.props.address;
         const diameter = this.props.diameter;
-        const radius = diameter / 2;
         return (
             <div
                 className="circle relative transitionFix"
@@ -40,9 +40,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
                         width={diameter}
                     />
                 ) : (
-                    <svg height={diameter} width={diameter}>
-                        <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} />
-                    </svg>
+                    <Circle diameter={diameter} fillColor={colors.grey200} />
                 )}
             </div>
         );
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index 8b126a6d5..da26317de 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { zIndex } from 'ts/style/z_index';
 
 export interface OverlayProps {
-    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: () => void;
 }
@@ -19,7 +18,7 @@ const style: React.CSSProperties = {
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
 };
 
-export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+export const Overlay: React.StatelessComponent<OverlayProps> = props => (
     <div style={{ ...style, ...props.style }} onClick={props.onClick}>
         {props.children}
     </div>
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index 1e2a123b7..c1cb2ade4 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -15,7 +15,8 @@ export interface TextProps {
     minHeight?: string;
     center?: boolean;
     fontWeight?: number | string;
-    onClick?: () => void;
+    textDecorationLine?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -28,6 +29,7 @@ export const Text = styled(PlainText)`
     font-family: ${props => props.fontFamily};
     font-weight: ${props => props.fontWeight};
     font-size: ${props => props.fontSize};
+    text-decoration-line: ${props => props.textDecorationLine};
     ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')};
     ${props => (props.center ? 'text-align: center' : '')};
     color: ${props => props.fontColor};
@@ -35,7 +37,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     &:hover {
-        ${props => (props.onClick ? `color: ${darken(0.1, props.fontColor)}` : '')};
+        ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
     }
 `;
 
@@ -45,6 +47,7 @@ Text.defaultProps = {
     fontColor: colors.black,
     fontSize: '15px',
     lineHeight: '1.5em',
+    textDecorationLine: 'none',
     Tag: 'div',
 };