From c616b53c9c95edcc9da34aaaee3b91f5f1787636 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 15 Oct 2018 13:37:47 +0200 Subject: update react and styled-components --- packages/dev-tools-pages/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index f73260544..4d7f03add 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -22,11 +22,11 @@ "less": "^2.7.2", "lodash": "^4.17.5", "polished": "^1.9.2", - "react": "^16.4.2", + "react": "^16.5.2", "react-document-title": "^2.0.3", - "react-dom": "^16.4.2", + "react-dom": "^16.5.2", "react-helmet": "^5.2.0", - "styled-components": "^3.3.0" + "styled-components": "^4.0.0-beta.9-macro2" }, "devDependencies": { "@types/lodash": "4.14.104", -- cgit v1.2.3 From b158a6d7226fb50ecedcc07da8ef30e5e5690e46 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 18 Oct 2018 13:28:44 +0200 Subject: initial commit --- packages/dev-tools-pages/.gitignore | 1 + packages/dev-tools-pages/less/all.less | 0 packages/dev-tools-pages/package.json | 15 +- .../public/css/basscss_responsive_custom.css | 85 ---- .../public/css/basscss_responsive_margin.css | 453 --------------------- .../public/css/basscss_responsive_padding.css | 134 ------ .../public/css/basscss_responsive_type_scale.css | 35 -- .../dev-tools-pages/public/favicons/compiler.ico | Bin 0 -> 6518 bytes packages/dev-tools-pages/public/favicons/cov.ico | Bin 0 -> 6518 bytes .../dev-tools-pages/public/favicons/profiler.ico | Bin 0 -> 6518 bytes packages/dev-tools-pages/public/favicons/trace.ico | Bin 0 -> 6518 bytes .../public/images/favicon/favicon-2-16x16.png | Bin 684 -> 0 bytes .../public/images/favicon/favicon-2-32x32.png | Bin 1567 -> 0 bytes .../public/images/favicon/favicon.ico | Bin 5430 -> 0 bytes packages/dev-tools-pages/public/index.html | 13 +- packages/dev-tools-pages/ts/components/Button.tsx | 26 ++ packages/dev-tools-pages/ts/components/Code.tsx | 114 ++++++ .../dev-tools-pages/ts/components/Container.tsx | 9 + .../dev-tools-pages/ts/components/ContentBlock.tsx | 47 +++ packages/dev-tools-pages/ts/components/Footer.tsx | 91 +++++ packages/dev-tools-pages/ts/components/Header.tsx | 59 +++ packages/dev-tools-pages/ts/components/Hero.tsx | 37 ++ .../dev-tools-pages/ts/components/InlineCode.tsx | 8 + packages/dev-tools-pages/ts/components/List.tsx | 33 ++ packages/dev-tools-pages/ts/components/Main.tsx | 33 ++ .../dev-tools-pages/ts/components/MetaTags.tsx | 28 ++ packages/dev-tools-pages/ts/components/Tabs.tsx | 79 ++++ .../dev-tools-pages/ts/components/Typography.tsx | 17 + .../dev-tools-pages/ts/components/meta_tags.tsx | 25 -- .../dev-tools-pages/ts/components/ui/button.tsx | 59 --- .../dev-tools-pages/ts/components/ui/container.tsx | 55 --- packages/dev-tools-pages/ts/components/ui/text.tsx | 74 ---- .../dev-tools-pages/ts/components/withContext.tsx | 23 ++ packages/dev-tools-pages/ts/context/compiler.tsx | 14 + packages/dev-tools-pages/ts/context/cov.tsx | 14 + packages/dev-tools-pages/ts/context/index.tsx | 5 + packages/dev-tools-pages/ts/context/profiler.tsx | 14 + packages/dev-tools-pages/ts/context/trace.tsx | 14 + packages/dev-tools-pages/ts/globalStyles.tsx | 76 ++++ packages/dev-tools-pages/ts/globals.d.ts | 10 + packages/dev-tools-pages/ts/icons/logos/0x.svg | 1 + .../dev-tools-pages/ts/icons/logos/compiler.svg | 3 + packages/dev-tools-pages/ts/icons/logos/cov.svg | 3 + .../dev-tools-pages/ts/icons/logos/profiler.svg | 3 + packages/dev-tools-pages/ts/icons/logos/trace.svg | 1 + packages/dev-tools-pages/ts/index.tsx | 42 +- packages/dev-tools-pages/ts/pages/Base.tsx | 28 ++ packages/dev-tools-pages/ts/pages/Compiler.tsx | 53 +++ packages/dev-tools-pages/ts/pages/Cov.tsx | 53 +++ packages/dev-tools-pages/ts/pages/Profiler.tsx | 53 +++ packages/dev-tools-pages/ts/pages/Trace.tsx | 53 +++ packages/dev-tools-pages/ts/pages/landing.tsx | 27 -- packages/dev-tools-pages/ts/utils/utils.ts | 32 -- packages/dev-tools-pages/webpack.config.js | 6 + 54 files changed, 1050 insertions(+), 1008 deletions(-) create mode 100644 packages/dev-tools-pages/.gitignore delete mode 100644 packages/dev-tools-pages/less/all.less delete mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_custom.css delete mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_margin.css delete mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_padding.css delete mode 100644 packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css create mode 100644 packages/dev-tools-pages/public/favicons/compiler.ico create mode 100644 packages/dev-tools-pages/public/favicons/cov.ico create mode 100644 packages/dev-tools-pages/public/favicons/profiler.ico create mode 100644 packages/dev-tools-pages/public/favicons/trace.ico delete mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png delete mode 100755 packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png delete mode 100755 packages/dev-tools-pages/public/images/favicon/favicon.ico create mode 100644 packages/dev-tools-pages/ts/components/Button.tsx create mode 100644 packages/dev-tools-pages/ts/components/Code.tsx create mode 100644 packages/dev-tools-pages/ts/components/Container.tsx create mode 100644 packages/dev-tools-pages/ts/components/ContentBlock.tsx create mode 100644 packages/dev-tools-pages/ts/components/Footer.tsx create mode 100644 packages/dev-tools-pages/ts/components/Header.tsx create mode 100644 packages/dev-tools-pages/ts/components/Hero.tsx create mode 100644 packages/dev-tools-pages/ts/components/InlineCode.tsx create mode 100644 packages/dev-tools-pages/ts/components/List.tsx create mode 100644 packages/dev-tools-pages/ts/components/Main.tsx create mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx create mode 100644 packages/dev-tools-pages/ts/components/Tabs.tsx create mode 100644 packages/dev-tools-pages/ts/components/Typography.tsx delete mode 100644 packages/dev-tools-pages/ts/components/meta_tags.tsx delete mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx delete mode 100644 packages/dev-tools-pages/ts/components/ui/container.tsx delete mode 100644 packages/dev-tools-pages/ts/components/ui/text.tsx create mode 100644 packages/dev-tools-pages/ts/components/withContext.tsx create mode 100644 packages/dev-tools-pages/ts/context/compiler.tsx create mode 100644 packages/dev-tools-pages/ts/context/cov.tsx create mode 100644 packages/dev-tools-pages/ts/context/index.tsx create mode 100644 packages/dev-tools-pages/ts/context/profiler.tsx create mode 100644 packages/dev-tools-pages/ts/context/trace.tsx create mode 100644 packages/dev-tools-pages/ts/globalStyles.tsx create mode 100644 packages/dev-tools-pages/ts/icons/logos/0x.svg create mode 100644 packages/dev-tools-pages/ts/icons/logos/compiler.svg create mode 100644 packages/dev-tools-pages/ts/icons/logos/cov.svg create mode 100644 packages/dev-tools-pages/ts/icons/logos/profiler.svg create mode 100644 packages/dev-tools-pages/ts/icons/logos/trace.svg create mode 100644 packages/dev-tools-pages/ts/pages/Base.tsx create mode 100644 packages/dev-tools-pages/ts/pages/Compiler.tsx create mode 100644 packages/dev-tools-pages/ts/pages/Cov.tsx create mode 100644 packages/dev-tools-pages/ts/pages/Profiler.tsx create mode 100644 packages/dev-tools-pages/ts/pages/Trace.tsx delete mode 100644 packages/dev-tools-pages/ts/pages/landing.tsx delete mode 100644 packages/dev-tools-pages/ts/utils/utils.ts (limited to 'packages') diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore new file mode 100644 index 000000000..6446c8579 --- /dev/null +++ b/packages/dev-tools-pages/.gitignore @@ -0,0 +1 @@ +/public/fonts \ No newline at end of file diff --git a/packages/dev-tools-pages/less/all.less b/packages/dev-tools-pages/less/all.less deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index 4d7f03add..8fb4bed7b 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -17,32 +17,35 @@ "license": "Apache-2.0", "dependencies": { "@0xproject/react-shared": "^1.0.15", - "basscss": "^8.0.3", - "bowser": "^1.9.3", + "highlight.js": "^9.13.1", "less": "^2.7.2", - "lodash": "^4.17.5", "polished": "^1.9.2", "react": "^16.5.2", - "react-document-title": "^2.0.3", "react-dom": "^16.5.2", "react-helmet": "^5.2.0", - "styled-components": "^4.0.0-beta.9-macro2" + "react-tabs": "^2.3.0", + "styled-components": "^4.0.2", + "styled-normalize": "^8.0.1" }, "devDependencies": { + "@reach/router": "^1.2.1", "@types/lodash": "4.14.104", "@types/node": "*", + "@types/reach__router": "^1.2.0", "@types/react": "^16.4.2", "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", "@types/react-router-dom": "^4.0.4", + "@types/react-tabs": "^2.3.0", "@types/react-tap-event-plugin": "0.0.30", - "@types/styled-components": "^4.0.0", + "@types/styled-components": "^4.0.1", "awesome-typescript-loader": "^5.2.1", "copyfiles": "^2.0.0", "css-loader": "0.23.x", "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", + "react-svg-loader": "^2.1.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", "style-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 deleted file mode 100644 index 5f8bd9117..000000000 --- a/packages/dev-tools-pages/public/css/basscss_responsive_custom.css +++ /dev/null @@ -1,85 +0,0 @@ -/* 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 deleted file mode 100644 index c9f3e855c..000000000 --- a/packages/dev-tools-pages/public/css/basscss_responsive_margin.css +++ /dev/null @@ -1,453 +0,0 @@ -/* 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 deleted file mode 100644 index e027c2d65..000000000 --- a/packages/dev-tools-pages/public/css/basscss_responsive_padding.css +++ /dev/null @@ -1,134 +0,0 @@ -/* 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 deleted file mode 100644 index cae23b4e7..000000000 --- a/packages/dev-tools-pages/public/css/basscss_responsive_type_scale.css +++ /dev/null @@ -1,35 +0,0 @@ -/* 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/favicons/compiler.ico b/packages/dev-tools-pages/public/favicons/compiler.ico new file mode 100644 index 000000000..e43c5fc8a Binary files /dev/null and b/packages/dev-tools-pages/public/favicons/compiler.ico differ diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/public/favicons/cov.ico new file mode 100644 index 000000000..4f1172186 Binary files /dev/null and b/packages/dev-tools-pages/public/favicons/cov.ico differ diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/public/favicons/profiler.ico new file mode 100644 index 000000000..65d38812b Binary files /dev/null and b/packages/dev-tools-pages/public/favicons/profiler.ico differ diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/public/favicons/trace.ico new file mode 100644 index 000000000..af00455d4 Binary files /dev/null and b/packages/dev-tools-pages/public/favicons/trace.ico differ diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png deleted file mode 100755 index 68c493c4f..000000000 Binary files a/packages/dev-tools-pages/public/images/favicon/favicon-2-16x16.png and /dev/null differ diff --git a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png b/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png deleted file mode 100755 index a5abb0eb3..000000000 Binary files a/packages/dev-tools-pages/public/images/favicon/favicon-2-32x32.png and /dev/null differ diff --git a/packages/dev-tools-pages/public/images/favicon/favicon.ico b/packages/dev-tools-pages/public/images/favicon/favicon.ico deleted file mode 100755 index b7ada2a1c..000000000 Binary files a/packages/dev-tools-pages/public/images/favicon/favicon.ico and /dev/null differ diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html index f62d7b255..f8131aece 100644 --- a/packages/dev-tools-pages/public/index.html +++ b/packages/dev-tools-pages/public/index.html @@ -4,21 +4,10 @@ - - - - - 0x: The Protocol for Trading Tokens - - - - - - - +
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx new file mode 100644 index 000000000..e676961c8 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; + +interface ButtonProps extends Props { + large?: boolean; +} + +const Button = + styled.button < + ButtonProps > + ` + font-family: inherit; + font-size: ${props => (props.large ? '1.125rem' : '.875rem')}; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + background-color: ${props => props.colors.secondary}; + color: #000; + border: 0; + border-radius: 5rem; + padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; + display: inline-block; +`; + +export default withContext(Button); diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx new file mode 100644 index 000000000..42d4234f1 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import BaseButton from './Button'; + +interface CodeProps { + children: React.ReactNode; + language?: string; +} + +interface CodeState { + hlCode?: string; + copied?: boolean; +} + +const Button = styled(BaseButton)` + opacity: 0; + position: absolute; + top: 1rem; + right: 1rem; + transition: opacity 0.2s; +`; + +const Base = + styled.div < + CodeProps > + ` + color: ${props => (props.language === undefined ? '#FFF' : 'inherit')}; + background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')}; + white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; + position: relative; + &:hover ${Button} { + opacity: 1; + } +`; + +const StyledCode = styled.code` + padding: 1.5rem; + display: block; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +`; + +const StyledPre = styled.pre` + margin: 0; +`; + +const StyledCopyInput = styled.textarea` + height: 0; + position: absolute; + top: 0; + right: 0; + z-index: -1; +`; + +const CopyInput = StyledCopyInput as any; + +class Code extends React.Component { + code = React.createRef(); + + state: CodeState = {}; + + constructor(props: CodeProps) { + super(props); + } + + async componentDidMount() { + const { language, children } = this.props; + + if (language !== undefined) { + const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js'); + const { value: hlCode } = highlight(language, children as string); + this.setState({ hlCode }); + } + } + + handleCopy = async () => { + try { + if ('clipboard' in navigator) { + await (navigator as any).clipboard.writeText(this.props.children); + this.setState({ copied: true }); + } else { + this.code.current.focus(); + this.code.current.select(); + document.execCommand('copy'); + this.setState({ copied: true }); + } + } catch (error) { + this.setState({ copied: false }); + } + }; + + render() { + const { language, children } = this.props; + + return ( + + + {this.state.hlCode !== undefined ? ( + + ) : ( + {this.props.children} + )} + + + {!('clipboard' in navigator) ? ( +