From db26ca977f56468e1ce7dbb30ed38e537912e545 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 21 Nov 2018 11:47:24 +0000 Subject: Create migrations doc reference page --- .../ts/containers/migrations_documentation.ts | 66 ++++++++++++++++++++++ packages/website/ts/index.tsx | 7 +++ .../website/ts/pages/documentation/doc_page.tsx | 1 + packages/website/ts/types.ts | 2 + 4 files changed, 76 insertions(+) create mode 100644 packages/website/ts/containers/migrations_documentation.ts (limited to 'packages/website/ts') diff --git a/packages/website/ts/containers/migrations_documentation.ts b/packages/website/ts/containers/migrations_documentation.ts new file mode 100644 index 000000000..02919e06e --- /dev/null +++ b/packages/website/ts/containers/migrations_documentation.ts @@ -0,0 +1,66 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown1 = require('md/docs/migrations/1/introduction'); +const InstallationMarkdown1 = require('md/docs/migrations/1/installation'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.Migrations, + packageName: '@0x/migrations', + type: SupportedDocJson.TypeDoc, + displayName: 'Migrations', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], + }, + sectionNameToMarkdownByVersion: { + '2.0.4': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 96e7184f8..faf7d8c87 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -40,6 +40,9 @@ const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () const LazyContractWrappersDocumentation = createLazyComponent('Documentation', async () => import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'), ); +const LazyMigrationsDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "migrationsDocs" */ 'ts/containers/migrations_documentation'), +); const LazyOrderWatcherDocumentation = createLazyComponent('Documentation', async () => import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'), ); @@ -102,6 +105,10 @@ render( path={`${WebsitePaths.ContractWrappers}/:version?`} component={LazyContractWrappersDocumentation} /> + Date: Wed, 21 Nov 2018 11:47:45 +0000 Subject: Add migrations, contract-addresses and contract-artifacts to Developers home --- .../website/ts/pages/documentation/docs_home.tsx | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index e3328f3fa..f68d2892f 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -107,6 +107,14 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { to: WebsitePaths.ContractWrappers, }, }, + { + description: + "A package to deploy the 0x protocol's system of smart contracts to the testnet of your choice", + link: { + title: '@0x/migrations', + to: WebsitePaths.Migrations, + }, + }, { description: 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', @@ -131,6 +139,23 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { to: WebsitePaths.OrderWatcher, }, }, + { + description: + 'A tiny utility library for getting known deployed contract addresses for a particular network.', + link: { + title: '@0x/contract-addresses', + to: 'https://www.npmjs.com/package/@0x/contract-addresses', + shouldOpenInNewTab: true, + }, + }, + { + description: 'Smart contract compilation artifacts for the latest version of the 0x protocol.', + link: { + title: '@0x/contract-artifacts', + to: 'https://www.npmjs.com/package/@0x/contract-artifacts', + shouldOpenInNewTab: true, + }, + }, { description: 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', -- cgit v1.2.3 From 825911ed89e63f065c1a843ad83fb28ed72bb8ee Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 26 Nov 2018 13:15:32 -0500 Subject: feat: Add Xianny to about page --- packages/website/ts/pages/about/about.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'packages/website/ts') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index dfe8926b0..81a3f59e1 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -248,6 +248,14 @@ const teamRow9: ProfileInfo[] = [ linkedIn: 'https://www.linkedin.com/in/steveklebanoff/', github: 'https://github.com/steveklebanoff', }, + { + name: 'Xianny Ng', + title: 'Engineer', + description: `Developer Experience. Previously telemetry at Mapbox and platform engineering at Bench Accounting.`, + image: 'images/team/xianny.png', + linkedIn: 'https://www.linkedin.com/in/xianny/', + github: 'https://github.com/xianny', + }, ]; const advisors1: ProfileInfo[] = [ -- cgit v1.2.3 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(+) (limited to 'packages/website/ts') 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 v1.2.3 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/ts/globals.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'packages/website/ts') 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 -- cgit v1.2.3 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 (limited to 'packages/website/ts') 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 v1.2.3 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(-) (limited to 'packages/website/ts') 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(+) (limited to 'packages/website/ts') 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 v1.2.3 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 (limited to 'packages/website/ts') 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 v1.2.3 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 --- .../website/ts/@next/constants/globalStyle.tsx | 24 +++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'packages/website/ts') 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 v1.2.3 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/ts/style/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts') 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 }; -- cgit v1.2.3 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(+) (limited to 'packages/website/ts') 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 v1.2.3 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(-) (limited to 'packages/website/ts') 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 v1.2.3 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 (limited to 'packages/website/ts') 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 v1.2.3 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 (limited to 'packages/website/ts') 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})} + + +
+ + +); diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 0620bae0f..119d22df7 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -13,6 +13,7 @@ const appColors = { jobsPageOpenPositionRow: sharedColors.grey100, metaMaskOrange: '#f68c24', metaMaskTransparentOrange: 'rgba(255, 248, 242, 0.8)', + instantBackground: '#222222', }; export const colors = { -- cgit v1.2.3 From 6c43fa8f7253083bb5e50a3f8940f35d105c8bf1 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 27 Nov 2018 00:49:49 -0800 Subject: feat(website): add screenshots to instant page --- packages/website/ts/pages/instant/features.tsx | 65 ++++++++++++++++++++++ packages/website/ts/pages/instant/instant.tsx | 4 ++ .../ts/pages/instant/introducing_0x_instant.tsx | 2 +- packages/website/ts/pages/instant/screenshots.tsx | 15 +++++ 4 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/pages/instant/features.tsx create mode 100644 packages/website/ts/pages/instant/screenshots.tsx (limited to 'packages/website/ts') diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx new file mode 100644 index 000000000..205982044 --- /dev/null +++ b/packages/website/ts/pages/instant/features.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { ScreenWidths } from 'ts/types'; + +export const Features = () => ( + + + + + + + + +); + +interface LinkInfo { + linkSrc: string; + displayText: string; +} + +interface FeatureItemProps { + imgSrc: string; + title: string; + description: string; + linkInfos: LinkInfo[]; + screenWidth: ScreenWidths; +} + +const FeatureItem = (props: FeatureItemProps) => { + const { imgSrc, title, description, linkInfos, screenWidth } = props; + const shouldShowImage = screenWidth === ScreenWidths.Lg; + const image = ; + const missionStatementClassName = !shouldShowImage ? 'center' : undefined; + const missionStatement = ( + + + {title} + + + + {description} + + + + ); + return ( +
+ {shouldShowImage ? ( + + {image} + {missionStatement} + + ) : ( + {missionStatement} + )} +
+ ); +}; diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx index 5abfaf4b2..87d6a64d4 100644 --- a/packages/website/ts/pages/instant/instant.tsx +++ b/packages/website/ts/pages/instant/instant.tsx @@ -6,7 +6,9 @@ import { Footer } from 'ts/components/footer'; import { MetaTags } from 'ts/components/meta_tags'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Container } from 'ts/components/ui/container'; +import { Features } from 'ts/pages/instant/features'; import { Introducing0xInstant } from 'ts/pages/instant/introducing_0x_instant'; +import { Screenshots } from 'ts/pages/instant/screenshots'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { ScreenWidths } from 'ts/types'; @@ -51,6 +53,8 @@ export class Instant extends React.Component { /> + +