aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 05:01:41 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-06 18:53:46 +0800
commit6b952c4236b6268537afc6169ac003ffa089f6cd (patch)
tree3875e18613323796b6d6b128951821fd628a1924
parent9e1a94266e775ac52ad8da0d825e6814457bacd4 (diff)
downloaddexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar.gz
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar.bz2
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar.lz
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar.xz
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.tar.zst
dexon-sol-tools-6b952c4236b6268537afc6169ac003ffa089f6cd.zip
feat: improve styling of code demo component
-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>
);