aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 05:45:40 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 18:53:46 +0800
commita20d54781468c38c1dc524e976db93b80ad2a043 (patch)
treedc62ce96390373d1ed22f327a72e59fbe5265b14
parent3dcb874e08389f82d66e8b3458863509ec525a02 (diff)
downloaddexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.gz
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.bz2
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.lz
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.xz
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.zst
dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.zip
feat: implement configurator layout
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx6
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx27
2 files changed, 29 insertions, 4 deletions
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;
}
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index 09a51d0bb..29a3e2b1e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { ActionLink } from 'ts/pages/instant/action_link';
import { CodeDemo } from 'ts/pages/instant/code_demo';
import { colors } from 'ts/style/colors';
@@ -9,8 +11,27 @@ export interface ConfiguratorProps {
}
export const Configurator = (props: ConfiguratorProps) => (
- <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
- <Container> Forms </Container>
- <CodeDemo />
+ <Container
+ className="flex justify-center py4 px3"
+ id={props.hash}
+ backgroundColor={colors.instantTertiaryBackground}
+ >
+ <Container className="mx3">
+ <Container className="mb3">
+ <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+ 0x Instant Configurator
+ </Text>
+ </Container>
+ <Container height="400px" width="300px" backgroundColor="white" />
+ </Container>
+ <Container className="mx3">
+ <Container className="mb3 flex justify-between">
+ <Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
+ Code Snippet
+ </Text>
+ <ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
+ </Container>
+ <CodeDemo />
+ </Container>
</Container>
);