3 files changed, 188 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
new file mode 100644
index 000000000..754eca40e
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import { darken, saturate } from 'polished';
+import * as React from 'react';
+import styled from 'styled-components';
+
+/**
+ * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
+ * SEE: https://www.styled-components.com/docs/basics#coming-from-css
+ */
+export interface ButtonProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    width?: string;
+    padding?: string;
+    type?: string;
+    isDisabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+}
+
+const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
+    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
+        {children}
+    </button>
+);
+
+const darkenOnHoverAmount = 0.1;
+const darkenOnActiveAmount = 0.2;
+const saturateOnFocusAmount = 0.2;
+export const Button = styled(PlainButton)`
+    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
+    transition: background-color, opacity 0.5s ease;
+    padding: ${props => props.padding};
+    border-radius: 3px;
+    outline: none;
+    width: ${props => props.width};
+    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
+    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
+    &:hover {
+        background-color: ${props =>
+            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
+    }
+    &:active {
+        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
+    }
+    &:disabled {
+        opacity: 0.5;
+    }
+    &:focus {
+        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
+    }
+`;
+
+Button.defaultProps = {
+    backgroundColor: 'red',
+    width: 'auto',
+    isDisabled: false,
+    padding: '1em 2.2em',
+};
+Button.displayName = 'Button';
diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx
new file mode 100644
index 000000000..f2ae68b70
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/container.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+type StringOrNum = string | number;
+
+export type ContainerTag = 'div' | 'span';
+
+export interface ContainerProps {
+    marginTop?: StringOrNum;
+    marginBottom?: StringOrNum;
+    marginRight?: StringOrNum;
+    marginLeft?: StringOrNum;
+    padding?: StringOrNum;
+    paddingTop?: StringOrNum;
+    paddingBottom?: StringOrNum;
+    paddingRight?: StringOrNum;
+    paddingLeft?: StringOrNum;
+    backgroundColor?: string;
+    borderRadius?: StringOrNum;
+    maxWidth?: StringOrNum;
+    maxHeight?: StringOrNum;
+    width?: StringOrNum;
+    height?: StringOrNum;
+    minWidth?: StringOrNum;
+    minHeight?: StringOrNum;
+    isHidden?: boolean;
+    className?: string;
+    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
+    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    zIndex?: number;
+    Tag?: ContainerTag;
+    cursor?: string;
+    id?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = props => {
+    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+    const visibility = isHidden ? 'hidden' : undefined;
+    return (
+        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
+            {children}
+        </Tag>
+    );
+};
+
+Container.defaultProps = {
+    Tag: 'div',
+};
+
+Container.displayName = 'Container';
diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx
new file mode 100644
index 000000000..8e314beae
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/text.tsx
@@ -0,0 +1,74 @@
+import { colors } from '@0xproject/react-shared';
+import { darken } from 'polished';
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
+
+export interface TextProps {
+    className?: string;
+    Tag?: TextTag;
+    fontSize?: string;
+    fontFamily?: string;
+    fontStyle?: string;
+    fontColor?: string;
+    lineHeight?: string;
+    minHeight?: string;
+    center?: boolean;
+    fontWeight?: number | string;
+    textDecorationLine?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
+    noWrap?: boolean;
+    display?: string;
+}
+
+const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
+    <Tag className={className} onClick={onClick}>
+        {children}
+    </Tag>
+);
+
+export const Text = styled(PlainText)`
+    font-family: ${props => props.fontFamily};
+    font-style: ${props => props.fontStyle};
+    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};
+    ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')};
+    ${props => (props.onClick ? 'cursor: pointer' : '')};
+    transition: color 0.5s ease;
+    ${props => (props.noWrap ? 'white-space: nowrap' : '')};
+    ${props => (props.display ? `display: ${props.display}` : '')};
+    &:hover {
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')};
+    }
+`;
+
+Text.defaultProps = {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontColor: colors.black,
+    fontSize: '15px',
+    lineHeight: '1.5em',
+    textDecorationLine: 'none',
+    Tag: 'div',
+    noWrap: false,
+};
+
+Text.displayName = 'Text';
+
+export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />;
+
+Title.defaultProps = {
+    Tag: 'h2',
+    fontSize: '20px',
+    fontWeight: 600,
+    fontColor: colors.black,
+};
+
+Title.displayName = 'Title';