aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 05:01:41 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-30 05:01:41 +0800
commit6f394128d46420b336fb50a07f638b12bbb55eec (patch)
tree1718a0c2e0ef32eddf7225aab929a5b206a8f83f /packages/website/ts
parentea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 (diff)
downloaddexon-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
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/pages/instant/code_demo.tsx131
-rw-r--r--packages/website/ts/pages/instant/configurator.tsx7
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>
);