From ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 11:23:16 -0800
Subject: feat: have basic code syntax highlighting working

---
 packages/website/ts/pages/instant/code_demo.tsx | 45 +++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 packages/website/ts/pages/instant/code_demo.tsx

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
new file mode 100644
index 000000000..9764227a1
--- /dev/null
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
+import { styled } from 'ts/style/theme';
+
+import { Container } from 'ts/components/ui/container';
+
+const CustomPre = styled.pre`
+    code {
+        background-color: inherit !important;
+        border-radius: 0px;
+        font-family: 'Roboto Mono', sans-serif;
+        border: none;
+    }
+`;
+
+export interface CodeDemoProps {}
+
+export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
+    const codeString = `<head>
+    <script src="http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/main.bundle.js"></script>
+</head>
+<body>
+    <script>
+        zeroExInstant.render({
+            liquiditySource: 'https://api.relayer.com/sra/v2/',
+            affiliateInfo: {
+                feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
+                feePercentage: 0.03
+            }
+        }, 'body');
+    </script>
+</body>`;
+    return (
+        <SyntaxHighlighter
+            useInlineStyles={true}
+            language="html"
+            style={atelierCaveDark}
+            showLineNumbers={true}
+            PreTag={CustomPre}
+        >
+            {codeString}
+        </SyntaxHighlighter>
+    );
+};
-- 
cgit v1.2.3


From 6f394128d46420b336fb50a07f638b12bbb55eec Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 13:01:41 -0800
Subject: feat: improve styling of code demo component

---
 packages/website/ts/pages/instant/code_demo.tsx | 131 ++++++++++++++++++++++--
 1 file changed, 123 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 9764227a1..b029cc368 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,24 +1,145 @@
 import * as React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
+import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 
 import { Container } from 'ts/components/ui/container';
 
 const CustomPre = styled.pre`
+    margin: 0px;
+    line-height: 24px;
     code {
         background-color: inherit !important;
         border-radius: 0px;
         font-family: 'Roboto Mono', sans-serif;
         border: none;
     }
+    .lsl {
+        background-color: #2a2a2a !important;
+        color: #999;
+        height: 100%;
+        text-align: center;
+        padding-right: 5px !important;
+        padding-left: 5px;
+        margin-right: 5px;
+        line-height: 25px;
+        padding-top: 10px;
+    }
+    .xml {
+        position: relative;
+        top: 10px;
+    }
 `;
 
+const customStyle = {
+    'hljs-comment': {
+        color: '#7e7887',
+    },
+    'hljs-quote': {
+        color: '#7e7887',
+    },
+    'hljs-variable': {
+        color: '#be4678',
+    },
+    'hljs-template-variable': {
+        color: '#be4678',
+    },
+    'hljs-attribute': {
+        color: '#be4678',
+    },
+    'hljs-regexp': {
+        color: '#be4678',
+    },
+    'hljs-link': {
+        color: '#be4678',
+    },
+    'hljs-tag': {
+        color: '#61f5ff',
+    },
+    'hljs-name': {
+        color: '#61f5ff',
+    },
+    'hljs-selector-id': {
+        color: '#be4678',
+    },
+    'hljs-selector-class': {
+        color: '#be4678',
+    },
+    'hljs-number': {
+        color: '#c994ff',
+    },
+    'hljs-meta': {
+        color: '#aa573c',
+    },
+    'hljs-built_in': {
+        color: '#aa573c',
+    },
+    'hljs-builtin-name': {
+        color: '#aa573c',
+    },
+    'hljs-literal': {
+        color: '#aa573c',
+    },
+    'hljs-type': {
+        color: '#aa573c',
+    },
+    'hljs-params': {
+        color: '#aa573c',
+    },
+    'hljs-string': {
+        color: '#bcff88',
+    },
+    'hljs-symbol': {
+        color: '#2a9292',
+    },
+    'hljs-bullet': {
+        color: '#2a9292',
+    },
+    'hljs-title': {
+        color: '#576ddb',
+    },
+    'hljs-section': {
+        color: '#576ddb',
+    },
+    'hljs-keyword': {
+        color: '#955ae7',
+    },
+    'hljs-selector-tag': {
+        color: '#955ae7',
+    },
+    'hljs-deletion': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#be4678',
+    },
+    'hljs-addition': {
+        color: '#19171c',
+        display: 'inline-block',
+        width: '100%',
+        backgroundColor: '#2a9292',
+    },
+    hljs: {
+        display: 'block',
+        overflowX: 'auto',
+        background: colors.instantSecondaryBackground,
+        color: 'white',
+        fontSize: '12px',
+    },
+    'hljs-emphasis': {
+        fontStyle: 'italic',
+    },
+    'hljs-strong': {
+        fontWeight: 'bold',
+    },
+};
+
 export interface CodeDemoProps {}
 
 export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
     const codeString = `<head>
-    <script src="http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/main.bundle.js"></script>
+    <script src="https://instant.0xproject.com/instant.js"></script>
 </head>
 <body>
     <script>
@@ -32,13 +153,7 @@ export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
     </script>
 </body>`;
     return (
-        <SyntaxHighlighter
-            useInlineStyles={true}
-            language="html"
-            style={atelierCaveDark}
-            showLineNumbers={true}
-            PreTag={CustomPre}
-        >
+        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
             {codeString}
         </SyntaxHighlighter>
     );
-- 
cgit v1.2.3


From a41dfa9ae0924a342324e49d9a3eba22fb255667 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 13:45:40 -0800
Subject: feat: implement configurator layout

---
 packages/website/ts/pages/instant/code_demo.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index b029cc368..4f44a6160 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container';
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
+    overflow: hidden;
+    width: 600px;
+    height: 500px;
+    border-radius: 4px;
     code {
         background-color: inherit !important;
         border-radius: 0px;
@@ -22,7 +26,7 @@ const CustomPre = styled.pre`
         text-align: center;
         padding-right: 5px !important;
         padding-left: 5px;
-        margin-right: 5px;
+        margin-right: 15px;
         line-height: 25px;
         padding-top: 10px;
     }
-- 
cgit v1.2.3


From f80768cae0c2fdb71237bbdddecc67aec1c1f67f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 15:57:35 -0800
Subject: feat: add Select component and use for configurator

---
 packages/website/ts/pages/instant/code_demo.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4f44a6160..e9ecad40d 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 
-import { Container } from 'ts/components/ui/container';
-
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
-- 
cgit v1.2.3


From 9e69257b0db8ce959c0209d4389f9e3a753839bd Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 30 Nov 2018 11:08:49 -0800
Subject: feat: implement code generation

---
 packages/website/ts/pages/instant/code_demo.tsx | 34 ++++++++-----------------
 1 file changed, 10 insertions(+), 24 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index e9ecad40d..fa0cebc62 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -6,7 +6,7 @@ import { styled } from 'ts/style/theme';
 const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
-    overflow: hidden;
+    overflow: scroll;
     width: 600px;
     height: 500px;
     border-radius: 4px;
@@ -123,7 +123,7 @@ const customStyle = {
     },
     hljs: {
         display: 'block',
-        overflowX: 'auto',
+        overflowX: 'hidden',
         background: colors.instantSecondaryBackground,
         color: 'white',
         fontSize: '12px',
@@ -136,26 +136,12 @@ const customStyle = {
     },
 };
 
-export interface CodeDemoProps {}
+export interface CodeDemoProps {
+    children: string;
+}
 
-export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
-    const codeString = `<head>
-    <script src="https://instant.0xproject.com/instant.js"></script>
-</head>
-<body>
-    <script>
-        zeroExInstant.render({
-            liquiditySource: 'https://api.relayer.com/sra/v2/',
-            affiliateInfo: {
-                feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
-                feePercentage: 0.03
-            }
-        }, 'body');
-    </script>
-</body>`;
-    return (
-        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-            {codeString}
-        </SyntaxHighlighter>
-    );
-};
+export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
+    <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+        {props.children}
+    </SyntaxHighlighter>
+);
-- 
cgit v1.2.3


From 4b6ac96a8db908b02a352357592dfef986e23fdc Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 30 Nov 2018 16:01:16 -0800
Subject: fix: use correct styles even when syntax highlighter component
 removes classnames on second render

---
 packages/website/ts/pages/instant/code_demo.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index fa0cebc62..20eb6b8d1 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -8,7 +8,8 @@ const CustomPre = styled.pre`
     line-height: 24px;
     overflow: scroll;
     width: 600px;
-    height: 500px;
+    height: 100%;
+    max-height: 800px;
     border-radius: 4px;
     code {
         background-color: inherit !important;
@@ -16,7 +17,7 @@ const CustomPre = styled.pre`
         font-family: 'Roboto Mono', sans-serif;
         border: none;
     }
-    .lsl {
+    code:first-of-type {
         background-color: #2a2a2a !important;
         color: #999;
         height: 100%;
@@ -27,7 +28,7 @@ const CustomPre = styled.pre`
         line-height: 25px;
         padding-top: 10px;
     }
-    .xml {
+    code:last-of-type {
         position: relative;
         top: 10px;
     }
-- 
cgit v1.2.3


From 50bfbda79a312651581f03614c1b4f4cbbe49cf1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 14:30:38 -0800
Subject: feat: add fee percentage slider

---
 packages/website/ts/pages/instant/code_demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 20eb6b8d1..e57e39dff 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -20,7 +20,7 @@ const CustomPre = styled.pre`
     code:first-of-type {
         background-color: #2a2a2a !important;
         color: #999;
-        height: 100%;
+        min-height: 100%;
         text-align: center;
         padding-right: 5px !important;
         padding-left: 5px;
-- 
cgit v1.2.3


From 3e4b77757e3db5e79fc589475170d49a90c8375e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Dec 2018 12:49:37 -0800
Subject: hack: make min-height of line-number container 98% to prevent
 scrollbar from appearing in code demo

---
 packages/website/ts/pages/instant/code_demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index e57e39dff..4fe1928f5 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -20,7 +20,7 @@ const CustomPre = styled.pre`
     code:first-of-type {
         background-color: #2a2a2a !important;
         color: #999;
-        min-height: 100%;
+        min-height: 98%;
         text-align: center;
         padding-right: 5px !important;
         padding-left: 5px;
-- 
cgit v1.2.3


From ce013489ecf86ac7ad51e2f2cd435b18d6054993 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Dec 2018 14:30:31 -0800
Subject: feat: add copy code feature

---
 packages/website/ts/pages/instant/code_demo.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4fe1928f5..9a04fceed 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 
@@ -142,7 +147,16 @@ export interface CodeDemoProps {
 }
 
 export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
-    <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-        {props.children}
-    </SyntaxHighlighter>
+    <Container position="relative" height="100%">
+        <Container position="absolute" top="10px" right="10px">
+            <CopyToClipboard text={props.children}>
+                <Button fontSize="14px">
+                    <b>Copy</b>
+                </Button>
+            </CopyToClipboard>
+        </Container>
+        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+            {props.children}
+        </SyntaxHighlighter>
+    </Container>
 );
-- 
cgit v1.2.3


From 5c29b918df4ac8b0f7914e8da10fa1ae530ff4e8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 4 Dec 2018 15:45:23 -0800
Subject: chore: run linter

---
 packages/website/ts/pages/instant/code_demo.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 9a04fceed..c5e565d61 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -4,7 +4,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 
-- 
cgit v1.2.3


From fb221e4ca9eec6a66130e3f8230457a1fcee20f8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 5 Dec 2018 12:41:57 -0800
Subject: feat: notify user they've copied to clipboard on copy

---
 packages/website/ts/pages/instant/code_demo.tsx | 43 +++++++++++++++++--------
 1 file changed, 29 insertions(+), 14 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index c5e565d61..b7a9f5b17 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -145,17 +145,32 @@ export interface CodeDemoProps {
     children: string;
 }
 
-export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
-    <Container position="relative" height="100%">
-        <Container position="absolute" top="10px" right="10px">
-            <CopyToClipboard text={props.children}>
-                <Button fontSize="14px">
-                    <b>Copy</b>
-                </Button>
-            </CopyToClipboard>
-        </Container>
-        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-            {props.children}
-        </SyntaxHighlighter>
-    </Container>
-);
+export interface CodeDemoState {
+    didCopyCode: boolean;
+}
+
+export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
+    public state: CodeDemoState = {
+        didCopyCode: false,
+    };
+    public render(): React.ReactNode {
+        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
+        return (
+            <Container position="relative" height="100%">
+                <Container position="absolute" top="10px" right="10px">
+                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
+                        <Button fontSize="14px">
+                            <b>{copyButtonText}</b>
+                        </Button>
+                    </CopyToClipboard>
+                </Container>
+                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+                    {this.props.children}
+                </SyntaxHighlighter>
+            </Container>
+        );
+    }
+    private readonly _handleCopyClick = () => {
+        this.setState({ didCopyCode: true });
+    };
+}
-- 
cgit v1.2.3


From b7603bef192dac4a3e87a365f77dc87c61dbd4f8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 5 Dec 2018 12:44:23 -0800
Subject: fix: ensure copy button is above code

---
 packages/website/ts/pages/instant/code_demo.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index b7a9f5b17..1bc1980e7 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -6,6 +6,7 @@ import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
 
 const CustomPre = styled.pre`
     margin: 0px;
@@ -157,7 +158,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
         return (
             <Container position="relative" height="100%">
-                <Container position="absolute" top="10px" right="10px">
+                <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
                         <Button fontSize="14px">
                             <b>{copyButtonText}</b>
-- 
cgit v1.2.3


From ac166ce32e9b98b8789a47e232268f3121489457 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 6 Dec 2018 11:47:02 -0800
Subject: feat: change color of doctype tag in configurator

---
 packages/website/ts/pages/instant/code_demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 1bc1980e7..a3b5fe847 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -77,7 +77,7 @@ const customStyle = {
         color: '#c994ff',
     },
     'hljs-meta': {
-        color: '#aa573c',
+        color: '#61f5ff',
     },
     'hljs-built_in': {
         color: '#aa573c',
-- 
cgit v1.2.3


From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 20 Dec 2018 16:01:53 -0800
Subject: feat: move all @next files to non @next directory

---
 packages/website/ts/pages/instant/code_demo.tsx | 30 +++++++++++++++----------
 1 file changed, 18 insertions(+), 12 deletions(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index a3b5fe847..4a3022df5 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -2,9 +2,8 @@ import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-import { Button } from 'ts/components/ui/button';
+import { Button } from 'ts/@next/components/button';
 import { Container } from 'ts/components/ui/container';
-import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
@@ -12,7 +11,7 @@ const CustomPre = styled.pre`
     margin: 0px;
     line-height: 24px;
     overflow: scroll;
-    width: 600px;
+    width: 100%;
     height: 100%;
     max-height: 800px;
     border-radius: 4px;
@@ -23,19 +22,21 @@ const CustomPre = styled.pre`
         border: none;
     }
     code:first-of-type {
-        background-color: #2a2a2a !important;
+        background-color: #060d0d !important;
         color: #999;
-        min-height: 98%;
+        min-height: 100%;
         text-align: center;
-        padding-right: 5px !important;
-        padding-left: 5px;
         margin-right: 15px;
         line-height: 25px;
-        padding-top: 10px;
+        padding: 10px 7px !important;
     }
     code:last-of-type {
         position: relative;
         top: 10px;
+        top: 0;
+        padding-top: 11px;
+        display: inline-block;
+        line-height: 25px;
     }
 `;
 
@@ -130,7 +131,7 @@ const customStyle = {
     hljs: {
         display: 'block',
         overflowX: 'hidden',
-        background: colors.instantSecondaryBackground,
+        background: '#1B2625',
         color: 'white',
         fontSize: '12px',
     },
@@ -160,9 +161,7 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
             <Container position="relative" height="100%">
                 <Container position="absolute" top="10px" right="10px" zIndex={zIndex.overlay - 1}>
                     <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
-                        <Button fontSize="14px">
-                            <b>{copyButtonText}</b>
-                        </Button>
+                        <StyledButton>{copyButtonText}</StyledButton>
                     </CopyToClipboard>
                 </Container>
                 <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
@@ -175,3 +174,10 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
         this.setState({ didCopyCode: true });
     };
 }
+
+const StyledButton = styled(Button)`
+    border-radius: 4px;
+    font-size: 15px;
+    font-weight: 400;
+    padding: 9px 21px 7px;
+`;
-- 
cgit v1.2.3


From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 20 Dec 2018 16:03:06 -0800
Subject: feat: remove @next directory from all imports

---
 packages/website/ts/pages/instant/code_demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/instant/code_demo.tsx')

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index 4a3022df5..c59f148b8 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
-import { Button } from 'ts/@next/components/button';
+import { Button } from 'ts/components/button';
 import { Container } from 'ts/components/ui/container';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
-- 
cgit v1.2.3

