diff options
| -rw-r--r-- | packages/website/ts/pages/instant/code_demo.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 27 |
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> ); |