aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/package.json4
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_custom.css85
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_margin.css453
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_padding.css134
-rw-r--r--packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css35
-rw-r--r--packages/dev-tools-pages/public/index.html4
-rw-r--r--packages/dev-tools-pages/ts/components/ui/button.tsx60
-rw-r--r--packages/dev-tools-pages/ts/components/ui/container.tsx55
-rw-r--r--packages/dev-tools-pages/ts/components/ui/text.tsx74
-rw-r--r--packages/dev-tools-pages/ts/index.tsx4
-rw-r--r--packages/dev-tools-pages/ts/pages/landing.tsx (renamed from packages/dev-tools-pages/ts/pages/landing/landing.tsx)9
-rw-r--r--packages/dev-tools-pages/tsconfig.json5
-rw-r--r--packages/dev-tools-pages/webpack.config.js9
13 files changed, 927 insertions, 4 deletions
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json
index 436f2f5b1..f73260544 100644
--- a/packages/dev-tools-pages/package.json
+++ b/packages/dev-tools-pages/package.json
@@ -16,9 +16,12 @@
},
"license": "Apache-2.0",
"dependencies": {
+ "@0xproject/react-shared": "^1.0.15",
"basscss": "^8.0.3",
+ "bowser": "^1.9.3",
"less": "^2.7.2",
"lodash": "^4.17.5",
+ "polished": "^1.9.2",
"react": "^16.4.2",
"react-document-title": "^2.0.3",
"react-dom": "^16.4.2",
@@ -33,6 +36,7 @@
"@types/react-helmet": "^5.0.6",
"@types/react-router-dom": "^4.0.4",
"@types/react-tap-event-plugin": "0.0.30",
+ "@types/styled-components": "^4.0.0",
"awesome-typescript-loader": "^5.2.1",
"copyfiles": "^2.0.0",
"css-loader": "0.23.x",
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
new file mode 100644
index 000000000..5f8bd9117
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_custom.css
@@ -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;
+ }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
new file mode 100644
index 000000000..c9f3e855c
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_margin.css
@@ -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;
+ }
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
new file mode 100644
index 000000000..e027c2d65
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_padding.css
@@ -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 }
+
+}
diff --git a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
new file mode 100644
index 000000000..cae23b4e7
--- /dev/null
+++ b/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css
@@ -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 }
+}
diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html
index 5137eed95..f62d7b255 100644
--- a/packages/dev-tools-pages/public/index.html
+++ b/packages/dev-tools-pages/public/index.html
@@ -12,6 +12,10 @@
<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-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>
<body style="margin: 0px; min-width: 355px;">
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..7b2e33141
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/ui/button.tsx
@@ -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';
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';
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
index f4db2ea3c..4591c6d76 100644
--- a/packages/dev-tools-pages/ts/index.tsx
+++ b/packages/dev-tools-pages/ts/index.tsx
@@ -1,7 +1,9 @@
import * as React from 'react';
import { render } from 'react-dom';
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_DESCRIPTION = '';
diff --git a/packages/dev-tools-pages/ts/pages/landing/landing.tsx b/packages/dev-tools-pages/ts/pages/landing.tsx
index a6cb89a7b..e89cfa665 100644
--- a/packages/dev-tools-pages/ts/pages/landing/landing.tsx
+++ b/packages/dev-tools-pages/ts/pages/landing.tsx
@@ -1,6 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
+import { Button } from '../components/ui/button';
+import { Container } from '../components/ui/container';
+
interface LandingProps {}
interface LandingState {}
@@ -10,6 +13,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
super(props);
}
public render(): React.ReactNode {
- return <div id="landing" className="clearfix" />;
+ return (
+ <Container id="landing" className="clearfix">
+ <Button>Click me!</Button>
+ </Container>
+ );
}
}
diff --git a/packages/dev-tools-pages/tsconfig.json b/packages/dev-tools-pages/tsconfig.json
index f5d4f62c2..6421cd459 100644
--- a/packages/dev-tools-pages/tsconfig.json
+++ b/packages/dev-tools-pages/tsconfig.json
@@ -5,13 +5,14 @@
"outDir": "./transpiled/",
"jsx": "react",
"baseUrl": "./",
+ "allowJs": true,
+ "strictNullChecks": false,
+ "noImplicitThis": false,
// tsconfig.json at the monorepo root contains some options required for
// project references which do not work for website. We override those
// options here.
"declaration": false,
"declarationMap": false,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
"composite": false,
"paths": {
"*": ["node_modules/@types/*", "*"]
diff --git a/packages/dev-tools-pages/webpack.config.js b/packages/dev-tools-pages/webpack.config.js
index 1df41212f..6dfcf74e7 100644
--- a/packages/dev-tools-pages/webpack.config.js
+++ b/packages/dev-tools-pages/webpack.config.js
@@ -39,6 +39,15 @@ const config = {
test: /\.md$/,
use: 'raw-loader',
},
+ {
+ test: /\.less$/,
+ loader: 'style-loader!css-loader!less-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.css$/,
+ loaders: ['style-loader', 'css-loader'],
+ },
],
},
optimization: {