diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:01:41 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:01:41 +0800 |
| commit | 6f394128d46420b336fb50a07f638b12bbb55eec (patch) | |
| tree | 1718a0c2e0ef32eddf7225aab929a5b206a8f83f | |
| parent | ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 (diff) | |
| download | dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar.gz dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar.bz2 dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar.lz dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar.xz dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.tar.zst dexon-sol-tools-6f394128d46420b336fb50a07f638b12bbb55eec.zip | |
feat: improve styling of code demo component
| -rw-r--r-- | packages/website/ts/pages/instant/code_demo.tsx | 131 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 7 |
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> ); |