Add stuff

This commit is contained in:
Fabio Berger 2018-10-10 17:22:31 +02:00
parent 6c0d317380
commit fb882b0c77
14 changed files with 936 additions and 43 deletions

View File

@ -16,9 +16,12 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@0xproject/react-shared": "^1.0.15",
"basscss": "^8.0.3", "basscss": "^8.0.3",
"bowser": "^1.9.3",
"less": "^2.7.2", "less": "^2.7.2",
"lodash": "^4.17.5", "lodash": "^4.17.5",
"polished": "^1.9.2",
"react": "^16.4.2", "react": "^16.4.2",
"react-document-title": "^2.0.3", "react-document-title": "^2.0.3",
"react-dom": "^16.4.2", "react-dom": "^16.4.2",
@ -33,6 +36,7 @@
"@types/react-helmet": "^5.0.6", "@types/react-helmet": "^5.0.6",
"@types/react-router-dom": "^4.0.4", "@types/react-router-dom": "^4.0.4",
"@types/react-tap-event-plugin": "0.0.30", "@types/react-tap-event-plugin": "0.0.30",
"@types/styled-components": "^4.0.0",
"awesome-typescript-loader": "^5.2.1", "awesome-typescript-loader": "^5.2.1",
"copyfiles": "^2.0.0", "copyfiles": "^2.0.0",
"css-loader": "0.23.x", "css-loader": "0.23.x",

View File

@ -0,0 +1,85 @@
/* Custom Basscss Responsive Utilities */
@media (max-width: 52em) {
.sm-center {
text-align: center;
}
.sm-align-middle {
vertical-align: middle;
}
.sm-align-top {
vertical-align: top;
}
.sm-left-align {
text-align: left;
}
.sm-right-align {
text-align: right;
}
.sm-table-cell {
display: table-cell;
}
.sm-mx-auto {
margin-left: auto;
margin-right: auto;
}
.sm-right {
float: right;
}
}
@media (min-width: 52em) {
.md-center {
text-align: center;
}
.md-align-middle {
vertical-align: middle;
}
.md-align-top {
vertical-align: top;
}
.md-left-align {
text-align: left;
}
.md-right-align {
text-align: right;
}
.md-table-cell {
display: table-cell;
}
.md-mx-auto {
margin-left: auto;
margin-right: auto;
}
.md-right {
float: right;
}
}
@media (min-width: 64em) {
.lg-center {
text-align: center;
}
.lg-align-middle {
vertical-align: middle;
}
.lg-align-top {
vertical-align: top;
}
.lg-left-align {
text-align: left;
}
.lg-right-align {
text-align: right;
}
.lg-table-cell {
display: table-cell;
}
.lg-mx-auto {
margin-left: auto;
margin-right: auto;
}
.lg-right {
float: right;
}
}

View File

@ -0,0 +1,453 @@
/* Basscss Responsive Margin */
@media (max-width: 52em) {
/* Modified by Fabio Berger to max-width from min-width */
.sm-m0 {
margin: 0;
}
.sm-mt0 {
margin-top: 0;
}
.sm-mr0 {
margin-right: 0;
}
.sm-mb0 {
margin-bottom: 0;
}
.sm-ml0 {
margin-left: 0;
}
.sm-mx0 {
margin-left: 0;
margin-right: 0;
}
.sm-my0 {
margin-top: 0;
margin-bottom: 0;
}
.sm-m1 {
margin: 0.5rem;
}
.sm-mt1 {
margin-top: 0.5rem;
}
.sm-mr1 {
margin-right: 0.5rem;
}
.sm-mb1 {
margin-bottom: 0.5rem;
}
.sm-ml1 {
margin-left: 0.5rem;
}
.sm-mx1 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.sm-my1 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.sm-m2 {
margin: 1rem;
}
.sm-mt2 {
margin-top: 1rem;
}
.sm-mr2 {
margin-right: 1rem;
}
.sm-mb2 {
margin-bottom: 1rem;
}
.sm-ml2 {
margin-left: 1rem;
}
.sm-mx2 {
margin-left: 1rem;
margin-right: 1rem;
}
.sm-my2 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.sm-m3 {
margin: 2rem;
}
.sm-mt3 {
margin-top: 2rem;
}
.sm-mr3 {
margin-right: 2rem;
}
.sm-mb3 {
margin-bottom: 2rem;
}
.sm-ml3 {
margin-left: 2rem;
}
.sm-mx3 {
margin-left: 2rem;
margin-right: 2rem;
}
.sm-my3 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.sm-m4 {
margin: 4rem;
}
.sm-mt4 {
margin-top: 4rem;
}
.sm-mr4 {
margin-right: 4rem;
}
.sm-mb4 {
margin-bottom: 4rem;
}
.sm-ml4 {
margin-left: 4rem;
}
.sm-mx4 {
margin-left: 4rem;
margin-right: 4rem;
}
.sm-my4 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.sm-mxn1 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.sm-mxn2 {
margin-left: -1rem;
margin-right: -1rem;
}
.sm-mxn3 {
margin-left: -2rem;
margin-right: -2rem;
}
.sm-mxn4 {
margin-left: -4rem;
margin-right: -4rem;
}
.sm-ml-auto {
margin-left: auto;
}
.sm-mr-auto {
margin-right: auto;
}
.sm-mx-auto {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 52em) {
.md-m0 {
margin: 0;
}
.md-mt0 {
margin-top: 0;
}
.md-mr0 {
margin-right: 0;
}
.md-mb0 {
margin-bottom: 0;
}
.md-ml0 {
margin-left: 0;
}
.md-mx0 {
margin-left: 0;
margin-right: 0;
}
.md-my0 {
margin-top: 0;
margin-bottom: 0;
}
.md-m1 {
margin: 0.5rem;
}
.md-mt1 {
margin-top: 0.5rem;
}
.md-mr1 {
margin-right: 0.5rem;
}
.md-mb1 {
margin-bottom: 0.5rem;
}
.md-ml1 {
margin-left: 0.5rem;
}
.md-mx1 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.md-my1 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.md-m2 {
margin: 1rem;
}
.md-mt2 {
margin-top: 1rem;
}
.md-mr2 {
margin-right: 1rem;
}
.md-mb2 {
margin-bottom: 1rem;
}
.md-ml2 {
margin-left: 1rem;
}
.md-mx2 {
margin-left: 1rem;
margin-right: 1rem;
}
.md-my2 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.md-m3 {
margin: 2rem;
}
.md-mt3 {
margin-top: 2rem;
}
.md-mr3 {
margin-right: 2rem;
}
.md-mb3 {
margin-bottom: 2rem;
}
.md-ml3 {
margin-left: 2rem;
}
.md-mx3 {
margin-left: 2rem;
margin-right: 2rem;
}
.md-my3 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.md-m4 {
margin: 4rem;
}
.md-mt4 {
margin-top: 4rem;
}
.md-mr4 {
margin-right: 4rem;
}
.md-mb4 {
margin-bottom: 4rem;
}
.md-ml4 {
margin-left: 4rem;
}
.md-mx4 {
margin-left: 4rem;
margin-right: 4rem;
}
.md-my4 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.md-mxn1 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.md-mxn2 {
margin-left: -1rem;
margin-right: -1rem;
}
.md-mxn3 {
margin-left: -2rem;
margin-right: -2rem;
}
.md-mxn4 {
margin-left: -4rem;
margin-right: -4rem;
}
.md-ml-auto {
margin-left: auto;
}
.md-mr-auto {
margin-right: auto;
}
.md-mx-auto {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 64em) {
.lg-m0 {
margin: 0;
}
.lg-mt0 {
margin-top: 0;
}
.lg-mr0 {
margin-right: 0;
}
.lg-mb0 {
margin-bottom: 0;
}
.lg-ml0 {
margin-left: 0;
}
.lg-mx0 {
margin-left: 0;
margin-right: 0;
}
.lg-my0 {
margin-top: 0;
margin-bottom: 0;
}
.lg-m1 {
margin: 0.5rem;
}
.lg-mt1 {
margin-top: 0.5rem;
}
.lg-mr1 {
margin-right: 0.5rem;
}
.lg-mb1 {
margin-bottom: 0.5rem;
}
.lg-ml1 {
margin-left: 0.5rem;
}
.lg-mx1 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.lg-my1 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.lg-m2 {
margin: 1rem;
}
.lg-mt2 {
margin-top: 1rem;
}
.lg-mr2 {
margin-right: 1rem;
}
.lg-mb2 {
margin-bottom: 1rem;
}
.lg-ml2 {
margin-left: 1rem;
}
.lg-mx2 {
margin-left: 1rem;
margin-right: 1rem;
}
.lg-my2 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.lg-m3 {
margin: 2rem;
}
.lg-mt3 {
margin-top: 2rem;
}
.lg-mr3 {
margin-right: 2rem;
}
.lg-mb3 {
margin-bottom: 2rem;
}
.lg-ml3 {
margin-left: 2rem;
}
.lg-mx3 {
margin-left: 2rem;
margin-right: 2rem;
}
.lg-my3 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.lg-m4 {
margin: 4rem;
}
.lg-mt4 {
margin-top: 4rem;
}
.lg-mr4 {
margin-right: 4rem;
}
.lg-mb4 {
margin-bottom: 4rem;
}
.lg-ml4 {
margin-left: 4rem;
}
.lg-mx4 {
margin-left: 4rem;
margin-right: 4rem;
}
.lg-my4 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.lg-mxn1 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.lg-mxn2 {
margin-left: -1rem;
margin-right: -1rem;
}
.lg-mxn3 {
margin-left: -2rem;
margin-right: -2rem;
}
.lg-mxn4 {
margin-left: -4rem;
margin-right: -4rem;
}
.lg-ml-auto {
margin-left: auto;
}
.lg-mr-auto {
margin-right: auto;
}
.lg-mx-auto {
margin-left: auto;
margin-right: auto;
}
}

View File

@ -0,0 +1,134 @@
/* Basscss Responsive Padding */
/* Modified by Fabio Berger to include xs prefix */
@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
.sm-p0 { padding: 0 }
.sm-pt0 { padding-top: 0 }
.sm-pr0 { padding-right: 0 }
.sm-pb0 { padding-bottom: 0 }
.sm-pl0 { padding-left: 0 }
.sm-px0 { padding-left: 0; padding-right: 0 }
.sm-py0 { padding-top: 0; padding-bottom: 0 }
.sm-p1 { padding: .5rem }
.sm-pt1 { padding-top: .5rem }
.sm-pr1 { padding-right: .5rem }
.sm-pb1 { padding-bottom: .5rem }
.sm-pl1 { padding-left: .5rem }
.sm-px1 { padding-left: .5rem; padding-right: .5rem }
.sm-py1 { padding-top: .5rem; padding-bottom: .5rem }
.sm-p2 { padding: 1rem }
.sm-pt2 { padding-top: 1rem }
.sm-pr2 { padding-right: 1rem }
.sm-pb2 { padding-bottom: 1rem }
.sm-pl2 { padding-left: 1rem }
.sm-px2 { padding-left: 1rem; padding-right: 1rem }
.sm-py2 { padding-top: 1rem; padding-bottom: 1rem }
.sm-p3 { padding: 2rem }
.sm-pt3 { padding-top: 2rem }
.sm-pr3 { padding-right: 2rem }
.sm-pb3 { padding-bottom: 2rem }
.sm-pl3 { padding-left: 2rem }
.sm-px3 { padding-left: 2rem; padding-right: 2rem }
.sm-py3 { padding-top: 2rem; padding-bottom: 2rem }
.sm-p4 { padding: 4rem }
.sm-pt4 { padding-top: 4rem }
.sm-pr4 { padding-right: 4rem }
.sm-pb4 { padding-bottom: 4rem }
.sm-pl4 { padding-left: 4rem }
.sm-px4 { padding-left: 4rem; padding-right: 4rem }
.sm-py4 { padding-top: 4rem; padding-bottom: 4rem }
}
@media (min-width: 52em) {
.md-p0 { padding: 0 }
.md-pt0 { padding-top: 0 }
.md-pr0 { padding-right: 0 }
.md-pb0 { padding-bottom: 0 }
.md-pl0 { padding-left: 0 }
.md-px0 { padding-left: 0; padding-right: 0 }
.md-py0 { padding-top: 0; padding-bottom: 0 }
.md-p1 { padding: .5rem }
.md-pt1 { padding-top: .5rem }
.md-pr1 { padding-right: .5rem }
.md-pb1 { padding-bottom: .5rem }
.md-pl1 { padding-left: .5rem }
.md-px1 { padding-left: .5rem; padding-right: .5rem }
.md-py1 { padding-top: .5rem; padding-bottom: .5rem }
.md-p2 { padding: 1rem }
.md-pt2 { padding-top: 1rem }
.md-pr2 { padding-right: 1rem }
.md-pb2 { padding-bottom: 1rem }
.md-pl2 { padding-left: 1rem }
.md-px2 { padding-left: 1rem; padding-right: 1rem }
.md-py2 { padding-top: 1rem; padding-bottom: 1rem }
.md-p3 { padding: 2rem }
.md-pt3 { padding-top: 2rem }
.md-pr3 { padding-right: 2rem }
.md-pb3 { padding-bottom: 2rem }
.md-pl3 { padding-left: 2rem }
.md-px3 { padding-left: 2rem; padding-right: 2rem }
.md-py3 { padding-top: 2rem; padding-bottom: 2rem }
.md-p4 { padding: 4rem }
.md-pt4 { padding-top: 4rem }
.md-pr4 { padding-right: 4rem }
.md-pb4 { padding-bottom: 4rem }
.md-pl4 { padding-left: 4rem }
.md-px4 { padding-left: 4rem; padding-right: 4rem }
.md-py4 { padding-top: 4rem; padding-bottom: 4rem }
}
@media (min-width: 64em) {
.lg-p0 { padding: 0 }
.lg-pt0 { padding-top: 0 }
.lg-pr0 { padding-right: 0 }
.lg-pb0 { padding-bottom: 0 }
.lg-pl0 { padding-left: 0 }
.lg-px0 { padding-left: 0; padding-right: 0 }
.lg-py0 { padding-top: 0; padding-bottom: 0 }
.lg-p1 { padding: .5rem }
.lg-pt1 { padding-top: .5rem }
.lg-pr1 { padding-right: .5rem }
.lg-pb1 { padding-bottom: .5rem }
.lg-pl1 { padding-left: .5rem }
.lg-px1 { padding-left: .5rem; padding-right: .5rem }
.lg-py1 { padding-top: .5rem; padding-bottom: .5rem }
.lg-p2 { padding: 1rem }
.lg-pt2 { padding-top: 1rem }
.lg-pr2 { padding-right: 1rem }
.lg-pb2 { padding-bottom: 1rem }
.lg-pl2 { padding-left: 1rem }
.lg-px2 { padding-left: 1rem; padding-right: 1rem }
.lg-py2 { padding-top: 1rem; padding-bottom: 1rem }
.lg-p3 { padding: 2rem }
.lg-pt3 { padding-top: 2rem }
.lg-pr3 { padding-right: 2rem }
.lg-pb3 { padding-bottom: 2rem }
.lg-pl3 { padding-left: 2rem }
.lg-px3 { padding-left: 2rem; padding-right: 2rem }
.lg-py3 { padding-top: 2rem; padding-bottom: 2rem }
.lg-p4 { padding: 4rem }
.lg-pt4 { padding-top: 4rem }
.lg-pr4 { padding-right: 4rem }
.lg-pb4 { padding-bottom: 4rem }
.lg-pl4 { padding-left: 4rem }
.lg-px4 { padding-left: 4rem; padding-right: 4rem }
.lg-py4 { padding-top: 4rem; padding-bottom: 4rem }
}

View File

@ -0,0 +1,35 @@
/* Basscss Responsive Type Scale */
/* Modified by Fabio Berger to include xs prefix */
@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
.sm-h00 { font-size: 4rem }
.sm-h0 { font-size: 3rem }
.sm-h1 { font-size: 2rem }
.sm-h2 { font-size: 1.5rem }
.sm-h3 { font-size: 1.25rem }
.sm-h4 { font-size: 1rem }
.sm-h5 { font-size: .875rem }
.sm-h6 { font-size: .75rem }
}
@media (min-width: 52em) {
.md-h00 { font-size: 4rem }
.md-h0 { font-size: 3rem }
.md-h1 { font-size: 2rem }
.md-h2 { font-size: 1.5rem }
.md-h3 { font-size: 1.25rem }
.md-h4 { font-size: 1rem }
.md-h5 { font-size: .875rem }
.md-h6 { font-size: .75rem }
}
@media (min-width: 64em) {
.lg-h00 { font-size: 4rem }
.lg-h0 { font-size: 3rem }
.lg-h1 { font-size: 2rem }
.lg-h2 { font-size: 1.5rem }
.lg-h3 { font-size: 1.25rem }
.lg-h4 { font-size: 1rem }
.lg-h5 { font-size: .875rem }
.lg-h6 { font-size: .75rem }
}

View File

@ -12,6 +12,10 @@
<title>0x: The Protocol for Trading Tokens</title> <title>0x: The Protocol for Trading Tokens</title>
<link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="/css/basscss_responsive_custom.css">
<link rel="stylesheet" href="/css/basscss_responsive_padding.css">
<link rel="stylesheet" href="/css/basscss_responsive_margin.css">
<link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
</head> </head>
<body style="margin: 0px; min-width: 355px;"> <body style="margin: 0px; min-width: 355px;">

View File

@ -0,0 +1,60 @@
import { darken, saturate } from 'polished';
import * as React from 'react';
import styled from 'styled-components';
import { Container } from './container';
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.theme[props.backgroundColor] : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
&:hover {
background-color: ${props =>
!props.isDisabled
? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
: ''} !important;
}
&:active {
background-color: ${props =>
!props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
opacity: 0.5;
}
&:focus {
background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
`;
Button.defaultProps = {
backgroundColor: 'black',
width: 'auto',
isDisabled: false,
padding: '1em 2.2em',
};
Button.displayName = 'Button';

View File

@ -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';

View File

@ -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';

View File

@ -1,7 +1,9 @@
import * as React from 'react'; import * as React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { MetaTags } from 'ts/components/meta_tags'; import { MetaTags } from 'ts/components/meta_tags';
import { Landing } from 'ts/pages/landing/landing'; import { Landing } from 'ts/pages/landing';
import 'basscss/css/basscss.css';
const DOCUMENT_TITLE = ''; const DOCUMENT_TITLE = '';
const DOCUMENT_DESCRIPTION = ''; const DOCUMENT_DESCRIPTION = '';

View File

@ -1,6 +1,9 @@
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as React from 'react'; import * as React from 'react';
import { Button } from '../components/ui/button';
import { Container } from '../components/ui/container';
interface LandingProps {} interface LandingProps {}
interface LandingState {} interface LandingState {}
@ -10,6 +13,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
super(props); super(props);
} }
public render(): React.ReactNode { public render(): React.ReactNode {
return <div id="landing" className="clearfix" />; return (
<Container id="landing" className="clearfix">
<Button>Click me!</Button>
</Container>
);
} }
} }

View File

@ -5,13 +5,14 @@
"outDir": "./transpiled/", "outDir": "./transpiled/",
"jsx": "react", "jsx": "react",
"baseUrl": "./", "baseUrl": "./",
"allowJs": true,
"strictNullChecks": false,
"noImplicitThis": false,
// tsconfig.json at the monorepo root contains some options required for // tsconfig.json at the monorepo root contains some options required for
// project references which do not work for website. We override those // project references which do not work for website. We override those
// options here. // options here.
"declaration": false, "declaration": false,
"declarationMap": false, "declarationMap": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"composite": false, "composite": false,
"paths": { "paths": {
"*": ["node_modules/@types/*", "*"] "*": ["node_modules/@types/*", "*"]

View File

@ -39,6 +39,15 @@ const config = {
test: /\.md$/, test: /\.md$/,
use: 'raw-loader', use: 'raw-loader',
}, },
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
], ],
}, },
optimization: { optimization: {

View File

@ -1316,6 +1316,13 @@
version "0.2.1" version "0.2.1"
resolved "https://registry.npmjs.org/@types/solidity-parser-antlr/-/solidity-parser-antlr-0.2.1.tgz#29ff386773a72a06c8a9c40c666d2a1cea53c2ed" resolved "https://registry.npmjs.org/@types/solidity-parser-antlr/-/solidity-parser-antlr-0.2.1.tgz#29ff386773a72a06c8a9c40c666d2a1cea53c2ed"
"@types/styled-components@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.0.tgz#33b47071885003878a62689e0883aa2fc59f970a"
dependencies:
"@types/node" "*"
"@types/react" "*"
"@types/tmp@^0.0.33": "@types/tmp@^0.0.33":
version "0.0.33" version "0.0.33"
resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d"
@ -1599,10 +1606,6 @@ aes-js@^0.2.3:
version "0.2.4" version "0.2.4"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d"
aes-js@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
ajv-errors@^1.0.0: ajv-errors@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59" resolved "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
@ -3003,7 +3006,7 @@ bs-logger@0.x:
dependencies: dependencies:
fast-json-stable-stringify "^2.0.0" fast-json-stable-stringify "^2.0.0"
bs58@=4.0.1, bs58@^4.0.0: bs58@=4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
dependencies: dependencies:
@ -3026,14 +3029,6 @@ bs58check@^1.0.8:
bs58 "^3.1.0" bs58 "^3.1.0"
create-hash "^1.1.0" create-hash "^1.1.0"
bs58check@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
dependencies:
bs58 "^4.0.0"
create-hash "^1.1.0"
safe-buffer "^5.1.2"
bser@^2.0.0: bser@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@ -5588,19 +5583,6 @@ ethereumjs-wallet@0.6.0:
utf8 "^2.1.1" utf8 "^2.1.1"
uuid "^2.0.1" uuid "^2.0.1"
ethereumjs-wallet@~0.6.0:
version "0.6.2"
resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
dependencies:
aes-js "^3.1.1"
bs58check "^2.1.2"
ethereumjs-util "^5.2.0"
hdkey "^1.0.0"
safe-buffer "^5.1.2"
scrypt.js "^0.2.0"
utf8 "^3.0.0"
uuid "^3.3.2"
ethers@3.0.22: ethers@3.0.22:
version "3.0.22" version "3.0.22"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436" resolved "https://registry.yarnpkg.com/ethers/-/ethers-3.0.22.tgz#7fab1ea16521705837aa43c15831877b2716b436"
@ -6408,7 +6390,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep:
ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default"
ethereumjs-util "^5.2.0" ethereumjs-util "^5.2.0"
ethereumjs-vm "2.3.5" ethereumjs-vm "2.3.5"
ethereumjs-wallet "~0.6.0" ethereumjs-wallet "0.6.0"
fake-merkle-patricia-tree "~1.0.1" fake-merkle-patricia-tree "~1.0.1"
heap "~0.2.6" heap "~0.2.6"
js-scrypt "^0.2.0" js-scrypt "^0.2.0"
@ -7095,14 +7077,6 @@ hdkey@^0.7.0, hdkey@^0.7.1:
coinstring "^2.0.0" coinstring "^2.0.0"
secp256k1 "^3.0.1" secp256k1 "^3.0.1"
hdkey@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
dependencies:
coinstring "^2.0.0"
safe-buffer "^5.1.1"
secp256k1 "^3.0.1"
he@1.1.1: he@1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
@ -15197,10 +15171,6 @@ utf8@^2.1.1:
version "2.1.2" version "2.1.2"
resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
utf8@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
util-deprecate@~1.0.1: util-deprecate@~1.0.1:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"