1 files changed, 41 insertions, 2 deletions

diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 7eab2a50f..778f59f27 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,11 +1,15 @@
 import { TextAlignProperty } from 'csstype';
+import { darken } from 'polished';
 import * as React from 'react';
 
+import { styled } from 'ts/style/theme';
+
 type StringOrNum = string | number;
 
 export type ContainerTag = 'div' | 'span';
 
 export interface ContainerProps {
+    margin?: string;
     marginTop?: StringOrNum;
     marginBottom?: StringOrNum;
     marginRight?: StringOrNum;
@@ -17,10 +21,14 @@ export interface ContainerProps {
     paddingLeft?: StringOrNum;
     backgroundColor?: string;
     background?: string;
+    border?: string;
+    borderTop?: string;
     borderRadius?: StringOrNum;
     borderBottomLeftRadius?: StringOrNum;
     borderBottomRightRadius?: StringOrNum;
     borderBottom?: StringOrNum;
+    borderColor?: string;
+    children?: React.ReactNode;
     maxWidth?: StringOrNum;
     maxHeight?: StringOrNum;
     width?: StringOrNum;
@@ -37,15 +45,32 @@ export interface ContainerProps {
     right?: string;
     bottom?: string;
     zIndex?: number;
+    float?: 'right' | 'left';
     Tag?: ContainerTag;
     cursor?: string;
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+    overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible';
+    shouldDarkenOnHover?: boolean;
+    hasBoxShadow?: boolean;
+    shouldAddBoxShadowOnHover?: boolean;
 }
 
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+export const PlainContainer: React.StatelessComponent<ContainerProps> = props => {
+    const {
+        children,
+        className,
+        Tag,
+        isHidden,
+        id,
+        onClick,
+        shouldDarkenOnHover,
+        shouldAddBoxShadowOnHover,
+        hasBoxShadow,
+        // tslint:disable-next-line:trailing-comma
+        ...style
+    } = props;
     const visibility = isHidden ? 'hidden' : undefined;
     return (
         <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
@@ -54,6 +79,20 @@ export const Container: React.StatelessComponent<ContainerProps> = props => {
     );
 };
 
+const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)';
+
+export const Container = styled(PlainContainer)`
+    box-sizing: border-box;
+    ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')};
+    &:hover {
+        ${props =>
+            props.shouldDarkenOnHover
+                ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important`
+                : ''};
+        ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')};
+    }
+`;
+
 Container.defaultProps = {
     Tag: 'div',
 };