2 files changed, 126 insertions, 12 deletions
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>
     );
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 2314f968f..09a51d0bb 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -9,9 +9,8 @@ export interface ConfiguratorProps {
 }
 
 export const Configurator = (props: ConfiguratorProps) => (
-    <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
-        <Container width="50%">
-            <CodeDemo />
-        </Container>
+    <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
+        <Container> Forms </Container>
+        <CodeDemo />
     </Container>
 );