# New ports collection makefile for: flim for emacs21 # Date created: 29 July 2007 # Whom: MANTANI Nobutaka # # $FreeBSD$ # MAINTAINER= nobutaka@FreeBSD.org COMMENT= FLIM, message representation or encoding elisp library for emacs21 # This is a slave port. PORTCLASS= slave MASTERDIR= ${.CURDIR}/../../editors/flim # emacs port setup USE_EMACS= yes EMACS_PORT_NAME= emacs21 .include "${MASTERDIR}/Makefile" }, disableHostCheck: true, + // Fixes assertion error + // Source: https://github.com/webpack/webpack-dev-server/issues/1491 + https: { + spdy: { + protocols: ['http/1.1'] + } + }, }, }; -- cgit From bbb3e5afcc1f2a18b5e578cb81c8aa916b7fe650 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 13:13:27 +0100 Subject: Add brand colors --- packages/website/ts/style/colors.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 0620bae0f..447762969 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -13,6 +13,14 @@ const appColors = { jobsPageOpenPositionRow: sharedColors.grey100, metaMaskOrange: '#f68c24', metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)', + brandLight: '#00AE99', + brandDark: '#003831', + backgroundDark: '#111A19', + backgroundBlack: '#000000', + backgroundLight: '#F3F6F4', + textDarkPrimary: '#000000', + textDarkSecondary: '#5C5C5C', + white: '#fff', }; export const colors = { -- cgit From 3a9f8a7296413ab4446f03f995e781129cee8962 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 13:17:00 +0100 Subject: Add Formular font and normalize --- packages/website/less/normalize.less | 349 +++++++++++++++++++++ packages/website/public/css/formular.css | 45 +++ .../website/public/fonts/Formular/3822A0_0_0.eot | Bin 0 -> 30574 bytes .../website/public/fonts/Formular/3822A0_0_0.ttf | Bin 0 -> 118572 bytes .../website/public/fonts/Formular/3822A0_0_0.woff | Bin 0 -> 44630 bytes .../website/public/fonts/Formular/3822A0_0_0.woff2 | Bin 0 -> 34337 bytes .../website/public/fonts/Formular/3822A0_1_0.eot | Bin 0 -> 30845 bytes .../website/public/fonts/Formular/3822A0_1_0.ttf | Bin 0 -> 116280 bytes .../website/public/fonts/Formular/3822A0_1_0.woff | Bin 0 -> 45102 bytes .../website/public/fonts/Formular/3822A0_1_0.woff2 | Bin 0 -> 34607 bytes 10 files changed, 394 insertions(+) create mode 100644 packages/website/less/normalize.less create mode 100644 packages/website/public/css/formular.css create mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.eot create mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.ttf create mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.woff create mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.woff2 create mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.eot create mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.ttf create mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.woff create mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.woff2 diff --git a/packages/website/less/normalize.less b/packages/website/less/normalize.less new file mode 100644 index 000000000..c45a85f89 --- /dev/null +++ b/packages/website/less/normalize.less @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/packages/website/public/css/formular.css b/packages/website/public/css/formular.css new file mode 100644 index 000000000..84f68584c --- /dev/null +++ b/packages/website/public/css/formular.css @@ -0,0 +1,45 @@ +/** + * @license + * MyFonts Webfont Build ID 3678880, 2018-11-27T05:59:35-0500 + * + * The fonts listed in this notice are subject to the End User License + * Agreement(s) entered into by the website owner. All other parties are + * explicitly restricted from using the Licensed Webfonts(s). + * + * You may obtain a valid license at the URLs below. + * + * Webfont: Formular-Light by Brownfox + * URL: https://www.myfonts.com/fonts/brownfox/formular/light/ + * + * Webfont: Formular by Brownfox + * URL: https://www.myfonts.com/fonts/brownfox/formular/regular/ + * + * + * License: https://www.myfonts.com/viewlicense?type=web&buildid=3678880 + * Licensed pageviews: 200,000 + * Webfonts copyright: Copyright (c) 2014 by Vyacheslav Kirilenko, Gayane Bagdasaryan. All rights reserved. + * + * © 2018 MyFonts Inc +*/ + + +/* @import must be at top of file, otherwise CSS will not work */ +@import url("//hello.myfonts.net/count/3822a0"); + + +@font-face { + font-family: 'Formular'; + font-weight: 300; + src: url('/fonts/formular/3822A0_0_0.eot'); + src: url('/fonts/formular/3822A0_0_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_0_0.woff2') format('woff2'), url('/fonts/formular/3822A0_0_0.woff') format('woff'), url('/fonts/formular/3822A0_0_0.ttf') format('truetype'); + font-display: swap; +} + + +@font-face { + font-family: 'Formular'; + font-weight: 400; + src: url('/fonts/formular/3822A0_1_0.eot'); + src: url('/fonts/formular/3822A0_1_0.eot?#iefix') format('embedded-opentype'), url('/fonts/formular/3822A0_1_0.woff2') format('woff2'), url('/fonts/formular/3822A0_1_0.woff') format('woff'), url('/fonts/formular/3822A0_1_0.ttf') format('truetype'); + font-display: swap; +} diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.eot b/packages/website/public/fonts/Formular/3822A0_0_0.eot new file mode 100644 index 000000000..d0976f98d Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_0_0.eot differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.ttf b/packages/website/public/fonts/Formular/3822A0_0_0.ttf new file mode 100644 index 000000000..14c79fbb6 Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_0_0.ttf differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.woff b/packages/website/public/fonts/Formular/3822A0_0_0.woff new file mode 100644 index 000000000..79c774b40 Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_0_0.woff differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.woff2 b/packages/website/public/fonts/Formular/3822A0_0_0.woff2 new file mode 100644 index 000000000..6502d5da1 Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_0_0.woff2 differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.eot b/packages/website/public/fonts/Formular/3822A0_1_0.eot new file mode 100644 index 000000000..4cbeff445 Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_1_0.eot differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.ttf b/packages/website/public/fonts/Formular/3822A0_1_0.ttf new file mode 100644 index 000000000..e34b531ab Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_1_0.ttf differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.woff b/packages/website/public/fonts/Formular/3822A0_1_0.woff new file mode 100644 index 000000000..651364b9b Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_1_0.woff differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.woff2 b/packages/website/public/fonts/Formular/3822A0_1_0.woff2 new file mode 100644 index 000000000..91cdbf29f Binary files /dev/null and b/packages/website/public/fonts/Formular/3822A0_1_0.woff2 differ -- cgit From 6b4112527f4e19b1cd233560183331e710bc3514 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 13:17:48 +0100 Subject: Add svg loader --- packages/website/package.json | 1 + packages/website/ts/globals.d.ts | 6 ++ packages/website/webpack.config.js | 4 ++ yarn.lock | 121 ++++++++++++++++++++++++++++++++++++- 4 files changed, 130 insertions(+), 2 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index 52ba206c6..fedee462b 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -91,6 +91,7 @@ "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", + "react-svg-loader": "^2.1.0", "rollbar-sourcemap-webpack-plugin": "^2.4.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index eb8892aea..097c8171e 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -10,6 +10,12 @@ declare module '*.json' { export default json; /* tslint:enable */ } + +declare module '*.svg' { + const svg: any; + export default svg; +} + declare module 'web3-provider-engine/subproviders/filters'; // This will be defined by default in TS 2.4 diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index b01f6ef2c..367aba48f 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -55,6 +55,10 @@ const config = { test: /\.css$/, loaders: ['style-loader', 'css-loader'], }, + { + test: /\.svg$/, + loaders: ['react-svg-loader'], + }, ], }, optimization: { diff --git a/yarn.lock b/yarn.lock index a7a55a7b3..72193b768 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2448,6 +2448,15 @@ babel-helper-builder-binary-assignment-operator-visitor@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" +babel-helper-builder-react-jsx@^6.24.1: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0" + integrity sha1-Of+DE7dci2Xc7/HzHTg+D/KkCKA= + dependencies: + babel-runtime "^6.26.0" + babel-types "^6.26.0" + esutils "^2.0.2" + babel-helper-call-delegate@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d" @@ -2573,6 +2582,11 @@ babel-plugin-jest-hoist@^23.2.0: version "23.2.0" resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167" +babel-plugin-react-svg@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-svg/-/babel-plugin-react-svg-2.1.0.tgz#169eeba1a20fa2dee3a71ff38eedd63d08e69487" + integrity sha512-dHhDj5o4TEdrGSIzWQvTthZsEGCWGRKzSd+zO0xl8ie0zMf4to5nF64Cyu2zfM0mfB9BGRYQLE3YQliv9c+gPA== + "babel-plugin-styled-components@>= 1": version "1.8.0" resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.8.0.tgz#9dd054c8e86825203449a852a5746f29f2dab857" @@ -2588,7 +2602,17 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" -babel-plugin-syntax-object-rest-spread@^6.13.0: +babel-plugin-syntax-flow@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" + integrity sha1-TDqyCiryaqIM0lmVw5jE63AxDI0= + +babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + +babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -2780,6 +2804,54 @@ babel-plugin-transform-exponentiation-operator@^6.22.0: babel-plugin-syntax-exponentiation-operator "^6.8.0" babel-runtime "^6.22.0" +babel-plugin-transform-flow-strip-types@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf" + integrity sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988= + dependencies: + babel-plugin-syntax-flow "^6.18.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-object-rest-spread@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" + integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY= + dependencies: + babel-plugin-syntax-object-rest-spread "^6.8.0" + babel-runtime "^6.26.0" + +babel-plugin-transform-react-display-name@^6.23.0: + version "6.25.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1" + integrity sha1-Z+K/Hx6ck6sI25Z5LgU5K/LMKNE= + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx-self@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e" + integrity sha1-322AqdomEqEh5t3XVYvL7PBuY24= + dependencies: + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx-source@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6" + integrity sha1-ZqwSFT9c0tF7PBkmj0vwGX9E7NY= + dependencies: + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-react-jsx@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3" + integrity sha1-hAoCjn30YN/DotKfDA2R9jduZqM= + dependencies: + babel-helper-builder-react-jsx "^6.24.1" + babel-plugin-syntax-jsx "^6.8.0" + babel-runtime "^6.22.0" + babel-plugin-transform-regenerator@^6.22.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" @@ -2828,6 +2900,13 @@ babel-preset-env@^1.3.2: invariant "^2.2.2" semver "^5.3.0" +babel-preset-flow@^6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d" + integrity sha1-5xIYiHCFrpoktb5Baa/7WZgWxJ0= + dependencies: + babel-plugin-transform-flow-strip-types "^6.22.0" + babel-preset-jest@^23.2.0: version "23.2.0" resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz#8ec7a03a138f001a1a8fb1e8113652bf1a55da46" @@ -2835,6 +2914,18 @@ babel-preset-jest@^23.2.0: babel-plugin-jest-hoist "^23.2.0" babel-plugin-syntax-object-rest-spread "^6.13.0" +babel-preset-react@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380" + integrity sha1-umnfrqRfw+xjm2pOzqbhdwLJE4A= + dependencies: + babel-plugin-syntax-jsx "^6.3.13" + babel-plugin-transform-react-display-name "^6.23.0" + babel-plugin-transform-react-jsx "^6.24.1" + babel-plugin-transform-react-jsx-self "^6.22.0" + babel-plugin-transform-react-jsx-source "^6.22.0" + babel-preset-flow "^6.23.0" + babel-register@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071" @@ -9682,6 +9773,11 @@ lodash.isequal@^4.0.0, lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs= + lodash.keys@^3.0.0: version "3.1.2" resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" @@ -12584,6 +12680,27 @@ react-side-effect@^1.0.2, react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" +react-svg-core@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-svg-core/-/react-svg-core-2.1.0.tgz#3700322af70117c91f83f18febb481128de3cfbb" + integrity sha512-gv6A1JDNqs5OWy22Nx7CskieTOcue7YIGM8QiMS5c7PsRyyWbJaRbpHbO/j0qDE49Y6BDUPdkjzU1/py/SCsIQ== + dependencies: + babel-core "^6.26.0" + babel-plugin-react-svg "^2.1.0" + babel-plugin-syntax-jsx "^6.18.0" + babel-plugin-transform-object-rest-spread "^6.26.0" + babel-preset-react "^6.24.1" + lodash.isplainobject "^4.0.6" + svgo "^0.7.2" + +react-svg-loader@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-svg-loader/-/react-svg-loader-2.1.0.tgz#ba15019413b9b11e2012e86580aea1eecc93677e" + integrity sha512-ojF2pJtqpyvxVejLZCFVBYno/8BPQ5mT6e0LPsR7RTk5gvap4wCYaGR7gW0iYObmWsZAJa/ljrG7ghkZ/2cX8Q== + dependencies: + loader-utils "^1.1.0" + react-svg-core "^2.1.0" + react-tabs@^2.0.0: version "2.2.2" resolved "https://registry.npmjs.org/react-tabs/-/react-tabs-2.2.2.tgz#2f2935da379889484751d1df47c1b639e5ee835d" @@ -14545,7 +14662,7 @@ svg-react-loader@^0.4.6: traverse "0.6.6" xml2js "0.4.17" -svgo@^0.7.0: +svgo@^0.7.0, svgo@^0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5" dependencies: -- cgit From 471a4e981a8893b7e61fb0978faaf79e11269269 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 13:33:46 +0100 Subject: Add @next folder structure --- packages/website/ts/@next/components/button.tsx | 0 packages/website/ts/@next/constants/.gitkeep | 0 packages/website/ts/@next/pages/landing.tsx | 6 ++++++ 3 files changed, 6 insertions(+) create mode 100644 packages/website/ts/@next/components/button.tsx create mode 100644 packages/website/ts/@next/constants/.gitkeep create mode 100644 packages/website/ts/@next/pages/landing.tsx diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/website/ts/@next/constants/.gitkeep b/packages/website/ts/@next/constants/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx new file mode 100644 index 000000000..02ea36c56 --- /dev/null +++ b/packages/website/ts/@next/pages/landing.tsx @@ -0,0 +1,6 @@ +import * as React from 'react'; +import { render } from 'react-dom'; + +export const Landing = () => ( +
0x
+); -- cgit From 3e2c93f5a0a6eca0ea9ec1ce7a8918badc97b1db Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 28 Nov 2018 13:42:02 +0100 Subject: Adds initial /next route to index.tsx --- packages/website/ts/@next/pages/landing.tsx | 2 +- packages/website/ts/index.tsx | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 02ea36c56..c17a6d859 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from 'react-dom'; -export const Landing = () => ( +export const NextLanding = () => (
0x
); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index faf7d8c87..062a3e08e 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -8,7 +8,7 @@ import { About } from 'ts/containers/about'; import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; -import { Landing } from 'ts/containers/landing'; +import { Landing } from 'ts/containers/landing'; // Note(ez): When we're done we omit all old site imports import { LaunchKit } from 'ts/containers/launch_kit'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; @@ -19,6 +19,11 @@ import { store } from 'ts/redux/store'; import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; + +// Next (new website) routes. We should rename them later +import { NextLanding } from 'ts/@next/pages/landing'; + + // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); trackedTokenStorage.clearIfRequired(); @@ -89,6 +94,10 @@ render(
+ {/* + Note(ez): We remove/replace all old routes with next routes + once we're ready to put a ring on it. for now let's keep em there for reference + */} @@ -97,6 +106,12 @@ render( + + + {/* Next (new site) routes */} + + + Date: Wed, 28 Nov 2018 14:04:29 +0100 Subject: WIP button --- packages/website/ts/@next/components/button.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index e69de29bb..48be7659c 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +export interface ButtonInterface { + text: string; +} + +const StyledButton = styled.button` + text-align: center; +`; + +const Text = styled.span` + font-size: 1rem; + line-height: 1.375rem; +`; + +export const Button: React.StatelessComponent = ({ text }) => ( + + Get Started + +); -- cgit From df6c1ae059169f5793ad2ee4ca23a3c07b798d89 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 28 Nov 2018 14:44:44 +0100 Subject: Updates styled-components, react typings --- packages/website/package.json | 4 ++-- yarn.lock | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index fedee462b..6511ffb1a 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -60,7 +60,7 @@ "redux-devtools-extension": "^2.13.2", "rollbar": "^2.4.7", "semver-sort": "0.0.4", - "styled-components": "^3.3.0", + "styled-components": "^4.1.1", "thenby": "^1.2.3", "truffle-contract": "2.0.1", "web3-provider-engine": "14.0.6", @@ -77,7 +77,7 @@ "@types/node": "*", "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", - "@types/react": "^16.4.2", + "@types/react": "^16.7.7", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", diff --git a/yarn.lock b/yarn.lock index 72193b768..588d9bfea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -528,6 +528,11 @@ version "0.6.6" resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b" +"@emotion/unitless@^0.7.0": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f" + integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg== + "@ledgerhq/hw-app-eth@^4.3.0": version "4.7.3" resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-4.7.3.tgz#d352e19658ae296532e522c53c8ec2a1a77b64e5" @@ -1555,6 +1560,14 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/react@^16.7.7": + version "16.7.7" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.7.tgz#1e5e23e7dd922968ed4b484cdec00a5402c9f31b" + integrity sha512-dJiq7CKxD1XJ/GqmbnsQisFnzG4z5lntKBw9X9qeSrguxFbrrhGa8cK9s0ONBp8wL1EfGfofEDVhjen26U46pw== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/redux@^3.6.0": version "3.6.0" resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a" @@ -12597,6 +12610,11 @@ react-is@^16.4.2, react-is@^16.5.2: version "16.5.2" resolved "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz#e2a7b7c3f5d48062eb769fcb123505eb928722e3" +react-is@^16.6.0: + version "16.6.3" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0" + integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA== + react-jss@^8.1.0: version "8.6.1" resolved "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252" @@ -14615,6 +14633,22 @@ styled-components@^4.0.2: stylis "^3.5.0" stylis-rule-sheet "^0.0.10" +styled-components@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.1.tgz#943922048fae556e286bcbfdd29da4f1399446bc" + integrity sha512-UzT/qyoOyKpYooeLdwKrPHZ85R8KWl8i0fbyH9I3z6B2WT9uGDCV7J4kbfKsBeSWFD9EytBriEODOkybcUFD/Q== + dependencies: + "@emotion/is-prop-valid" "^0.6.8" + "@emotion/unitless" "^0.7.0" + babel-plugin-styled-components ">= 1" + css-to-react-native "^2.2.2" + memoize-one "^4.0.0" + prop-types "^15.5.4" + react-is "^16.6.0" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^5.5.0" + stylis-rule-sheet@^0.0.10: version "0.0.10" resolved "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" -- cgit From 7b90f095fffdaac34a518e3f404e35477b534824 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 28 Nov 2018 14:45:11 +0100 Subject: Adds very basic SiteWrap and global styling --- packages/website/ts/@next/components/siteWrap.tsx | 26 +++++++++++ packages/website/ts/@next/constants/cssReset.js | 50 ++++++++++++++++++++++ .../website/ts/@next/constants/globalStyle.tsx | 17 ++++++++ packages/website/ts/@next/pages/landing.tsx | 7 ++- 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/@next/components/siteWrap.tsx create mode 100644 packages/website/ts/@next/constants/cssReset.js create mode 100644 packages/website/ts/@next/constants/globalStyle.tsx diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx new file mode 100644 index 000000000..1b0efd145 --- /dev/null +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { GlobalStyles } from 'ts/@next/constants/globalStyle'; + + +interface Props { + +} + +const SiteWrap:React.StatelessComponent = props => { + const { children } = props; + + return ( + <> + + +
0x HEADER
+ + { children } + +
OMG FOOTER
+ + ) +}; + + +export { SiteWrap } diff --git a/packages/website/ts/@next/constants/cssReset.js b/packages/website/ts/@next/constants/cssReset.js new file mode 100644 index 000000000..4c5105b50 --- /dev/null +++ b/packages/website/ts/@next/constants/cssReset.js @@ -0,0 +1,50 @@ +export const cssReset = ` + *, + *:before, + *:after { + box-sizing: border-box; + } + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } +`; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx new file mode 100644 index 000000000..271dd2545 --- /dev/null +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -0,0 +1,17 @@ +import { createGlobalStyle } from 'styled-components'; +import { cssReset } from 'ts/@next/constants/cssReset'; + + +// Not sure if cssReset is already imported into index.tsx +// Also: currently createglobalStyle from styled-components is +// throwing a warning about how there's not typing exported from styled-comps +const GlobalStyles = createGlobalStyle` + ${cssReset}; + + html { + background-color: red; + } +`; + + +export { GlobalStyles } diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index c17a6d859..64ef15274 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import { render } from 'react-dom'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; + export const NextLanding = () => ( -
0x
+ +
Hello
+ ); -- cgit From d3aebd0b799607ba24f0a3a298afe85ced69c264 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 28 Nov 2018 15:02:46 +0100 Subject: Renames font-files, adds font-face declaration in globalStyles --- packages/website/public/fonts/.DS_Store | Bin 0 -> 6148 bytes packages/website/public/fonts/Formular-Light.woff | Bin 0 -> 44630 bytes packages/website/public/fonts/Formular-Light.woff2 | Bin 0 -> 34337 bytes .../website/public/fonts/Formular-Regular.woff | Bin 0 -> 45102 bytes .../website/public/fonts/Formular-Regular.woff2 | Bin 0 -> 34607 bytes .../website/public/fonts/Formular/3822A0_0_0.eot | Bin 30574 -> 0 bytes .../website/public/fonts/Formular/3822A0_0_0.ttf | Bin 118572 -> 0 bytes .../website/public/fonts/Formular/3822A0_0_0.woff | Bin 44630 -> 0 bytes .../website/public/fonts/Formular/3822A0_0_0.woff2 | Bin 34337 -> 0 bytes .../website/public/fonts/Formular/3822A0_1_0.eot | Bin 30845 -> 0 bytes .../website/public/fonts/Formular/3822A0_1_0.ttf | Bin 116280 -> 0 bytes .../website/public/fonts/Formular/3822A0_1_0.woff | Bin 45102 -> 0 bytes .../website/public/fonts/Formular/3822A0_1_0.woff2 | Bin 34607 -> 0 bytes .../website/ts/@next/constants/globalStyle.tsx | 24 ++++++++++++++++++++- 14 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/website/public/fonts/.DS_Store create mode 100644 packages/website/public/fonts/Formular-Light.woff create mode 100644 packages/website/public/fonts/Formular-Light.woff2 create mode 100644 packages/website/public/fonts/Formular-Regular.woff create mode 100644 packages/website/public/fonts/Formular-Regular.woff2 delete mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.eot delete mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.ttf delete mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.woff delete mode 100644 packages/website/public/fonts/Formular/3822A0_0_0.woff2 delete mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.eot delete mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.ttf delete mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.woff delete mode 100644 packages/website/public/fonts/Formular/3822A0_1_0.woff2 diff --git a/packages/website/public/fonts/.DS_Store b/packages/website/public/fonts/.DS_Store new file mode 100644 index 000000000..6d9b04748 Binary files /dev/null and b/packages/website/public/fonts/.DS_Store differ diff --git a/packages/website/public/fonts/Formular-Light.woff b/packages/website/public/fonts/Formular-Light.woff new file mode 100644 index 000000000..79c774b40 Binary files /dev/null and b/packages/website/public/fonts/Formular-Light.woff differ diff --git a/packages/website/public/fonts/Formular-Light.woff2 b/packages/website/public/fonts/Formular-Light.woff2 new file mode 100644 index 000000000..6502d5da1 Binary files /dev/null and b/packages/website/public/fonts/Formular-Light.woff2 differ diff --git a/packages/website/public/fonts/Formular-Regular.woff b/packages/website/public/fonts/Formular-Regular.woff new file mode 100644 index 000000000..651364b9b Binary files /dev/null and b/packages/website/public/fonts/Formular-Regular.woff differ diff --git a/packages/website/public/fonts/Formular-Regular.woff2 b/packages/website/public/fonts/Formular-Regular.woff2 new file mode 100644 index 000000000..91cdbf29f Binary files /dev/null and b/packages/website/public/fonts/Formular-Regular.woff2 differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.eot b/packages/website/public/fonts/Formular/3822A0_0_0.eot deleted file mode 100644 index d0976f98d..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_0_0.eot and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.ttf b/packages/website/public/fonts/Formular/3822A0_0_0.ttf deleted file mode 100644 index 14c79fbb6..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_0_0.ttf and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.woff b/packages/website/public/fonts/Formular/3822A0_0_0.woff deleted file mode 100644 index 79c774b40..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_0_0.woff and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_0_0.woff2 b/packages/website/public/fonts/Formular/3822A0_0_0.woff2 deleted file mode 100644 index 6502d5da1..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_0_0.woff2 and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.eot b/packages/website/public/fonts/Formular/3822A0_1_0.eot deleted file mode 100644 index 4cbeff445..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_1_0.eot and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.ttf b/packages/website/public/fonts/Formular/3822A0_1_0.ttf deleted file mode 100644 index e34b531ab..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_1_0.ttf and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.woff b/packages/website/public/fonts/Formular/3822A0_1_0.woff deleted file mode 100644 index 651364b9b..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_1_0.woff and /dev/null differ diff --git a/packages/website/public/fonts/Formular/3822A0_1_0.woff2 b/packages/website/public/fonts/Formular/3822A0_1_0.woff2 deleted file mode 100644 index 91cdbf29f..000000000 Binary files a/packages/website/public/fonts/Formular/3822A0_1_0.woff2 and /dev/null differ diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 271dd2545..46f927673 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,5 +1,6 @@ import { createGlobalStyle } from 'styled-components'; import { cssReset } from 'ts/@next/constants/cssReset'; +import { colors } from 'ts/style/colors'; // Not sure if cssReset is already imported into index.tsx @@ -8,8 +9,29 @@ import { cssReset } from 'ts/@next/constants/cssReset'; const GlobalStyles = createGlobalStyle` ${cssReset}; + @font-face { + font-family: "Formular"; + src: url("/public/fonts/Formular-Light.woff2") format("woff2"), url("/public/fonts/Formular-Light.woff") format("woff"); + font-weight: 300; + font-display: swap; + } + + @font-face { + font-family: "Formular"; + src: url("/public/fonts/Formular-Regular.woff2") format("woff2"), url("/public/fonts/Formular-Regular.woff") format("woff"); + font-weight: 500; + font-display: swap; + } + html { - background-color: red; + font-size: 17px; + background-color: ${colors.backgroundDark}; + } + + body { + font-family: 'Formular', sans-serif !important; + -webkit-font-smoothing: antialiased; + color: #fff; } `; -- cgit From d642082058c17859170b933370bce9ea6b5da869 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 15:17:51 +0100 Subject: Add styled-component types --- packages/website/package.json | 1 + packages/website/ts/style/theme.ts | 4 ++-- yarn.lock | 9 +++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/website/package.json b/packages/website/package.json index 6511ffb1a..75e147168 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -30,6 +30,7 @@ "@0x/typescript-typings": "^3.0.4", "@0x/utils": "^2.0.6", "@0x/web3-wrapper": "^3.1.5", + "@types/styled-components": "^4.1.1", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", diff --git a/packages/website/ts/style/theme.ts b/packages/website/ts/style/theme.ts index ce7d6975d..94bd0169a 100644 --- a/packages/website/ts/style/theme.ts +++ b/packages/website/ts/style/theme.ts @@ -4,7 +4,7 @@ import * as styledComponents from 'styled-components'; const { default: styled, css, - injectGlobal, + createGlobalStyle, keyframes, ThemeProvider, } = styledComponents as styledComponents.ThemedStyledComponentsModule; @@ -14,4 +14,4 @@ export interface IThemeInterface {} export const theme = {}; -export { styled, css, injectGlobal, keyframes, ThemeProvider }; +export { styled, css, createGlobalStyle, keyframes, ThemeProvider }; diff --git a/yarn.lock b/yarn.lock index 588d9bfea..3b6477f6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1629,6 +1629,15 @@ "@types/node" "*" "@types/react" "*" +"@types/styled-components@^4.1.1": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.1.tgz#1a9f8ebff7ee5cbc9ddc08b486e55e5a152bb408" + integrity sha512-ye+XXSkaqs7BgCiQx4NQRIUnqo8LDrkRazE9qvBTG//rdAaHH77xshKE3OcWwVuLq283xH2wUW8C8z3eh1l+Wg== + dependencies: + "@types/node" "*" + "@types/react" "*" + csstype "^2.2.0" + "@types/tmp@^0.0.33": version "0.0.33" resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" -- cgit From 1cc06dd9e6cf39edf20ca6b4f151664f9eb79a86 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 15:18:14 +0100 Subject: Fix type error in Text component --- packages/website/ts/components/ui/text.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index c13e21913..2fe2a8c79 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -7,6 +7,7 @@ export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' export interface TextProps { className?: string; + children?: any; Tag?: TextTag; fontSize?: string; fontFamily?: string; -- cgit From 081859f334b0ee4733046e1698820e0e4c063f5d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 15:21:11 +0100 Subject: Ignore osx metadata files --- .gitignore | 3 +++ packages/website/public/fonts/.DS_Store | Bin 6148 -> 0 bytes 2 files changed, 3 insertions(+) delete mode 100644 packages/website/public/fonts/.DS_Store diff --git a/.gitignore b/.gitignore index 9e43f20b0..612b6b28a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,9 @@ pids *.seed *.pid.lock +# OSX folder metadata +.DS_Store + # Directory for instrumented libs generated by jscoverage/JSCover lib-cov diff --git a/packages/website/public/fonts/.DS_Store b/packages/website/public/fonts/.DS_Store deleted file mode 100644 index 6d9b04748..000000000 Binary files a/packages/website/public/fonts/.DS_Store and /dev/null differ -- cgit From d2a418b368b514b158e46c2b0459d49a9c07f177 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 16:26:05 +0100 Subject: Fix font references --- packages/website/ts/@next/constants/globalStyle.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 46f927673..b3b4c4a96 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -2,7 +2,6 @@ import { createGlobalStyle } from 'styled-components'; import { cssReset } from 'ts/@next/constants/cssReset'; import { colors } from 'ts/style/colors'; - // Not sure if cssReset is already imported into index.tsx // Also: currently createglobalStyle from styled-components is // throwing a warning about how there's not typing exported from styled-comps @@ -11,15 +10,15 @@ const GlobalStyles = createGlobalStyle` @font-face { font-family: "Formular"; - src: url("/public/fonts/Formular-Light.woff2") format("woff2"), url("/public/fonts/Formular-Light.woff") format("woff"); + src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff"); font-weight: 300; font-display: swap; } @font-face { font-family: "Formular"; - src: url("/public/fonts/Formular-Regular.woff2") format("woff2"), url("/public/fonts/Formular-Regular.woff") format("woff"); - font-weight: 500; + src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff"); + font-weight: 400; font-display: swap; } -- cgit From 969674a5ce99260a1fa0b749611845153c105bc4 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 16:26:42 +0100 Subject: Add container and button --- packages/website/ts/@next/components/button.tsx | 10 +++++++++- packages/website/ts/@next/components/container.tsx | 21 +++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/@next/components/container.tsx diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 48be7659c..bbb6b7935 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -1,21 +1,29 @@ import * as React from 'react'; import styled from 'styled-components'; +import { colors } from 'ts/style/colors'; + export interface ButtonInterface { text: string; } const StyledButton = styled.button` + appearance: none; + border: 0; + background-color: ${colors.brandLight}; + color: ${colors.white}; text-align: center; + padding: 13px 22px 14px; `; const Text = styled.span` font-size: 1rem; + font-weight: 500; line-height: 1.375rem; `; export const Button: React.StatelessComponent = ({ text }) => ( - Get Started + {text} ); diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx new file mode 100644 index 000000000..a4da10cfd --- /dev/null +++ b/packages/website/ts/@next/components/container.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface ContainerProps { +} + +const StyledContainer = styled.div` + max-width: 117rem; // 2000px + margin: 0 auto; + padding: 0 1.764705882rem; // 30px +`; + +export const Container: React.StatelessComponent = props => { + const { children } = props; + + return ( + + {children} + + ); +}; -- cgit From 56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 16:26:56 +0100 Subject: Add ehader --- packages/website/ts/@next/components/header.tsx | 54 ++++++++++++++++++++++ packages/website/ts/@next/components/logo.tsx | 22 +++++++++ packages/website/ts/@next/components/siteWrap.tsx | 3 +- packages/website/ts/@next/icons/logo-with-type.svg | 1 + 4 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/@next/components/header.tsx create mode 100644 packages/website/ts/@next/components/logo.tsx create mode 100644 packages/website/ts/@next/icons/logo-with-type.svg diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx new file mode 100644 index 000000000..615cf53d5 --- /dev/null +++ b/packages/website/ts/@next/components/header.tsx @@ -0,0 +1,54 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from './button'; +import { Container } from './container'; +import { Logo } from './logo'; + +export interface HeaderInterface { +} + +const StyledHeader = styled.header` + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + padding: 1.764705882rem 0; +`; + +const Text = styled.span` + font-size: 1rem; + line-height: 1.375rem; +`; + +const Links = styled.div` + display: flex; + justify-content: space-around; +`; + +const Link = styled.a` + color: rgba(255, 255, 255, 0.5); + font-size: 18px; + margin: 0 1.764705882rem; +`; + +const links = [ + { url: '', text: 'Why 0x' }, + { url: '', text: 'Products' }, + { url: '', text: 'Developers' }, + { url: '', text: 'About' }, + { url: '', text: 'Blog' }, +]; + +export const Header: React.StatelessComponent = ({}) => ( + + + + + {_.map(links, link => {link.text})} + +
-- cgit From 8bcb5b00ba464188b790ff61192d441842fb6b25 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 14:18:04 +0100 Subject: Add transparent button --- packages/website/ts/@next/components/button.tsx | 7 ++++--- packages/website/ts/@next/pages/landing.tsx | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index df784b8ef..050d87bb0 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -export interface Props extends ButtonInterface { +export interface Props { text: string; transparent?: boolean; inline?: boolean; @@ -43,11 +43,12 @@ export const Button: React.StatelessComponent = ({ ...props }) => ( ); export const ButtonTransparent: React.StatelessComponent = ({ ...props }) => ( - + ); Button.defaultProps = { transparent: false, + inline: false, }; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 19eed5acf..463d53d44 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import styled from 'styled-components' +import styled from 'styled-components'; -import { Button } from 'ts/@next/components/button'; +import { colors } from 'ts/style/colors' +import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Intro } from 'ts/@next/components/text'; -- cgit From 1bba985124549aab3b79fa9834c613c2fe829b51 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 14:18:19 +0100 Subject: Add text and illustrations for home --- packages/website/ts/@next/components/text.tsx | 24 +++++++++++++++++++++- .../ts/@next/icons/illustrations/protocol.svg | 1 + .../@next/icons/illustrations/ready-to-build.svg | 1 + .../ts/@next/icons/illustrations/support.svg | 1 + packages/website/ts/@next/pages/landing.tsx | 14 +++++++++++-- 5 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 packages/website/ts/@next/icons/illustrations/protocol.svg create mode 100644 packages/website/ts/@next/icons/illustrations/ready-to-build.svg create mode 100644 packages/website/ts/@next/icons/illustrations/support.svg diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 624ab760d..5b1ee9d92 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -4,7 +4,8 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; export interface Props { - size?: string; + size?: 'normal' | 'medium' | 'large'; + center?: boolean; } const StyledHeading = styled.h1` @@ -20,6 +21,18 @@ const StyledIntro = styled.p` line-height: 1.823529412em; `; +const StyledText = styled.p` + color: ${colors.white}; + font-size: 1rem; + ${(props: Props) => props.size === 'medium' && ` + font-size: 1.555555556rem; + line-height: 1.357142857em; + `} + ${(props: Props) => props.center && ` + text-align: center + `} +`; + export const Heading: React.StatelessComponent = ({ children }) => ( {children} ); @@ -27,3 +40,12 @@ export const Heading: React.StatelessComponent = ({ children }) => ( export const Intro: React.StatelessComponent = ({ children }) => ( {children} ); + +export const Text: React.StatelessComponent = ({ children, ...props }) => ( + {children} +); + +Text.defaultProps = { + size: 'normal', + center: false, +}; diff --git a/packages/website/ts/@next/icons/illustrations/protocol.svg b/packages/website/ts/@next/icons/illustrations/protocol.svg new file mode 100644 index 000000000..71453194a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/protocol.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/ready-to-build.svg b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg new file mode 100644 index 000000000..f3e44d53a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/ready-to-build.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/support.svg b/packages/website/ts/@next/icons/illustrations/support.svg new file mode 100644 index 000000000..d3f2294cc --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/support.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 463d53d44..849437c26 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,12 +5,15 @@ import { colors } from 'ts/style/colors' import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro } from 'ts/@next/components/text'; +import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import protocol from 'ts/@next/icons/illustrations/protocol.svg'; const Icon = styled.div` flex-shrink: 0; + + ${props => props.center && `text-align: center`} `; export const NextLanding = () => ( @@ -22,7 +25,7 @@ export const NextLanding = () => ( 0x is the best solution for adding exchange functionality to your business.
@@ -31,6 +34,13 @@ export const NextLanding = () => ( + +
+ + 0x is the best solution for adding exchange functionality to your business. + Discover how developers use 0x (need arrow + line under) +
+
-- cgit From 0577a0dbc5fa78e2bb6289d1ff475f10e27f7a79 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 14:26:52 +0100 Subject: Remove export of interface --- packages/website/ts/@next/components/button.tsx | 2 +- packages/website/ts/@next/components/header.tsx | 2 +- packages/website/ts/@next/components/logo.tsx | 2 +- packages/website/ts/@next/components/text.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 050d87bb0..55534b66a 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -export interface Props { +interface Props { text: string; transparent?: boolean; inline?: boolean; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 670b84fa4..f9b71a43c 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -6,7 +6,7 @@ import { Button } from './button'; import { Container } from './container'; import { Logo } from './logo'; -export interface HeaderInterface { +interface HeaderInterface { } const StyledHeader = styled.header` diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 0e30af832..59db7d0ec 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import logoWithType from '../icons/logo-with-type.svg'; -export interface LogoInterface { +interface LogoInterface { // showType: boolean; } diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 5b1ee9d92..1d4fdcef8 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -export interface Props { +interface Props { size?: 'normal' | 'medium' | 'large'; center?: boolean; } -- cgit From ec099dd009b746cef015dec1290efb0fb72b3037 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:33:27 +0100 Subject: Adds notes to button --- packages/website/ts/@next/components/button.tsx | 37 +++++++++++++++++++++---- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 55534b66a..b4280a9ed 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,13 +3,14 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -interface Props { + +interface ButtonInterface { text: string; transparent?: boolean; inline?: boolean; } -const StyledButton = styled.button` +const StyledButton = styled.button` appearance: none; border: 0; background-color: ${colors.brandLight}; @@ -36,14 +37,40 @@ const Text = styled.span` line-height: 1.375rem; `; -export const Button: React.StatelessComponent = ({ ...props }) => ( + + +// A button that may exist as a button or a link +// a button only makes sense with an onClick handler +// a link with an href so we base the type of component we return +// based on those props + +export const Button: React.StatelessComponent = props => { + const { onClick, href } = props; + + // This button is as link + if (props.href) return StyledButton.withComponent('a'); + else return StyledButton; +}; + + +// usage +// ===> Text +// ====> + + + + +export const Button: React.StatelessComponent = ({ ...props }) => ( {props.text} ); -export const ButtonTransparent: React.StatelessComponent = ({ ...props }) => ( - ); -- cgit From b564f090f9fcc0bff97dfec829d8380af5a78418 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:31:14 +0100 Subject: Edits button.js --- packages/website/ts/@next/components/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index b4280a9ed..07d598cba 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -68,7 +68,7 @@ export const Button: React.StatelessComponent = ({ ...props }) // also feel like a transparent prop would suffice instead of having a separate button // so we have the logic with the Link/button--- and props = styling. in this case: -// background-color: ${props => !props.transparent && 'somecolor'} +// background-color: ${props => !props.transparent && 'somecolor'}.. export const ButtonTransparent: React.StatelessComponent = ({ ...props }) => ( {props.text} -- cgit From 0e7329bcecb893b34b3f4199ba653748f55d852b Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:36:35 +0100 Subject: Tweaks button --- packages/website/ts/@next/components/button.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 07d598cba..9cadc4fd5 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -46,10 +46,9 @@ const Text = styled.span` export const Button: React.StatelessComponent = props => { const { onClick, href } = props; + const Component = onClick ? StyledButton : StyledButton.withComponent('a'); - // This button is as link - if (props.href) return StyledButton.withComponent('a'); - else return StyledButton; + return { props.children || 'Text' }; }; @@ -60,11 +59,11 @@ export const Button: React.StatelessComponent = props => { -export const Button: React.StatelessComponent = ({ ...props }) => ( - - {props.text} - -); +// export const Button: React.StatelessComponent = ({ ...props }) => ( +// +// {props.text} +// +// ); // also feel like a transparent prop would suffice instead of having a separate button // so we have the logic with the Link/button--- and props = styling. in this case: -- cgit From 9d850cea144492752818ecd0c04b605be4486487 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 14:38:53 +0100 Subject: Updated text --- packages/website/ts/@next/pages/landing.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 849437c26..603a26ba3 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -12,8 +12,6 @@ import protocol from 'ts/@next/icons/illustrations/protocol.svg'; const Icon = styled.div` flex-shrink: 0; - - ${props => props.center && `text-align: center`} `; export const NextLanding = () => ( @@ -37,8 +35,8 @@ export const NextLanding = () => (
- 0x is the best solution for adding exchange functionality to your business. - Discover how developers use 0x (need arrow + line under) + 0x is the best solution for adding exchange functionality to your business. + Discover how developers use 0x (need arrow + line under)
-- cgit From 96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:51:41 +0100 Subject: Adds fullWidth prop to sections --- packages/website/ts/@next/components/button.tsx | 2 ++ packages/website/ts/@next/components/layout.tsx | 13 +++++++++---- packages/website/ts/@next/pages/landing.tsx | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 9cadc4fd5..067576d3c 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -8,6 +8,8 @@ interface ButtonInterface { text: string; transparent?: boolean; inline?: boolean; + href?: string, + onClick?: Function, } const StyledButton = styled.button` diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 81ae43db7..6f6e6cd6b 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -17,6 +17,7 @@ interface SectionProps { noPadding?: any; noMargin?: any; bgColor?: string; + fullWidth?: any; } interface WrapProps { @@ -44,6 +45,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => { const GUTTER = 30 as number; const MAX_WIDTH = 1500; +const BREAKPOINTS = { + mobile: '768px', +}; const WRAPPER_WIDTHS: WrapWidths = { default: `${MAX_WIDTH}px`, // tbd full: '100%', @@ -66,9 +70,10 @@ export const Main = styled.main` `; export const Section = styled.section` - width: 100%; + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; padding: ${props => !props.noPadding && '30px'}; - margin-bottom: ${props => !props.noMargin && '30px'}; + margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); `; @@ -78,7 +83,7 @@ export const Wrap = styled.div` background-color: ${props => props.bgColor}; margin: 0 auto; - @media (min-width: 768px) { + @media (min-width: ${BREAKPOINTS.mobile}) { display: flex; justify-content: space-between; } @@ -88,7 +93,7 @@ export const Column = styled.div` padding: ${props => !props.noPadding && '30px'}; border: 1px dotted rgba(255, 0, 0, 0.3); - @media (min-width: 768px) { + @media (min-width: ${BREAKPOINTS.mobile}) { width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; } `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 603a26ba3..fa2bf45a1 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -52,7 +52,7 @@ export const NextLanding = () => (
-
+
SAMPLE FLUSHED width -- cgit From e10d34cdfc91a14878987c61e4365baa1612318a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:58:30 +0100 Subject: Enables fullwidth sections. As in edge-to-edge --- packages/website/ts/@next/components/layout.tsx | 4 ++-- packages/website/ts/@next/pages/landing.tsx | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 6f6e6cd6b..65c98997d 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -70,10 +70,10 @@ export const Main = styled.main` `; export const Section = styled.section` - width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100vw'}; padding: ${props => !props.noPadding && '30px'}; margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index fa2bf45a1..c0cda84cf 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,10 +5,14 @@ import { colors } from 'ts/style/colors' import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; +<<<<<<< Updated upstream import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import protocol from 'ts/@next/icons/illustrations/protocol.svg'; +======= +import { Section, Wrap } from 'ts/@next/components/layout'; +>>>>>>> Stashed changes const Icon = styled.div` flex-shrink: 0; -- cgit From a9d413728e82b742d0f76264542bf322470d9416 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 14:59:20 +0100 Subject: Ooops fixes that --- packages/website/ts/@next/components/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 65c98997d..541b4fc58 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -70,7 +70,7 @@ export const Main = styled.main` `; export const Section = styled.section` - width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100vw'}; + width: ${props => props.fullWidth ? `100vw` : '100%'}; padding: ${props => !props.noPadding && '30px'}; margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; -- cgit From 4bc5881e9a4214a132481062651ff088f61d3241 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 15:08:24 +0100 Subject: Tests flush width sections --- packages/website/ts/@next/components/layout.tsx | 9 +++++++-- packages/website/ts/@next/pages/landing.tsx | 5 ++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 541b4fc58..d64bcf74a 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -70,12 +70,17 @@ export const Main = styled.main` `; export const Section = styled.section` - width: ${props => props.fullWidth ? `100vw` : '100%'}; + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; padding: ${props => !props.noPadding && '30px'}; margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); + + @media (min-width: 1560px) { + width: ${props => props.fullWidth && '100vw'}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + } `; export const Wrap = styled.div` diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index c0cda84cf..025a9d47b 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -56,7 +56,10 @@ export const NextLanding = () => (
-
+
SAMPLE FLUSHED width -- cgit From a114cf5c2eebb62af1faff4c4186d542612f84cc Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 15:17:00 +0100 Subject: Introduces WrapCentered --- packages/website/ts/@next/components/layout.tsx | 11 ++++++++++- packages/website/ts/@next/pages/landing.tsx | 17 ++++++++--------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index d64bcf74a..c807ccb36 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -83,17 +83,26 @@ export const Section = styled.section` } `; -export const Wrap = styled.div` +const WrapBase = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; background-color: ${props => props.bgColor}; margin: 0 auto; +`; +export const Wrap = styled(WrapBase)` @media (min-width: ${BREAKPOINTS.mobile}) { display: flex; justify-content: space-between; } `; +export const WrapCentered = styled(WrapBase)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + export const Column = styled.div` padding: ${props => !props.noPadding && '30px'}; border: 1px dotted rgba(255, 0, 0, 0.3); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 025a9d47b..ad0639fc7 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -3,16 +3,13 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors' import { Button, ButtonTransparent } from 'ts/@next/components/button'; -import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -<<<<<<< Updated upstream import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import protocol from 'ts/@next/icons/illustrations/protocol.svg'; -======= -import { Section, Wrap } from 'ts/@next/components/layout'; ->>>>>>> Stashed changes + const Icon = styled.div` flex-shrink: 0; @@ -37,10 +34,12 @@ export const NextLanding = () => (
-
- - 0x is the best solution for adding exchange functionality to your business. - Discover how developers use 0x (need arrow + line under) +
+ + + 0x is the best solution for adding exchange functionality to your business. + Discover how developers use 0x (need arrow + line under) +
-- cgit From 200da7d22cda1a853105d6114848f7e09d18370f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 15:26:21 +0100 Subject: Fix type def --- packages/website/ts/@next/components/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 067576d3c..e98388248 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -9,7 +9,7 @@ interface ButtonInterface { transparent?: boolean; inline?: boolean; href?: string, - onClick?: Function, + onClick?: () => void; } const StyledButton = styled.button` -- cgit From a21bca7cf4771d04879036f3406f38276af93e3a Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 15:34:26 +0100 Subject: Cleanup button component --- packages/website/ts/@next/components/button.tsx | 26 ++++++------------------- packages/website/ts/@next/components/header.tsx | 2 +- packages/website/ts/@next/pages/landing.tsx | 8 ++++---- 3 files changed, 11 insertions(+), 25 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index e98388248..390136347 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,12 +3,10 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; - interface ButtonInterface { - text: string; transparent?: boolean; inline?: boolean; - href?: string, + href?: string; onClick?: () => void; } @@ -16,13 +14,15 @@ const StyledButton = styled.button` appearance: none; border: 0; background-color: ${colors.brandLight}; + border: 1px solid ${colors.brandLight}; color: ${colors.white}; text-align: center; padding: 13px 22px 14px; + text-decoration: none; ${props => props.transparent && ` background-color: transparent; - border: 1px solid #6A6A6A; + border-color: #6A6A6A; `} ${props => props.inline && ` @@ -33,14 +33,6 @@ const StyledButton = styled.button` `} `; -const Text = styled.span` - font-size: 1rem; - font-weight: 500; - line-height: 1.375rem; -`; - - - // A button that may exist as a button or a link // a button only makes sense with an onClick handler // a link with an href so we base the type of component we return @@ -50,17 +42,13 @@ export const Button: React.StatelessComponent = props => { const { onClick, href } = props; const Component = onClick ? StyledButton : StyledButton.withComponent('a'); - return { props.children || 'Text' }; + return {props.children}; }; - // usage // ===> Text // ====> - - - // export const Button: React.StatelessComponent = ({ ...props }) => ( // // {props.text} @@ -71,9 +59,7 @@ export const Button: React.StatelessComponent = props => { // so we have the logic with the Link/button--- and props = styling. in this case: // background-color: ${props => !props.transparent && 'somecolor'}.. export const ButtonTransparent: React.StatelessComponent = ({ ...props }) => ( - - {props.text} - + ); Button.defaultProps = { diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index f9b71a43c..ac37e3ab2 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -54,7 +54,7 @@ export const Header: React.StatelessComponent = ({}) => ( {_.map(links, (link, index) => {link.text})} - ); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index ad0639fc7..fff9e630d 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from 'ts/style/colors' +import { colors } from 'ts/style/colors'; + import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; @@ -10,7 +11,6 @@ import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import protocol from 'ts/@next/icons/illustrations/protocol.svg'; - const Icon = styled.div` flex-shrink: 0; `; @@ -23,8 +23,8 @@ export const NextLanding = () => ( Powering Decentralized Exchange 0x is the best solution for adding exchange functionality to your business.
- + Learn More
-- cgit From 2103d5c3edddc319fe2404df636db75e771d1474 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 15:40:39 +0100 Subject: Cleans up Button --- packages/website/ts/@next/components/button.tsx | 66 ++++++------------------- packages/website/ts/@next/pages/landing.tsx | 15 ++++-- 2 files changed, 24 insertions(+), 57 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 390136347..41ac49d07 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,66 +3,28 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; + interface ButtonInterface { - transparent?: boolean; - inline?: boolean; - href?: string; + children: Node | string; + transparent?: any; + inline?: any; + href?: string, onClick?: () => void; } +export const Button: React.StatelessComponent = props => { + const { onClick } = props; + const Component = onClick ? StyledButton : StyledButton.withComponent('a'); + return { props.children }; +}; + const StyledButton = styled.button` appearance: none; border: 0; - background-color: ${colors.brandLight}; - border: 1px solid ${colors.brandLight}; + display: ${props => props.inline && 'inline-block'}; + background-color: ${props => !props.transparent && colors.brandLight}; + border: ${props => props.transparent && '1px solid #6a6a6a'}; color: ${colors.white}; text-align: center; padding: 13px 22px 14px; - text-decoration: none; - - ${props => props.transparent && ` - background-color: transparent; - border-color: #6A6A6A; - `} - - ${props => props.inline && ` - display: inline-block; - & + & { - margin-left: 10px; - } - `} `; - -// A button that may exist as a button or a link -// a button only makes sense with an onClick handler -// a link with an href so we base the type of component we return -// based on those props - -export const Button: React.StatelessComponent = props => { - const { onClick, href } = props; - const Component = onClick ? StyledButton : StyledButton.withComponent('a'); - - return {props.children}; -}; - -// usage -// ===> Text -// ====> - -// export const Button: React.StatelessComponent = ({ ...props }) => ( -// -// {props.text} -// -// ); - -// also feel like a transparent prop would suffice instead of having a separate button -// so we have the logic with the Link/button--- and props = styling. in this case: -// background-color: ${props => !props.transparent && 'somecolor'}.. -export const ButtonTransparent: React.StatelessComponent = ({ ...props }) => ( - -); - -Button.defaultProps = { - transparent: false, - inline: false, -}; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index fff9e630d..eb8adbde9 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from 'ts/style/colors'; - -import { Button, ButtonTransparent } from 'ts/@next/components/button'; +import { colors } from 'ts/style/colors' +import { Button } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Intro, Text } from 'ts/@next/components/text'; @@ -11,6 +10,7 @@ import { Heading, Intro, Text } from 'ts/@next/components/text'; import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import protocol from 'ts/@next/icons/illustrations/protocol.svg'; + const Icon = styled.div` flex-shrink: 0; `; @@ -23,8 +23,13 @@ export const NextLanding = () => ( Powering Decentralized Exchange 0x is the best solution for adding exchange functionality to your business.
- - Learn More + + +
-- cgit From 1d0d4ca147881b189b9da54a0055e1a0526c9756 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 15:46:12 +0100 Subject: Removes text-decoration on buttons --- packages/website/ts/@next/components/button.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 41ac49d07..f69589373 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -26,5 +26,6 @@ const StyledButton = styled.button` border: ${props => props.transparent && '1px solid #6a6a6a'}; color: ${colors.white}; text-align: center; - padding: 13px 22px 14px; + padding: 14px 22px; + text-decoration: none; `; -- cgit From b461147389537b4808c60bcd3206e6dfce76f017 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 29 Nov 2018 15:51:27 +0100 Subject: Adds buttonWrapper --- packages/website/ts/@next/components/button.tsx | 10 ++++++++++ packages/website/ts/@next/pages/landing.tsx | 7 ++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index f69589373..39e30105a 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -18,6 +18,16 @@ export const Button: React.StatelessComponent = props => { return { props.children }; }; +// Added this, & + & doesnt really work since we switch with element types... +export const ButtonWrap = styled.div` + button + button, + a + a, + a + button, + button + a { + margin-left: 10px; + } +`; + const StyledButton = styled.button` appearance: none; border: 0; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index eb8adbde9..766eb809b 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { colors } from 'ts/style/colors' -import { Button } from 'ts/@next/components/button'; +import { Button, ButtonWrap } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Intro, Text } from 'ts/@next/components/text'; @@ -22,7 +22,8 @@ export const NextLanding = () => ( Powering Decentralized Exchange 0x is the best solution for adding exchange functionality to your business. -
+ + @@ -30,7 +31,7 @@ export const NextLanding = () => ( -
+ -- cgit From 5294c31997a20e4ff9daf25b62f5b78e42419daf Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 15:57:03 +0100 Subject: Format styles --- .../website/ts/@next/constants/globalStyle.tsx | 28 +++++++++++++++------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 0775813d9..660832c60 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -1,11 +1,11 @@ -import { createGlobalStyle } from 'styled-components'; -import { cssReset } from 'ts/@next/constants/cssReset'; -import { colors } from 'ts/style/colors'; +import {createGlobalStyle} from 'styled-components'; +import {cssReset} from 'ts/@next/constants/cssReset'; +import {colors} from 'ts/style/colors'; -// Not sure if cssReset is already imported into index.tsx -// Also: currently createglobalStyle from styled-components is -// throwing a warning about how there's not typing exported from styled-comps -const GlobalStyles = createGlobalStyle` +// Not sure if cssReset is already imported into index.tsx Also: currently +// createglobalStyle from styled-components is throwing a warning about how +// there's not typing exported from styled-comps +const GlobalStyles = createGlobalStyle ` ${cssReset}; @font-face { @@ -32,7 +32,17 @@ const GlobalStyles = createGlobalStyle` -webkit-font-smoothing: antialiased; color: #fff; } -`; + .visuallyHidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } +`; -export { GlobalStyles } +export {GlobalStyles}; -- cgit From 83499176d9b627d383a7edc17dd862861af05320 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 17:43:17 +0100 Subject: Adjust global font size --- packages/website/ts/@next/components/container.tsx | 4 ++-- packages/website/ts/@next/components/header.tsx | 7 ++++--- packages/website/ts/@next/constants/globalStyle.tsx | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx index 4eacb5e51..1e8aae793 100644 --- a/packages/website/ts/@next/components/container.tsx +++ b/packages/website/ts/@next/components/container.tsx @@ -8,9 +8,9 @@ interface ContainerProps { const StyledContainer = styled.div` background-color: ${props => props.bgColor || 'transparent'}; - max-width: 117rem; // 2000px + max-width: 111.111111111rem; // 2000px margin: 0 auto; - padding: 0 1.764705882rem; // 30px + padding: 0 1.666666667rem; // 30px ${props => props.removePadding && `padding: 0;`} `; diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index ac37e3ab2..0d4679df6 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -15,11 +15,12 @@ const StyledHeader = styled.header` align-items: center; justify-content: space-between; padding: 1.764705882rem 0; + padding: 1.666666667rem 0; `; const Text = styled.span` font-size: 1rem; - line-height: 1.375rem; + line-height: 1.222222222em; `; const Links = styled.div` @@ -29,8 +30,8 @@ const Links = styled.div` const Link = styled.a` color: rgba(255, 255, 255, 0.5); - font-size: 18px; - margin: 0 1.764705882rem; + font-size: 1rem; + margin: 0 1.666666667em; transition: color 0.25s ease-in-out; text-decoration: none; diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index 660832c60..be067473b 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -23,7 +23,7 @@ const GlobalStyles = createGlobalStyle ` } html { - font-size: 17px; + font-size: 18px; background-color: ${colors.backgroundBlack}; } -- cgit From 189920eab99a731dd6b0880a99ec8cc911b64314 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 09:55:38 +0100 Subject: Added newsletter form to footer --- packages/website/ts/@next/components/footer.tsx | 8 ++- packages/website/ts/@next/components/icon.tsx | 22 +++++++ .../website/ts/@next/components/newsletterForm.tsx | 76 ++++++++++++++++++++++ packages/website/ts/@next/icons/form-arrow.svg | 1 + 4 files changed, 104 insertions(+), 3 deletions(-) create mode 100644 packages/website/ts/@next/components/icon.tsx create mode 100644 packages/website/ts/@next/components/newsletterForm.tsx create mode 100644 packages/website/ts/@next/icons/form-arrow.svg diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index b962b8f34..0aff4e840 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -4,9 +4,10 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button } from './button'; -import { Column, Section, Wrap } from './layout'; -import { Logo } from './logo'; +import { Button } from 'ts/@next/components/button'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { Logo } from 'ts/@next/components/logo'; +import { NewsletterForm } from 'ts/@next/components/newsletterForm'; interface FooterInterface { } @@ -61,6 +62,7 @@ export const Footer: React.StatelessComponent = ({}) => ( + diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx new file mode 100644 index 000000000..10916f28e --- /dev/null +++ b/packages/website/ts/@next/components/icon.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + icon: any; + size?: any; +} + +const StyledIcon = styled.div` + margin: auto; + flex-shrink: 0; + + ${(props: Props) => props.size && ` + width: ${props.size}; height: auto; + `} +`; + +export const Icon: React.StatelessComponent = ({ icon, ...props }) => ( + <> + + +); diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx new file mode 100644 index 000000000..6a82acbff --- /dev/null +++ b/packages/website/ts/@next/components/newsletterForm.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import formArrow from 'ts/@next/icons/form-arrow.svg'; + +import {Button} from 'ts/@next/components/button'; +import {Icon} from 'ts/@next/components/icon'; + +interface InputProps { + name: string; + label: string; +} + +interface Props { +} + +const Input = ({ ...props }) => { + const { name, label } = props; + const id = 'input-' + name; + + return ( + <> + + + + ) +}; + +export const NewsletterForm: React.StatelessComponent = (props: Props) => ( + + + + + + Subscribe to our newsletter for updates in the 0x ecosystem + +); + +const StyledForm = styled.form` + appearance: none; + border: 0; + color: ${colors.white}; + padding: 13px 0 14px; + margin-top: 27px; +`; + +const StyledInput = styled.input` + appearance: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid #393939; + color: ${colors.textDarkSecondary}; + font-size: 1.294117647rem; + padding: 0 0 16px; + width: 100%; + margin-bottom: 13px; +`; + +const InputWrapper = styled.div` + position: relative; +`; + +const ButtonWrapper = styled(Button)` + display: flex; + justify-content: center; + align-items: center; +`; + +const Text = styled.span` + color: #656565; + font-size: 0.833333333rem; + font-weight: 300; + line-height: 1.2em; +`; diff --git a/packages/website/ts/@next/icons/form-arrow.svg b/packages/website/ts/@next/icons/form-arrow.svg new file mode 100644 index 000000000..2070a6d48 --- /dev/null +++ b/packages/website/ts/@next/icons/form-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit From ab24dcc29098c7b0c65c0e19be89a15bec3426af Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 09:56:01 +0100 Subject: Hide trade button on mobile --- packages/website/ts/@next/components/header.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 0d4679df6..9b80ec167 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -11,10 +11,10 @@ interface HeaderInterface { const StyledHeader = styled.header` display: flex; + flex-wrap: wrap; text-align: center; align-items: center; justify-content: space-between; - padding: 1.764705882rem 0; padding: 1.666666667rem 0; `; @@ -40,6 +40,12 @@ const Link = styled.a` } `; +const TradeButton = styled(Button)` + @media (max-width: 999px) { + display: none; + } +`; + const links = [ { url: '#', text: 'Why 0x' }, { url: '#', text: 'Products' }, @@ -55,7 +61,7 @@ export const Header: React.StatelessComponent = ({}) => ( {_.map(links, (link, index) => {link.text})} - + Trade on 0x ); -- cgit From d6b92e5786b311f16b72411b75900c5aa1fe8394 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 09:57:49 +0100 Subject: Add center prop to text --- packages/website/ts/@next/components/text.tsx | 54 ++++++++++++++++++--------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 1d4fdcef8..911417639 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -8,10 +8,41 @@ interface Props { center?: boolean; } +export const Heading: React.StatelessComponent = ({ children, ...props }) => ( + {children} +); + +export const Intro: React.StatelessComponent = ({ children, ...props }) => ( + {children} +); + +export const Text: React.StatelessComponent = ({ children, ...props }) => ( + {children} +); + +Heading.defaultProps = { + size: 'normal', + center: false, +}; + +Intro.defaultProps = { + size: 'normal', + center: false, +}; + +Text.defaultProps = { + size: 'normal', + center: false, +}; + const StyledHeading = styled.h1` color: ${colors.white}; font-size: 80px; line-height: 1em; + + ${(props: Props) => props.center && ` + text-align: center + `} `; const StyledIntro = styled.p` @@ -19,6 +50,10 @@ const StyledIntro = styled.p` opacity: 0.75; font-size: 22px; line-height: 1.823529412em; + + ${(props: Props) => props.center && ` + text-align: center + `} `; const StyledText = styled.p` @@ -31,21 +66,4 @@ const StyledText = styled.p` ${(props: Props) => props.center && ` text-align: center `} -`; - -export const Heading: React.StatelessComponent = ({ children }) => ( - {children} -); - -export const Intro: React.StatelessComponent = ({ children }) => ( - {children} -); - -export const Text: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); - -Text.defaultProps = { - size: 'normal', - center: false, -}; +`; \ No newline at end of file -- cgit From 3586dde4803d09209af570bc565c45f247f5e0ff Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 09:58:09 +0100 Subject: Started on why 0x --- .../ts/@next/icons/illustrations/customize.svg | 1 + packages/website/ts/@next/pages/why.tsx | 62 ++++++++++++++++++++++ packages/website/ts/index.tsx | 5 +- 3 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 packages/website/ts/@next/icons/illustrations/customize.svg create mode 100644 packages/website/ts/@next/pages/why.tsx diff --git a/packages/website/ts/@next/icons/illustrations/customize.svg b/packages/website/ts/@next/icons/illustrations/customize.svg new file mode 100644 index 000000000..f93ced0f7 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/customize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx new file mode 100644 index 000000000..ec13d40c5 --- /dev/null +++ b/packages/website/ts/@next/pages/why.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Button, ButtonTransparent } from 'ts/@next/components/button'; +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { Heading, Intro, Text } from 'ts/@next/components/text'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Icon } from 'ts/@next/components/icon'; + +import protocol from 'ts/@next/icons/illustrations/protocol.svg'; +import customize from 'ts/@next/icons/illustrations/customize.svg'; +import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; + +export const NextWhy = () => ( + +
+ + + The exchange layer for the crypto economy + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + Build on 0x (arrow) + + +
+ +
+ + + + Support for all Ethereum Standards + 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... + + + + + Shared Networked Liquidity + 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. + + + + + Customize the User Experience + Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. + + +
+ +
+ + + This is a 1 COLUMN section + + + + This is a 2 COLUMN section + + +
+ +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 062a3e08e..39e8da177 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -19,10 +19,9 @@ import { store } from 'ts/redux/store'; import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; - // Next (new website) routes. We should rename them later import { NextLanding } from 'ts/@next/pages/landing'; - +import { NextWhy } from 'ts/@next/pages/why'; // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); @@ -110,7 +109,7 @@ render( {/* Next (new site) routes */} - + Date: Fri, 30 Nov 2018 10:47:26 +0100 Subject: Linter fixes --- packages/website/ts/@next/components/button.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 39e30105a..2e8fd03cf 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,19 +3,18 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; - interface ButtonInterface { children: Node | string; transparent?: any; inline?: any; - href?: string, + href?: string; onClick?: () => void; } export const Button: React.StatelessComponent = props => { const { onClick } = props; const Component = onClick ? StyledButton : StyledButton.withComponent('a'); - return { props.children }; + return {props.children}; }; // Added this, & + & doesnt really work since we switch with element types... -- cgit From fff4dd7e947f7f66e0854dea5d192c72b9e3d674 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:08 +0100 Subject: Export svgs as typed pure components --- packages/website/ts/@next/components/icon.tsx | 21 ++++---- packages/website/ts/@next/components/logo.tsx | 6 +-- packages/website/ts/@next/pages/landing.tsx | 9 ++-- packages/website/ts/@next/pages/why.tsx | 76 ++++++++++++++++++++++----- packages/website/ts/globals.d.ts | 6 ++- 5 files changed, 87 insertions(+), 31 deletions(-) diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 10916f28e..112d4ed68 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -3,20 +3,23 @@ import styled from 'styled-components'; interface Props { icon: any; - size?: any; + size?: string; } -const StyledIcon = styled.div` +export const IconClass: React.FunctionComponent = (props: Props) => { + const { icon, size } = props; + + return ( +
+ ); +}; + +export const Icon = styled(IconClass)` margin: auto; flex-shrink: 0; ${(props: Props) => props.size && ` - width: ${props.size}; height: auto; + width: ${props.size}; + height: auto; `} `; - -export const Icon: React.StatelessComponent = ({ icon, ...props }) => ( - <> - - -); diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 59db7d0ec..1a02e211e 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; -import logoWithType from '../icons/logo-with-type.svg'; +import LogoIcon from '../icons/logo-with-type.svg'; interface LogoInterface { // showType: boolean; @@ -11,12 +11,12 @@ const StyledLogo = styled.div` text-align: left; `; -const Icon = styled.div` +const Icon = styled(LogoIcon)` flex-shrink: 0; `; export const Logo: React.StatelessComponent = ({}) => ( - + ); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 766eb809b..9be2ee4da 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -7,9 +7,8 @@ import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout' import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Intro, Text } from 'ts/@next/components/text'; -import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; -import protocol from 'ts/@next/icons/illustrations/protocol.svg'; - +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; const Icon = styled.div` flex-shrink: 0; @@ -35,14 +34,14 @@ export const NextLanding = () => ( - +
- + 0x is the best solution for adding exchange functionality to your business. Discover how developers use 0x (need arrow + line under) diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index ec13d40c5..ce2ad5308 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -3,22 +3,21 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import { Button, ButtonTransparent } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Icon } from 'ts/@next/components/icon'; +import { Heading, Intro, Text } from 'ts/@next/components/text'; -import protocol from 'ts/@next/icons/illustrations/protocol.svg'; -import customize from 'ts/@next/icons/illustrations/customize.svg'; -import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; +import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; export const NextWhy = () => (
- The exchange layer for the crypto economy + The exchange layer for the crypto economy The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. Build on 0x (arrow) @@ -28,19 +27,19 @@ export const NextWhy = () => (
- + Support for all Ethereum Standards 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... - + Shared Networked Liquidity 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. - + Customize the User Experience Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. @@ -50,13 +49,66 @@ export const NextWhy = () => (
- This is a 1 COLUMN section + Benefits + Use Cases + Features - This is a 2 COLUMN section + What 0x offers + + A Standard for Exchange + 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. + + + Robust Smart Contracts + 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. + + + Extensible Architecture + 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. + + + Efficient Design + 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. + + Use Cases + slider + + Exchange Functionality + + + Secure Non-custodial Trading + Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. + + + Flexible Order Types + Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. + + + Build a Business + Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. + + + Networked Liquidity + Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.
); + +const ChapterLink = styled.a` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 097c8171e..cf23623a6 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -12,8 +12,10 @@ declare module '*.json' { } declare module '*.svg' { - const svg: any; - export default svg; + //const svg: any; + //export default svg; + import {PureComponent, SVGProps} from "react"; + export default class extends PureComponent> {} } declare module 'web3-provider-engine/subproviders/filters'; -- cgit From d586c1f67af425aa5cda9af44b07c47be6c1ff80 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:14 +0100 Subject: Added coin icon --- packages/website/ts/@next/icons/illustrations/coin.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/website/ts/@next/icons/illustrations/coin.svg diff --git a/packages/website/ts/@next/icons/illustrations/coin.svg b/packages/website/ts/@next/icons/illustrations/coin.svg new file mode 100644 index 000000000..eaf3862c7 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/coin.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit From 9b6d738ab102b47a133260f8515071396a0fe6cc Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:21 +0100 Subject: Tweak global styles --- .../website/ts/@next/constants/globalStyle.tsx | 84 ++++++++++++---------- 1 file changed, 47 insertions(+), 37 deletions(-) diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index be067473b..a7dd3418d 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -6,43 +6,53 @@ import {colors} from 'ts/style/colors'; // createglobalStyle from styled-components is throwing a warning about how // there's not typing exported from styled-comps const GlobalStyles = createGlobalStyle ` - ${cssReset}; - - @font-face { - font-family: "Formular"; - src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff"); - font-weight: 300; - font-display: swap; - } - - @font-face { - font-family: "Formular"; - src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff"); - font-weight: 400; - font-display: swap; - } - - html { - font-size: 18px; - background-color: ${colors.backgroundBlack}; - } - - body { - font-family: 'Formular', sans-serif !important; - -webkit-font-smoothing: antialiased; - color: #fff; - } - - .visuallyHidden { - position: absolute !important; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); - padding:0 !important; - border:0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } + ${cssReset}; + + @font-face { + font-family: "Formular"; + src: url("/fonts/Formular-Light.woff2") format("woff2"), url("/fonts/Formular-Light.woff") format("woff"); + font-weight: 300; + font-display: swap; + } + + @font-face { + font-family: "Formular"; + src: url("/fonts/Formular-Regular.woff2") format("woff2"), url("/fonts/Formular-Regular.woff") format("woff"); + font-weight: 400; + font-display: swap; + } + + html { + font-size: 18px; + background-color: ${colors.backgroundBlack}; + } + + body { + font-family: 'Formular', sans-serif !important; + -webkit-font-smoothing: antialiased; + color: ${colors.white}; + } + + .visuallyHidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; + } + + p { + font-size: 1rem; + line-height: 1.444444444em; // 26px + } + + :root a { + color: inherit; + text-decoration: none; + } `; export {GlobalStyles}; -- cgit From 1105d768612474611a40e090e1e2bddcb30952ab Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:31 +0100 Subject: Linting format --- packages/website/ts/@next/components/siteWrap.tsx | 26 +++++++++-------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 828842064..a175c6901 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -12,26 +12,20 @@ interface Props { } -const SiteWrap: React.StatelessComponent = props => { +export const SiteWrap: React.StatelessComponent = props => { const { children } = props; return ( <> - {/* GlobalStyles will be exposed the theme via provider, - same is true for all children of SiteWrap - */} - - -
- -
- { children } -
- -
+ {/* GlobalStyles will be exposed the theme via provider, + same is true for all children of SiteWrap + */} + +
+
+ {children} +
+
); }; - - -export { SiteWrap }; -- cgit From 7161e8fed9f64edaa3162642db89f4464b49e876 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:40 +0100 Subject: Tweak submit position --- packages/website/ts/@next/components/newsletterForm.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx index 6a82acbff..422d25bec 100644 --- a/packages/website/ts/@next/components/newsletterForm.tsx +++ b/packages/website/ts/@next/components/newsletterForm.tsx @@ -3,10 +3,9 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -import formArrow from 'ts/@next/icons/form-arrow.svg'; - import {Button} from 'ts/@next/components/button'; -import {Icon} from 'ts/@next/components/icon'; + +import ArrowIcon from 'ts/@next/icons/form-arrow.svg'; interface InputProps { name: string; @@ -25,14 +24,16 @@ const Input = ({ ...props }) => { - ) + ); }; export const NewsletterForm: React.StatelessComponent = (props: Props) => ( - + + Submit + Subscribe to our newsletter for updates in the 0x ecosystem @@ -62,10 +63,13 @@ const InputWrapper = styled.div` position: relative; `; -const ButtonWrapper = styled(Button)` +const SubmitButton = styled(Button)` display: flex; justify-content: center; align-items: center; + position: absolute; + right: 0; + top: calc(50% - 29px); `; const Text = styled.span` -- cgit From 849b7441856eff50375b46f4d88897c7029ae07b Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:51 +0100 Subject: Linting + typing --- packages/website/ts/@next/components/button.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 2e8fd03cf..89d1114fd 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -6,6 +6,7 @@ import { colors } from 'ts/style/colors'; interface ButtonInterface { children: Node | string; transparent?: any; + hasIcon?: any; inline?: any; href?: string; onClick?: () => void; @@ -19,12 +20,12 @@ export const Button: React.StatelessComponent = props => { // Added this, & + & doesnt really work since we switch with element types... export const ButtonWrap = styled.div` - button + button, - a + a, - a + button, - button + a { - margin-left: 10px; - } + button + button, + a + a, + a + button, + button + a { + margin-left: 10px; + } `; const StyledButton = styled.button` -- cgit From 4d7db045e9c6faa69fc8018c6c36e63fe562973c Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 12:05:56 +0100 Subject: Tweak text --- packages/website/ts/@next/components/text.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 911417639..4c6765cf6 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -5,6 +5,7 @@ import { colors } from 'ts/style/colors'; interface Props { size?: 'normal' | 'medium' | 'large'; + muted?: any; center?: boolean; } @@ -37,12 +38,22 @@ Text.defaultProps = { const StyledHeading = styled.h1` color: ${colors.white}; - font-size: 80px; - line-height: 1em; + font-size: 1.111111111rem; + line-height: 1.4em; ${(props: Props) => props.center && ` text-align: center `} + + ${(props: Props) => props.size === 'medium' && ` + font-size: 3.222222222rem; // 50px + line-height: 1.16em; + `} + + ${(props: Props) => props.size === 'large' && ` + font-size: 4.444444444rem; // 80px + line-height: 1em; + `} `; const StyledIntro = styled.p` @@ -66,4 +77,8 @@ const StyledText = styled.p` ${(props: Props) => props.center && ` text-align: center `} -`; \ No newline at end of file + + ${(props: Props) => props.muted && ` + opacity: ${typeof props.muted === 'string' ? props.muted : '0.8'}; + `} +`; -- cgit From df213ac0d52c29e23e06d135b911df8263d4e6fc Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 12:13:24 +0100 Subject: Text and landing --- packages/website/ts/@next/components/container.tsx | 4 + packages/website/ts/@next/components/layout.tsx | 122 +++++++++++---------- packages/website/ts/@next/components/text.tsx | 119 +++++++++----------- packages/website/ts/@next/pages/landing.tsx | 88 +++++++++++---- 4 files changed, 185 insertions(+), 148 deletions(-) diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx index 1e8aae793..58aaa8be9 100644 --- a/packages/website/ts/@next/components/container.tsx +++ b/packages/website/ts/@next/components/container.tsx @@ -6,6 +6,10 @@ interface ContainerProps { removePadding?: boolean; } + +// are we still using this component? (i think not, so we should delete, but have notes) +// Also, i dont understand why create a styled comp and then make a stateless component that returns the same thing? +// should be enough to just export a styled component as it is understood that it takes props and a child const StyledContainer = styled.div` background-color: ${props => props.bgColor || 'transparent'}; max-width: 111.111111111rem; // 2000px diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index c807ccb36..1eecf0a55 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -2,112 +2,114 @@ import * as React from 'react'; import styled from 'styled-components'; interface WrapWidths { - default: string; - full: string; - medium: string; - narrow: string; - [key: string]: string; + default: string; + full: string; + medium: string; + narrow: string; + [key: string]: string; } interface ColumnWidths { - [key: string]: string; + [key: string]: string; } interface SectionProps { - noPadding?: any; - noMargin?: any; - bgColor?: string; - fullWidth?: any; + noPadding?: any; + noMargin?: any; + bgColor?: string; + fullWidth?: any; } interface WrapProps { - width?: 'default' | 'full' | 'medium' | 'narrow'; - bgColor?: string; + width?: 'default' | 'full' | 'medium' | 'narrow'; + bgColor?: string; } interface ColumnProps { - colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; + colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; + noPadding?: any; + bgColor?: string; } interface GetColWidthArgs { - span?: number; - columns: number; + span?: number; + columns: number; } const _getColumnWidth = (args: GetColWidthArgs) => { - const { span = 1, columns } = args; - const percentWidth = (span / columns) * 100; - const gutterDiff = (GUTTER * (columns - 1)) / columns; - return `calc(${percentWidth}% - ${gutterDiff}px)`; + const { span = 1, columns } = args; + const percentWidth = (span / columns) * 100; + const gutterDiff = (GUTTER * (columns - 1)) / columns; + return `calc(${percentWidth}% - ${gutterDiff}px)`; }; const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { - mobile: '768px', + mobile: '768px', }; const WRAPPER_WIDTHS: WrapWidths = { - default: `${MAX_WIDTH}px`, // tbd - full: '100%', - medium: '1136px', - narrow: '930px', + default: `${MAX_WIDTH}px`, // tbd + full: '100%', + medium: '1136px', + narrow: '930px', }; const COLUMN_WIDTHS: ColumnWidths = { - '1/4': _getColumnWidth({ columns: 4 }), - '1/3': _getColumnWidth({ columns: 3 }), - '1/2': _getColumnWidth({ columns: 2 }), - '2/3': _getColumnWidth({ span: 2, columns: 3 }), + '1/4': _getColumnWidth({ columns: 4 }), + '1/3': _getColumnWidth({ columns: 3 }), + '1/2': _getColumnWidth({ columns: 2 }), + '2/3': _getColumnWidth({ span: 2, columns: 3 }), }; export const Main = styled.main` - border: 1px dotted rgba(0, 0, 255, 0.3); - width: calc(100% - 60px); - max-width: ${MAX_WIDTH}px; - margin: 0 auto; + border: 1px dotted rgba(0, 0, 255, 0.3); + width: calc(100% - 60px); + max-width: ${MAX_WIDTH}px; + margin: 0 auto; `; export const Section = styled.section` - width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && '30px'}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; - background-color: ${props => props.bgColor}; - border: 1px dotted rgba(0, 255, 0, 0.3); - - @media (min-width: 1560px) { - width: ${props => props.fullWidth && '100vw'}; - margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; - } + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; + padding: ${props => !props.noPadding && '30px'}; + margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; + background-color: ${props => props.bgColor}; + border: 1px dotted rgba(0, 255, 0, 0.3); + + @media (min-width: 1560px) { + width: ${props => props.fullWidth && '100vw'}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + } `; const WrapBase = styled.div` - max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - background-color: ${props => props.bgColor}; - margin: 0 auto; + max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + background-color: ${props => props.bgColor}; + margin: 0 auto; `; export const Wrap = styled(WrapBase)` - @media (min-width: ${BREAKPOINTS.mobile}) { - display: flex; - justify-content: space-between; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + display: flex; + justify-content: space-between; + } `; export const WrapCentered = styled(WrapBase)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; `; export const Column = styled.div` - padding: ${props => !props.noPadding && '30px'}; - border: 1px dotted rgba(255, 0, 0, 0.3); + padding: ${props => !props.noPadding && '30px'}; + border: 1px dotted rgba(255, 0, 0, 0.3); + background-color: ${props => props.bgColor}; - @media (min-width: ${BREAKPOINTS.mobile}) { - width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; + } `; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 4c6765cf6..ca2130563 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,84 +1,71 @@ import * as React from 'react'; import styled from 'styled-components'; - import { colors } from 'ts/style/colors'; -interface Props { - size?: 'normal' | 'medium' | 'large'; - muted?: any; + +interface HeadingProps { + asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + size?: 'default' | 'medium' | 'large'; center?: boolean; + children: Node | string; + noMargin?: any; } -export const Heading: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); - -export const Intro: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); - -export const Text: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); +interface ParagraphProps { + noMargin?: any; + size?: 'default' | 'small' | 'medium' | 'large'; + muted?: any; + center?: any; +} -Heading.defaultProps = { - size: 'normal', - center: false, -}; +interface HeadingSizes { + large: string; + medium: string; + default: string; + small: string; + [key: string]: string; +} -Intro.defaultProps = { - size: 'normal', - center: false, -}; +interface ParagraphSizes { + default: string; + [key: string]: string; +} -Text.defaultProps = { - size: 'normal', - center: false, +const HEADING_SIZES: HeadingSizes = { + large: '80px', + medium: '50px', + default: '28px', + small: '20px', }; -const StyledHeading = styled.h1` - color: ${colors.white}; - font-size: 1.111111111rem; - line-height: 1.4em; - - ${(props: Props) => props.center && ` - text-align: center - `} - - ${(props: Props) => props.size === 'medium' && ` - font-size: 3.222222222rem; // 50px - line-height: 1.16em; - `} +const PARAGRAPH_SIZES: ParagraphSizes = { + default: '18px', + medium: '22px', + large: '28px', +} - ${(props: Props) => props.size === 'large' && ` - font-size: 4.444444444rem; // 80px - line-height: 1em; - `} +const StyledHeading = styled.h1` + color: ${props => props.color || colors.white}; + font-size: ${props => HEADING_SIZES[props.size || 'default']}; + margin-bottom: ${props => !props.noMargin && '30px'}; + text-align: ${props => props.center && 'center'}; `; -const StyledIntro = styled.p` - color: ${colors.white}; - opacity: 0.75; - font-size: 22px; - line-height: 1.823529412em; - - ${(props: Props) => props.center && ` - text-align: center - `} -`; +export const Heading: React.StatelessComponent = props => { + const { + asElement = 'h1', + children, + } = props; + const Component = StyledHeading.withComponent(asElement); -const StyledText = styled.p` - color: ${colors.white}; - font-size: 1rem; - ${(props: Props) => props.size === 'medium' && ` - font-size: 1.555555556rem; - line-height: 1.357142857em; - `} - ${(props: Props) => props.center && ` - text-align: center - `} + return { children }; +}; - ${(props: Props) => props.muted && ` - opacity: ${typeof props.muted === 'string' ? props.muted : '0.8'}; - `} +// No need to declare it twice as Styled then rewrap as a stateless comp +export const Paragraph = styled.p` + font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; + margin-bottom: ${props => !props.noMargin && '30px'}; + line-height: 1.4; + color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`}; + text-align: ${props => props.center && 'center'}; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 9be2ee4da..d207bd9ff 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors' import { Button, ButtonWrap } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; +import { Heading, Paragraph } from 'ts/@next/components/text'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; @@ -18,9 +18,14 @@ export const NextLanding = () => (
- - Powering Decentralized Exchange - 0x is the best solution for adding exchange functionality to your business. + + + Powering Decentralized Exchange + + + + 0x is the best solution for adding exchange functionality to your business. +
- - - 0x is the best solution for adding exchange functionality to your business. - Discover how developers use 0x (need arrow + line under) + + + + + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. + + + + + + {/* NOTE: this probably should be withComponent as part of a
*/} + + + 873,435 + + + + Number of transactions + + + + + + $203M + + + + Total volume + + + + + + 227,372 + + + + Number of relayers + + + +
+ +
+ + + This is a 2 COLUMN section + + + + Again a 2 column section + +
@@ -95,17 +151,5 @@ export const NextLanding = () => (
- -
- - - This is a 2 COLUMN section - - - - Again a 2 column section - - -
); -- cgit From e13406cbf463f6c3e4340a4b63f426251d00b835 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 12:15:20 +0100 Subject: Just makes it render --- packages/website/ts/@next/pages/landing.tsx | 4 +- packages/website/ts/@next/pages/why.tsx | 228 ++++++++++++++-------------- 2 files changed, 116 insertions(+), 116 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index d207bd9ff..451c70d3e 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -39,14 +39,14 @@ export const NextLanding = () => ( - +
- + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index ce2ad5308..44eb8fde3 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,114 +1,114 @@ -import * as React from 'react'; -import styled from 'styled-components'; - -import { colors } from 'ts/style/colors'; - -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; -import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; - -import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; -import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; -import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; - -export const NextWhy = () => ( - -
- - - The exchange layer for the crypto economy - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - Build on 0x (arrow) - - -
- -
- - - - Support for all Ethereum Standards - 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... - - - - - Shared Networked Liquidity - 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. - - - - - Customize the User Experience - Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. - - -
- -
- - - Benefits - Use Cases - Features - - - - What 0x offers - - A Standard for Exchange - 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. - - - Robust Smart Contracts - 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. - - - Extensible Architecture - 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. - - - Efficient Design - 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. - - Use Cases - slider - - Exchange Functionality - - - Secure Non-custodial Trading - Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. - - - Flexible Order Types - Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. - - - Build a Business - Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. - - - Networked Liquidity - Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. - - -
- -); - -const ChapterLink = styled.a` - font-size: 1.222222222rem; - display: block; - opacity: 0.8; - margin-bottom: 1.666666667rem; - - &:first-child { - opacity: 1; - } - - &:hover { - opacity: 1; - } -`; +// import * as React from 'react'; +// import styled from 'styled-components'; +// +// import { colors } from 'ts/style/colors'; +// +// import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +// import { SiteWrap } from 'ts/@next/components/siteWrap'; +// import { Heading, Intro, Text } from 'ts/@next/components/text'; +// +// import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; +// import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; +// import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +// import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +// +// export const NextWhy = () => ( +// +//
+// +// +// The exchange layer for the crypto economy +// The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. +// Build on 0x (arrow) +// +// +//
+// +//
+// +// +// +// Support for all Ethereum Standards +// 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... +// +// +// +// +// Shared Networked Liquidity +// 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. +// +// +// +// +// Customize the User Experience +// Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. +// +// +//
+// +//
+// +// +// Benefits +// Use Cases +// Features +// +// +// +// What 0x offers +// +// A Standard for Exchange +// 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. +// +// +// Robust Smart Contracts +// 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. +// +// +// Extensible Architecture +// 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. +// +// +// Efficient Design +// 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. +// +// Use Cases +// slider +// +// Exchange Functionality +// +// +// Secure Non-custodial Trading +// Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. +// +// +// Flexible Order Types +// Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. +// +// +// Build a Business +// Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. +// +// +// Networked Liquidity +// Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. +// +// +//
+// +// ); +// +// const ChapterLink = styled.a` +// font-size: 1.222222222rem; +// display: block; +// opacity: 0.8; +// margin-bottom: 1.666666667rem; +// +// &:first-child { +// opacity: 1; +// } +// +// &:hover { +// opacity: 1; +// } +// `; -- cgit From 203baa4541fd4c5b033a2e64342c1cbe93976e7a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 12:28:56 +0100 Subject: Replaces Text elements in why route --- packages/website/ts/@next/components/text.tsx | 2 + packages/website/ts/@next/pages/why.tsx | 228 +++++++++++++------------- 2 files changed, 116 insertions(+), 114 deletions(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index ca2130563..738441def 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -28,6 +28,8 @@ interface HeadingSizes { interface ParagraphSizes { default: string; + medium: string; + large: string; [key: string]: string; } diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 44eb8fde3..4e5120b8d 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -1,114 +1,114 @@ -// import * as React from 'react'; -// import styled from 'styled-components'; -// -// import { colors } from 'ts/style/colors'; -// -// import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; -// import { SiteWrap } from 'ts/@next/components/siteWrap'; -// import { Heading, Intro, Text } from 'ts/@next/components/text'; -// -// import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; -// import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; -// import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; -// import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; -// -// export const NextWhy = () => ( -// -//
-// -// -// The exchange layer for the crypto economy -// The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. -// Build on 0x (arrow) -// -// -//
-// -//
-// -// -// -// Support for all Ethereum Standards -// 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... -// -// -// -// -// Shared Networked Liquidity -// 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. -// -// -// -// -// Customize the User Experience -// Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. -// -// -//
-// -//
-// -// -// Benefits -// Use Cases -// Features -// -// -// -// What 0x offers -// -// A Standard for Exchange -// 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. -// -// -// Robust Smart Contracts -// 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. -// -// -// Extensible Architecture -// 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. -// -// -// Efficient Design -// 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. -// -// Use Cases -// slider -// -// Exchange Functionality -// -// -// Secure Non-custodial Trading -// Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. -// -// -// Flexible Order Types -// Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. -// -// -// Build a Business -// Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. -// -// -// Networked Liquidity -// Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. -// -// -//
-// -// ); -// -// const ChapterLink = styled.a` -// font-size: 1.222222222rem; -// display: block; -// opacity: 0.8; -// margin-bottom: 1.666666667rem; -// -// &:first-child { -// opacity: 1; -// } -// -// &:hover { -// opacity: 1; -// } -// `; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; +import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg'; +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; + +export const NextWhy = () => ( + +
+ + + The exchange layer for the crypto economy + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + Build on 0x (arrow) + + +
+ +
+ + + + Support for all Ethereum Standards + 0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol... + + + + + Shared Networked Liquidity + 0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system. + + + + + Customize the User Experience + Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces. + + +
+ +
+ + + Benefits + Use Cases + Features + + + + What 0x offers + + A Standard for Exchange + 0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721. + + + Robust Smart Contracts + 0x Protocol's smart contracts have been put through two rounds of rigorous security audits. + + + Extensible Architecture + 0x's modular pipeline enables you to plug in your own smart contracts through an extensible API. + + + Efficient Design + 0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat. + + Use Cases + slider + + Exchange Functionality + + + Secure Non-custodial Trading + Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals. + + + Flexible Order Types + Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids. + + + Build a Business + Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem. + + + Networked Liquidity + Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book. + + +
+ +); + +const ChapterLink = styled.a` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; -- cgit From d6329a83d50dcb8c20c090f9cd7ae25bca8c417d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 13:08:36 +0100 Subject: Linting errors --- packages/website/ts/@next/pages/landing.tsx | 288 ++++++++++++++-------------- packages/website/ts/@next/pages/why.tsx | 2 +- 2 files changed, 146 insertions(+), 144 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 451c70d3e..ee9dd188e 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,155 +1,157 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from 'ts/style/colors' -import { Button, ButtonWrap } from 'ts/@next/components/button'; -import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; -import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Paragraph } from 'ts/@next/components/text'; +import {colors} from 'ts/style/colors'; + +import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; +import {SiteWrap} from 'ts/@next/components/siteWrap'; +import {Heading, Paragraph} from 'ts/@next/components/text'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; -const Icon = styled.div` +const Icon = styled.div ` flex-shrink: 0; `; export const NextLanding = () => ( - -
- - - - Powering Decentralized Exchange - - - - 0x is the best solution for adding exchange functionality to your business. - - - - - - - - - - - - - -
- -
- - - - - 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. - - - - - - - {/* NOTE: this probably should be withComponent as part of a
*/} - - - 873,435 - - - - Number of transactions - - - - - - $203M - - - - Total volume - - - - - - 227,372 - - - - Number of relayers - - - -
- -
- - - This is a 2 COLUMN section - - - - Again a 2 column section - - -
- -
- - - Powering Decentralized Exchange
- Example of a 2/3 1/3 assymetric composition - - - - RIGHT IMAGE - - -
- -
- - - SAMPLE FLUSHED width - - - - RIGHT IMAGE - - -
- -
- - 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets. - - - - - This - - - - is a - - - - three-column module - - -
- + +
+ + + + Powering Decentralized Exchange + + + + 0x is the best solution for adding exchange functionality to your business. + + + + + + + + + + + + + +
+ +
+ + + + + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based + tokens. Anyone in the world can use 0x to service a wide variety of markets + ranging from gaming items to financial instruments to assets that could have + near existed before. + + + + + + + {/* NOTE: this probably should be withComponent as part of a
*/} + + + 873,435 + + + + Number of transactions + + + + + + $203M + + + + Total volume + + + + + + 227,372 + + + + Number of relayers + + + +
+ +
+ + + This is a 2 COLUMN section + + + + Again a 2 column section + + +
+ +
+ + + Powering Decentralized Exchange
+ Example of a 2/3 1/3 assymetric composition + + + + RIGHT IMAGE + + +
+ +
+ + + SAMPLE FLUSHED width + + + + RIGHT IMAGE + + +
+ +
+ + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based + tokens. Anyone can utilize 0x to service a wide variety of markets ranging from + gaming items to traditional financial assets. + + + + + This + + + + is a + + + + three-column module + + +
+ ); diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 4e5120b8d..4a7aadcf2 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -19,7 +19,7 @@ export const NextWhy = () => ( The exchange layer for the crypto economy The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - Build on 0x (arrow) + Build on 0x (arrow)
-- cgit From 4456ba0f6ac24fa39bfa271b4acfa149dade1147 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 13:10:15 +0100 Subject: Fix tag --- packages/website/ts/@next/pages/why.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 4a7aadcf2..081cf8315 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -18,7 +18,7 @@ export const NextWhy = () => ( The exchange layer for the crypto economy - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. Build on 0x (arrow) -- cgit From 929eb456994e968521fc68139a19e166de360efb Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 13:36:01 +0100 Subject: Linting --- packages/website/ts/@next/components/text.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 738441def..7954a5f28 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -44,7 +44,7 @@ const PARAGRAPH_SIZES: ParagraphSizes = { default: '18px', medium: '22px', large: '28px', -} +}; const StyledHeading = styled.h1` color: ${props => props.color || colors.white}; @@ -60,7 +60,7 @@ export const Heading: React.StatelessComponent = props => { } = props; const Component = StyledHeading.withComponent(asElement); - return { children }; + return {children}; }; // No need to declare it twice as Styled then rewrap as a stateless comp -- cgit From e81bd1b7f00e83d6cc20e9793a4e7ada7782ba78 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 13:57:33 +0100 Subject: Speed up ts loading with cache --- packages/website/tsconfig.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 7d5f31b7f..042a3108e 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -20,5 +20,11 @@ "module": "esnext", "moduleResolution": "node" }, - "include": ["./ts/**/*"] + "include": ["./ts/**/*"], + "awesomeTypescriptLoaderOptions": { + "useCache": true, + "reportFiles": [ + "./ts/**/*" + ] + } } -- cgit From 47ef28f88f625bdfcf6bf3ea11a6ae1cc090c522 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:03:54 +0100 Subject: Adds awcache to gitignore --- packages/website/.gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/website/.gitignore diff --git a/packages/website/.gitignore b/packages/website/.gitignore new file mode 100644 index 000000000..1e8d1ceb4 --- /dev/null +++ b/packages/website/.gitignore @@ -0,0 +1 @@ +.awcache -- cgit From 0c2848c41887daa7bfee6297a7f134271bc2df1a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:04:19 +0100 Subject: Adds ts caching --- packages/website/package.json | 1 + yarn.lock | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/website/package.json b/packages/website/package.json index 75e147168..e30c41177 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -32,6 +32,7 @@ "@0x/web3-wrapper": "^3.1.5", "@types/styled-components": "^4.1.1", "accounting": "^0.4.1", + "awesome-typescript-loader": "^5.2.1", "basscss": "^8.0.3", "blockies": "^0.0.2", "bowser": "^1.9.3", diff --git a/yarn.lock b/yarn.lock index 3b6477f6e..fe12cf2e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2331,7 +2331,8 @@ autoprefixer@^6.3.1: awesome-typescript-loader@^5.2.1: version "5.2.1" - resolved "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc" + resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz#a41daf7847515f4925cdbaa3075d61f289e913fc" + integrity sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g== dependencies: chalk "^2.4.1" enhanced-resolve "^4.0.0" -- cgit From 2ba14d656ef21ef85bf8274020d18ae2cd2515b3 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:13:31 +0100 Subject: Some cleanup, reindent --- packages/website/ts/@next/components/layout.tsx | 6 +++-- packages/website/ts/@next/pages/landing.tsx | 29 ++++++++++++++++--------- packages/website/tsconfig.json | 5 +++-- 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 1eecf0a55..9bf063040 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -15,6 +15,7 @@ interface ColumnWidths { interface SectionProps { noPadding?: any; + padLarge?: any; noMargin?: any; bgColor?: string; fullWidth?: any; @@ -28,6 +29,7 @@ interface WrapProps { interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; noPadding?: any; + padLarge?: any; bgColor?: string; } @@ -72,7 +74,7 @@ export const Main = styled.main` export const Section = styled.section` width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && '30px'}; + padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; @@ -105,7 +107,7 @@ export const WrapCentered = styled(WrapBase)` `; export const Column = styled.div` - padding: ${props => !props.noPadding && '30px'}; + padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; border: 1px dotted rgba(255, 0, 0, 0.3); background-color: ${props => props.bgColor}; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index ee9dd188e..ab0a3bc55 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import {colors} from 'ts/style/colors'; @@ -10,6 +10,8 @@ import {Heading, Paragraph} from 'ts/@next/components/text'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; +import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg'; + const Icon = styled.div ` flex-shrink: 0; @@ -97,12 +99,18 @@ export const NextLanding = () => (
- - This is a 2 COLUMN section + + + + Ready to build on 0x? + - - Again a 2 column section + + + + Ready to build on 0x? +
@@ -120,7 +128,10 @@ export const NextLanding = () => (
-
+
SAMPLE FLUSHED width @@ -134,9 +145,7 @@ export const NextLanding = () => (
- 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based - tokens. Anyone can utilize 0x to service a wide variety of markets ranging from - gaming items to traditional financial assets. + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets. @@ -149,7 +158,7 @@ export const NextLanding = () => ( - three-column module + three-column module
diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 042a3108e..164955b85 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -20,11 +20,12 @@ "module": "esnext", "moduleResolution": "node" }, - "include": ["./ts/**/*"], "awesomeTypescriptLoaderOptions": { "useCache": true, "reportFiles": [ "./ts/**/*" ] - } + + }, + "include": ["./ts/**/*"] } -- cgit From e78226257265d938e1c3830c8a93199011fa085a Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:15:23 +0100 Subject: Add route links to header --- packages/website/ts/@next/components/header.tsx | 75 +++++++++++++++---------- 1 file changed, 44 insertions(+), 31 deletions(-) diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 9b80ec167..b09a7ed89 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -2,13 +2,51 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; +import { Link as ReactRouterLink } from 'react-router-dom'; + import { Button } from './button'; import { Container } from './container'; import { Logo } from './logo'; -interface HeaderInterface { +interface HeaderProps { +} + +interface LinkProps { + href: string; } +const links = [ + { url: '/next/why', text: 'Why 0x' }, + { url: '#', text: 'Products' }, + { url: '#', text: 'Developers' }, + { url: '#', text: 'About' }, + { url: '#', text: 'Blog' }, +]; + +const Link: React.StatelessComponent = props => { + const { children, href } = props; + + return ( + + {children} + + ); +}; + +export const Header: React.StatelessComponent = ({}) => ( + + + + + {_.map(links, (link, index) => {link.text})} + + Trade on 0x + + +); + const StyledHeader = styled.header` display: flex; flex-wrap: wrap; @@ -18,9 +56,10 @@ const StyledHeader = styled.header` padding: 1.666666667rem 0; `; -const Text = styled.span` - font-size: 1rem; - line-height: 1.222222222em; +const TradeButton = styled(Button)` + @media (max-width: 999px) { + display: none; + } `; const Links = styled.div` @@ -28,7 +67,7 @@ const Links = styled.div` justify-content: space-around; `; -const Link = styled.a` +const StyledRouterLink = styled(ReactRouterLink)` color: rgba(255, 255, 255, 0.5); font-size: 1rem; margin: 0 1.666666667em; @@ -39,29 +78,3 @@ const Link = styled.a` color: rgba(255, 255, 255, 1); } `; - -const TradeButton = styled(Button)` - @media (max-width: 999px) { - display: none; - } -`; - -const links = [ - { url: '#', text: 'Why 0x' }, - { url: '#', text: 'Products' }, - { url: '#', text: 'Developers' }, - { url: '#', text: 'About' }, - { url: '#', text: 'Blog' }, -]; - -export const Header: React.StatelessComponent = ({}) => ( - - - - - {_.map(links, (link, index) => {link.text})} - - Trade on 0x - - -); -- cgit From 0883f7087b36c89ab1c78b05fd6ef8a062cc17ca Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:18:11 +0100 Subject: Remove double reference --- packages/website/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/website/package.json b/packages/website/package.json index e30c41177..75e147168 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -32,7 +32,6 @@ "@0x/web3-wrapper": "^3.1.5", "@types/styled-components": "^4.1.1", "accounting": "^0.4.1", - "awesome-typescript-loader": "^5.2.1", "basscss": "^8.0.3", "blockies": "^0.0.2", "bowser": "^1.9.3", -- cgit From 46aa446a612c5ea8a0aae75ee49e4e319e9e002c Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:17:49 +0100 Subject: Just fixes those warnings on icons --- packages/website/ts/@next/pages/landing.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index ab0a3bc55..c775f2ab1 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -101,14 +101,14 @@ export const NextLanding = () => ( - + Ready to build on 0x? - + Ready to build on 0x? -- cgit From 5f177108d17357fae990679b68a7836ba53f648e Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:19:09 +0100 Subject: Cleanup --- packages/website/ts/@next/pages/landing.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index c775f2ab1..69be9ee79 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; -import styled, { css } from 'styled-components'; import {colors} from 'ts/style/colors'; - import {Button, ButtonWrap} from 'ts/@next/components/button'; import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; @@ -13,10 +11,6 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg'; -const Icon = styled.div ` - flex-shrink: 0; -`; - export const NextLanding = () => (
-- cgit From 82d6f2150b5a96b9effbaf86b9c28abb5b2b750a Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:35:17 +0100 Subject: Adds wrapGrid, bit of cleanup --- packages/website/ts/@next/components/layout.tsx | 7 ++- packages/website/ts/@next/components/text.tsx | 2 +- packages/website/ts/@next/pages/landing.tsx | 84 ++++++++++--------------- 3 files changed, 41 insertions(+), 52 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 9bf063040..ce5d6d578 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import styled from 'styled-components'; interface WrapWidths { @@ -106,6 +105,12 @@ export const WrapCentered = styled(WrapBase)` align-items: center; `; +export const WrapGrid = styled(WrapBase)` + display: flex; + flex-wrap: wrap; + justify-content: center; +`; + export const Column = styled.div` padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')}; border: 1px dotted rgba(255, 0, 0, 0.3); diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 7954a5f28..6c45cc211 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors'; interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; - size?: 'default' | 'medium' | 'large'; + size?: 'default' | 'medium' | 'large' | 'small'; center?: boolean; children: Node | string; noMargin?: any; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 69be9ee79..61d07641b 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; +import * as _ from 'lodash'; +import styled from 'styled-components'; import {colors} from 'ts/style/colors'; import {Button, ButtonWrap} from 'ts/@next/components/button'; -import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {Heading, Paragraph} from 'ts/@next/components/text'; @@ -11,6 +13,16 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg'; +/** + Note(ez): Maybe when we're done at least with a basic structure, + we can take out each section into e.g. LandingSectionIntro.tsx in + @next/sections/landing ? so then our routes would only look like + + + + + +*/ export const NextLanding = () => (
@@ -41,7 +53,7 @@ export const NextLanding = () => (
-
+
@@ -91,6 +103,18 @@ export const NextLanding = () => (
+
+ + You're in good company + + + + {_.map([...Array(9)], (item, index) => ( + + ))} + +
+
@@ -108,53 +132,13 @@ export const NextLanding = () => (
- -
- - - Powering Decentralized Exchange
- Example of a 2/3 1/3 assymetric composition - - - - RIGHT IMAGE - - -
- -
- - - SAMPLE FLUSHED width - - - - RIGHT IMAGE - - -
- -
- - 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets. - - - - - This - - - - is a - - - - three-column module - - -
); + + +const SampleLogo = styled.div` + width: 60px; + height: 60px; + border: 1px solid blue; + margin: 30px 60px; +`; -- cgit From bb63c5c86fd6559c13e2cebef253e81f379b46a6 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:55:13 +0100 Subject: Adds proposal for padding prop on Wrappers --- packages/website/ts/@next/components/layout.tsx | 23 ++++++++++++++++++++++- packages/website/ts/@next/pages/landing.tsx | 8 ++++---- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index ce5d6d578..e66dac8a9 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -12,6 +12,10 @@ interface ColumnWidths { [key: string]: string; } +interface PaddingSizes { + [key: string]: string; +} + interface SectionProps { noPadding?: any; padLarge?: any; @@ -23,6 +27,7 @@ interface SectionProps { interface WrapProps { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; + margin?: number | (string | number)[]; } interface ColumnProps { @@ -37,7 +42,6 @@ interface GetColWidthArgs { columns: number; } - const _getColumnWidth = (args: GetColWidthArgs) => { const { span = 1, columns } = args; const percentWidth = (span / columns) * 100; @@ -45,6 +49,18 @@ const _getColumnWidth = (args: GetColWidthArgs) => { return `calc(${percentWidth}% - ${gutterDiff}px)`; }; +const _getPadding = (value: number | (string | number)[]) => { + let padding = ''; + + if (Array.isArray(value)) { + padding = value.map(val => PADDING_SIZES[val] || '0px').join(' '); + } else { + padding = `${value}px`; + } + + return padding; +} + const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { @@ -62,6 +78,10 @@ const COLUMN_WIDTHS: ColumnWidths = { '1/2': _getColumnWidth({ columns: 2 }), '2/3': _getColumnWidth({ span: 2, columns: 3 }), }; +const PADDING_SIZES: PaddingSizes = { + 'default': '30px', + 'large': '60px', +}; export const Main = styled.main` @@ -87,6 +107,7 @@ export const Section = styled.section` const WrapBase = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + padding: ${props => _getPadding(props.margin)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 61d07641b..2793993f9 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -69,9 +69,9 @@ export const NextLanding = () => ( - + {/* NOTE: this probably should be withComponent as part of a
*/} - + 873,435 @@ -81,7 +81,7 @@ export const NextLanding = () => ( - + $203M @@ -91,7 +91,7 @@ export const NextLanding = () => ( - + 227,372 -- cgit From db1babd5be1b12e94056f48d496c7a6511cecdaa Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 14:56:19 +0100 Subject: Makes ts happy with running a function on an optional property value --- packages/website/ts/@next/components/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index e66dac8a9..47d9173c3 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -107,7 +107,7 @@ export const Section = styled.section` const WrapBase = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - padding: ${props => _getPadding(props.margin)}; + padding: ${props => props.margin && _getPadding(props.margin)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; -- cgit From 57e539ed41af9a5a0f8d8e2454c7b45c1b4c2986 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 15:07:42 +0100 Subject: Allows margin to be passed variable integers as values, adds comments --- packages/website/ts/@next/components/layout.tsx | 6 +++--- packages/website/ts/@next/pages/landing.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 47d9173c3..4621d1e8e 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -27,7 +27,7 @@ interface SectionProps { interface WrapProps { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; - margin?: number | (string | number)[]; + margin?: number | ('large' | 'default' | number)[]; } interface ColumnProps { @@ -50,10 +50,10 @@ const _getColumnWidth = (args: GetColWidthArgs) => { }; const _getPadding = (value: number | (string | number)[]) => { - let padding = ''; + let padding: string = ''; if (Array.isArray(value)) { - padding = value.map(val => PADDING_SIZES[val] || '0px').join(' '); + padding = value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); } else { padding = `${value}px`; } diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 2793993f9..98ee034b9 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -69,6 +69,7 @@ export const NextLanding = () => ( + {/* Note you can also pass in a string "large/default" or a number for custom margins */} {/* NOTE: this probably should be withComponent as part of a
*/} -- cgit From 315584ef514caef55d1fb2e82c464d19fd193db5 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:41:43 +0100 Subject: Contain images --- packages/website/ts/@next/constants/globalStyle.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx index a7dd3418d..d33a8e68c 100644 --- a/packages/website/ts/@next/constants/globalStyle.tsx +++ b/packages/website/ts/@next/constants/globalStyle.tsx @@ -44,6 +44,11 @@ const GlobalStyles = createGlobalStyle ` overflow: hidden; } + img { + max-width: 100%; + object-fit: contain; + } + p { font-size: 1rem; line-height: 1.444444444em; // 26px -- cgit From d78ac3f1577d3d808c5824f9b47e00eb477335eb Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:41:59 +0100 Subject: Fix icon warnings --- packages/website/ts/@next/pages/landing.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 98ee034b9..6f1d14661 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -3,6 +3,7 @@ import * as _ from 'lodash'; import styled from 'styled-components'; import {colors} from 'ts/style/colors'; + import {Button, ButtonWrap} from 'ts/@next/components/button'; import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; @@ -10,8 +11,8 @@ import {Heading, Paragraph} from 'ts/@next/components/text'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; -import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg'; - +import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg'; +import SupportIcon from 'ts/@next/icons/illustrations/support.svg'; /** Note(ez): Maybe when we're done at least with a basic structure, @@ -23,6 +24,7 @@ import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg'; */ + export const NextLanding = () => (
@@ -120,14 +122,14 @@ export const NextLanding = () => ( - + Ready to build on 0x? - + Ready to build on 0x? -- cgit From 247a69aaec2c3389b7061d22fabc3bd15838cb75 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 14:55:17 +0100 Subject: Added 0x instant skeleton --- packages/website/ts/@next/components/text.tsx | 1 + .../ts/@next/icons/illustrations/tokens.svg | 1 + packages/website/ts/@next/pages/instant.tsx | 122 +++++++++++++++++++++ packages/website/ts/index.tsx | 2 + 4 files changed, 126 insertions(+) create mode 100644 packages/website/ts/@next/icons/illustrations/tokens.svg create mode 100644 packages/website/ts/@next/pages/instant.tsx diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 6c45cc211..a25936d8e 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -42,6 +42,7 @@ const HEADING_SIZES: HeadingSizes = { const PARAGRAPH_SIZES: ParagraphSizes = { default: '18px', + small: '14px', medium: '22px', large: '28px', }; diff --git a/packages/website/ts/@next/icons/illustrations/tokens.svg b/packages/website/ts/@next/icons/illustrations/tokens.svg new file mode 100644 index 000000000..053e421a4 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/tokens.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx new file mode 100644 index 000000000..4c8fa5a30 --- /dev/null +++ b/packages/website/ts/@next/pages/instant.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {colors} from 'ts/style/colors'; + +import {Button} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout'; +import {SiteWrap} from 'ts/@next/components/siteWrap'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg'; +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; + +export const Next0xInstant = () => ( + +
+ + + Introducing 0x Instant + A free and flexible way to offer simple crypto purchasing in any app or website + + + +
+ +
+ + Preview of payment widgets + +
+ +
+ + + + + + + Support ERC-20 and ERC-721 tokens + Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins. + + + +
+
+ + + + + + + Generate revenue for your business + With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp. + + + +
+
+ + + + + + + Easy and flexible integration + Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool. + + + +
+ +
+ + + 0x Instant Configurator + Liquidity Source + What tokens can users buy? (select all) + Transaction fee ETH address + Fee Percentage + + + + Code Snippet + Explore the Docs + <code snippet> + + +
+ +
+ + + Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations. + See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. + + +
+ +); + +const ChapterLink = styled.a ` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 39e8da177..82e7e1206 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -20,6 +20,7 @@ import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; // Next (new website) routes. We should rename them later +import { Next0xInstant } from 'ts/@next/pages/instant'; import { NextLanding } from 'ts/@next/pages/landing'; import { NextWhy } from 'ts/@next/pages/why'; @@ -110,6 +111,7 @@ render( {/* Next (new site) routes */} + Date: Fri, 30 Nov 2018 14:55:28 +0100 Subject: Link products to 0x instant for now --- packages/website/ts/@next/components/header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index b09a7ed89..357056c04 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -17,7 +17,7 @@ interface LinkProps { const links = [ { url: '/next/why', text: 'Why 0x' }, - { url: '#', text: 'Products' }, + { url: '/next/0x-instant', text: 'Products' }, { url: '#', text: 'Developers' }, { url: '#', text: 'About' }, { url: '#', text: 'Blog' }, -- cgit From e91fffd00529e8871a53c76088859d06cc78ba2f Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 15:09:34 +0100 Subject: Make buttons align --- packages/website/ts/@next/components/button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 89d1114fd..422c44126 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -30,10 +30,10 @@ export const ButtonWrap = styled.div` const StyledButton = styled.button` appearance: none; - border: 0; + border: 1px solid transparent; display: ${props => props.inline && 'inline-block'}; background-color: ${props => !props.transparent && colors.brandLight}; - border: ${props => props.transparent && '1px solid #6a6a6a'}; + border-color: ${props => props.transparent && '#6a6a6a'}; color: ${colors.white}; text-align: center; padding: 14px 22px; -- cgit From 7f8b9ef1f7623ca5ec6660ec67642eabc1456ebe Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 15:09:48 +0100 Subject: Add cta --- packages/website/ts/@next/pages/instant.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 4c8fa5a30..18b791334 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -95,6 +95,26 @@ export const Next0xInstant = () => (
+
+ + + + Need more flexibility? + Dive into our docs, or contact us if needed + + + + + +
+ + +
+ + + +
+
-- cgit From 6bf988942936a8cbb7a42a2fed9b586b16c65029 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 15:10:52 +0100 Subject: Types return on layout methods --- packages/website/ts/@next/components/layout.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 4621d1e8e..a9e95f13c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -42,23 +42,19 @@ interface GetColWidthArgs { columns: number; } -const _getColumnWidth = (args: GetColWidthArgs) => { +const _getColumnWidth = (args: GetColWidthArgs): string => { const { span = 1, columns } = args; const percentWidth = (span / columns) * 100; const gutterDiff = (GUTTER * (columns - 1)) / columns; return `calc(${percentWidth}% - ${gutterDiff}px)`; }; -const _getPadding = (value: number | (string | number)[]) => { - let padding: string = ''; - +const _getPadding = (value: number | (string | number)[]): string => { if (Array.isArray(value)) { - padding = value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); + return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' '); } else { - padding = `${value}px`; + return `${value}px`; } - - return padding; } const GUTTER = 30 as number; -- cgit From 7962e4050c60e6f7eb57740da19e7b7ef9bec6a6 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 15:23:26 +0100 Subject: Breakpoint on padding --- packages/website/ts/@next/components/layout.tsx | 8 ++++++-- packages/website/ts/@next/pages/landing.tsx | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index a9e95f13c..1a78f691c 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -27,7 +27,7 @@ interface SectionProps { interface WrapProps { width?: 'default' | 'full' | 'medium' | 'narrow'; bgColor?: string; - margin?: number | ('large' | 'default' | number)[]; + padding?: number | ('large' | 'default' | number)[]; } interface ColumnProps { @@ -99,11 +99,15 @@ export const Section = styled.section` width: ${props => props.fullWidth && '100vw'}; margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; } + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding: 30px; + } `; const WrapBase = styled.div` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - padding: ${props => props.margin && _getPadding(props.margin)}; + padding: ${props => props.padding && _getPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 6f1d14661..a2afab97e 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -72,7 +72,7 @@ export const NextLanding = () => ( {/* Note you can also pass in a string "large/default" or a number for custom margins */} - + {/* NOTE: this probably should be withComponent as part of a
*/} -- cgit From dbf62ae205eb980b06a7721aab2d5e0c751fda48 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 16:01:22 +0100 Subject: Correct font-weight for heading --- packages/website/ts/@next/components/text.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index a25936d8e..7bb217190 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -50,6 +50,7 @@ const PARAGRAPH_SIZES: ParagraphSizes = { const StyledHeading = styled.h1` color: ${props => props.color || colors.white}; font-size: ${props => HEADING_SIZES[props.size || 'default']}; + font-weight: 300; margin-bottom: ${props => !props.noMargin && '30px'}; text-align: ${props => props.center && 'center'}; `; -- cgit From de0b5772bf6115b7a2a6bc4ccedbb8a02826bd89 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 16:01:29 +0100 Subject: Linting --- packages/website/ts/@next/components/text.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 7bb217190..01e2cd099 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -57,8 +57,8 @@ const StyledHeading = styled.h1` export const Heading: React.StatelessComponent = props => { const { - asElement = 'h1', - children, + asElement = 'h1', + children, } = props; const Component = StyledHeading.withComponent(asElement); -- cgit From c98c8b1deddbe7ebb4acf8daa2c95e301bfa01fd Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 16:01:46 +0100 Subject: Prevent compiler from stopping on ts warning --- packages/website/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 164955b85..67573971f 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -22,6 +22,7 @@ }, "awesomeTypescriptLoaderOptions": { "useCache": true, + "errorsAsWarnings": true, "reportFiles": [ "./ts/**/*" ] -- cgit From 3a13286585eb1399247b808c6d45849db9d94a2d Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 30 Nov 2018 16:03:49 +0100 Subject: Added about / mission --- .../images/@next/0x-instant/0x-instant-widgets.png | Bin 0 -> 64041 bytes .../@next/0x-instant/0x-instant-widgets@2x.png | Bin 0 -> 190593 bytes .../public/images/@next/about/about-mission@2x.jpg | Bin 0 -> 148591 bytes .../public/images/@next/relayer-logos/logo.png | Bin 0 -> 6758 bytes .../public/images/@next/relayer-logos/logo_1.png | Bin 0 -> 7951 bytes .../public/images/@next/relayer-logos/logo_2.1.png | Bin 0 -> 4942 bytes .../public/images/@next/relayer-logos/logo_2.2.png | Bin 0 -> 5115 bytes .../public/images/@next/relayer-logos/logo_2.3.png | Bin 0 -> 8685 bytes .../public/images/@next/relayer-logos/logo_2.png | Bin 0 -> 6479 bytes .../public/images/@next/relayer-logos/logo_3.png | Bin 0 -> 7888 bytes .../public/images/@next/relayer-logos/logo_4.png | Bin 0 -> 9083 bytes .../public/images/@next/relayer-logos/logo_5.png | Bin 0 -> 5768 bytes packages/website/ts/@next/components/header.tsx | 2 +- packages/website/ts/@next/components/image.tsx | 21 +++++ .../icons/illustrations/consistently-ship.svg | 1 + .../@next/icons/illustrations/long-term-impact.svg | 1 + .../ts/@next/icons/illustrations/right-thing.svg | 1 + packages/website/ts/@next/pages/about/mission.tsx | 93 +++++++++++++++++++++ packages/website/ts/index.tsx | 2 + 19 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 packages/website/public/images/@next/0x-instant/0x-instant-widgets.png create mode 100644 packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png create mode 100644 packages/website/public/images/@next/about/about-mission@2x.jpg create mode 100755 packages/website/public/images/@next/relayer-logos/logo.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_1.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_2.1.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_2.2.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_2.3.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_2.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_3.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_4.png create mode 100755 packages/website/public/images/@next/relayer-logos/logo_5.png create mode 100644 packages/website/ts/@next/components/image.tsx create mode 100644 packages/website/ts/@next/icons/illustrations/consistently-ship.svg create mode 100644 packages/website/ts/@next/icons/illustrations/long-term-impact.svg create mode 100644 packages/website/ts/@next/icons/illustrations/right-thing.svg create mode 100644 packages/website/ts/@next/pages/about/mission.tsx diff --git a/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png b/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png new file mode 100644 index 000000000..707f0eccc Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/0x-instant-widgets.png differ diff --git a/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png b/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png new file mode 100644 index 000000000..35d51387c Binary files /dev/null and b/packages/website/public/images/@next/0x-instant/0x-instant-widgets@2x.png differ diff --git a/packages/website/public/images/@next/about/about-mission@2x.jpg b/packages/website/public/images/@next/about/about-mission@2x.jpg new file mode 100644 index 000000000..bc701d812 Binary files /dev/null and b/packages/website/public/images/@next/about/about-mission@2x.jpg differ diff --git a/packages/website/public/images/@next/relayer-logos/logo.png b/packages/website/public/images/@next/relayer-logos/logo.png new file mode 100755 index 000000000..d810cef4a Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_1.png b/packages/website/public/images/@next/relayer-logos/logo_1.png new file mode 100755 index 000000000..0068a7445 Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_1.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.1.png b/packages/website/public/images/@next/relayer-logos/logo_2.1.png new file mode 100755 index 000000000..f6cd92b0e Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_2.1.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.2.png b/packages/website/public/images/@next/relayer-logos/logo_2.2.png new file mode 100755 index 000000000..9461e91ee Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_2.2.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.3.png b/packages/website/public/images/@next/relayer-logos/logo_2.3.png new file mode 100755 index 000000000..fde896972 Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_2.3.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_2.png b/packages/website/public/images/@next/relayer-logos/logo_2.png new file mode 100755 index 000000000..e3015110c Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_2.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_3.png b/packages/website/public/images/@next/relayer-logos/logo_3.png new file mode 100755 index 000000000..b3d397fe1 Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_3.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_4.png b/packages/website/public/images/@next/relayer-logos/logo_4.png new file mode 100755 index 000000000..578be0af8 Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_4.png differ diff --git a/packages/website/public/images/@next/relayer-logos/logo_5.png b/packages/website/public/images/@next/relayer-logos/logo_5.png new file mode 100755 index 000000000..baf3c4080 Binary files /dev/null and b/packages/website/public/images/@next/relayer-logos/logo_5.png differ diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 357056c04..0f47588bd 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -19,7 +19,7 @@ const links = [ { url: '/next/why', text: 'Why 0x' }, { url: '/next/0x-instant', text: 'Products' }, { url: '#', text: 'Developers' }, - { url: '#', text: 'About' }, + { url: '/next/about/mission', text: 'About' }, { url: '#', text: 'Blog' }, ]; diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx new file mode 100644 index 000000000..f49c8c059 --- /dev/null +++ b/packages/website/ts/@next/components/image.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +interface Props { + alt?: string; + src: any; + srcset: any; + center: any; +} + +const ImageClass: React.FunctionComponent = (props: Props) => { + const { src, srcset, alt } = props; + + return ( + + ); +}; + +export const Image = styled(ImageClass)` + margin: ${(props: Props) => props.center && `0 auto`}; +`; diff --git a/packages/website/ts/@next/icons/illustrations/consistently-ship.svg b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg new file mode 100644 index 000000000..086961a4a --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/consistently-ship.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/long-term-impact.svg b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg new file mode 100644 index 000000000..da6385fe0 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/long-term-impact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/icons/illustrations/right-thing.svg b/packages/website/ts/@next/icons/illustrations/right-thing.svg new file mode 100644 index 000000000..4e360c0b4 --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/right-thing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx new file mode 100644 index 000000000..8870a1afa --- /dev/null +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; +import { Image } from 'ts/@next/components/image'; + +import CoinIcon from 'ts/@next/icons/illustrations/coin.svg'; +import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg'; +import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg'; +import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg'; + +export const NextAboutMission = () => ( + +
+ + + Our Mission + Team + Press + Jobs + + + Creating a tokenized world where all value can flow freely. + 0x Protocol is an important infrastructure layer for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past. + Our missions and values (arrow) + + +
+ +
+ + + +
+ +
+ + + Core
Values + + + + + + + + + Do The Right Thing + We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole. + + + + + + + + Consistently Ship + Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization. + + + + + + + + Focus on long-term Impact + We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles. + + + + +
+ +); + +const ChapterLink = styled.a` + font-size: 1.222222222rem; + display: block; + opacity: 0.8; + margin-bottom: 1.666666667rem; + + &:first-child { + opacity: 1; + } + + &:hover { + opacity: 1; + } +`; diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 82e7e1206..cb368e381 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -23,6 +23,7 @@ import { muiTheme } from 'ts/utils/mui_theme'; import { Next0xInstant } from 'ts/@next/pages/instant'; import { NextLanding } from 'ts/@next/pages/landing'; import { NextWhy } from 'ts/@next/pages/why'; +import { NextAboutMission } from 'ts/@next/pages/about/mission'; // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); @@ -112,6 +113,7 @@ render( + Date: Fri, 30 Nov 2018 16:04:03 +0100 Subject: Linting --- packages/website/ts/@next/components/text.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 01e2cd099..c0d683973 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import styled from 'styled-components'; import { colors } from 'ts/style/colors'; - interface HeadingProps { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; size?: 'default' | 'medium' | 'large' | 'small'; -- cgit From 5c12e664a96296dae720433deb8bf98b10a5fbcb Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 16:25:37 +0100 Subject: WIP themeprovider --- packages/website/ts/@next/components/siteWrap.tsx | 63 ++++++++++++++++------ packages/website/ts/@next/components/text.tsx | 8 +-- .../website/ts/@next/constants/globalStyle.tsx | 23 ++++---- packages/website/ts/@next/pages/landing.tsx | 4 +- 4 files changed, 67 insertions(+), 31 deletions(-) diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index a175c6901..6c29b3c43 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled, { ThemeProvider } from 'styled-components'; import { Footer } from 'ts/@next/components/footer'; import { Header } from 'ts/@next/components/header'; @@ -9,23 +9,54 @@ import { GlobalStyles } from 'ts/@next/constants/globalStyle'; // Note(ez): We'll define the theme and provide it via a prop // e.g. theme dark/light/etc. interface Props { + theme?: 'dark' | 'light' | 'gray'; + children: any; +} + +interface GlobalThemes { + [key: string]: { + bgColor: string; + textColor: string; + } +} +const GLOBAL_THEMES: GlobalThemes = { + dark: { + bgColor: '#000000', + textColor: '#FFFFFF', + }, + light: { + bgColor: '#FFFFFF', + textColor: '#FFFFFF', + }, + gray: { + bgColor: '#e0e0e0', + textColor: '#FFFFFF', + }, } export const SiteWrap: React.StatelessComponent = props => { - const { children } = props; - - return ( - <> - {/* GlobalStyles will be exposed the theme via provider, - same is true for all children of SiteWrap - */} - -
-
- {children} -
-