crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve styling of code demo component

Browse Source
This commit is contained in:
fragosti 2018-11-29 13:01:41 -08:00
parent ea61c7a5db
commit 6f394128d4
2 changed files with 126 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
packages/website/ts/pages/instant/code_demo.tsx
View File

@ -1,24 +1,145 @@
import * as React from 'react'; import * as React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter'; import SyntaxHighlighter from 'react-syntax-highlighter';
import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme'; import { styled } from 'ts/style/theme';
import { Container } from 'ts/components/ui/container'; import { Container } from 'ts/components/ui/container';
const CustomPre = styled.pre` const CustomPre = styled.pre`
margin: 0px;
line-height: 24px;
code { code {
background-color: inherit !important; background-color: inherit !important;
border-radius: 0px; border-radius: 0px;
font-family: 'Roboto Mono', sans-serif; font-family: 'Roboto Mono', sans-serif;
border: none; 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 interface CodeDemoProps {}
export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => { export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
const codeString = `<head> 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> </head>
<body> <body>
<script> <script>
@ -32,13 +153,7 @@ export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => {
</script> </script>
</body>`; </body>`;
return ( return (
<SyntaxHighlighter <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
useInlineStyles={true}
language="html"
style={atelierCaveDark}
showLineNumbers={true}
PreTag={CustomPre}
>
{codeString} {codeString}
</SyntaxHighlighter> </SyntaxHighlighter>
); );

5
packages/website/ts/pages/instant/configurator.tsx
View File

@ -9,9 +9,8 @@ export interface ConfiguratorProps {
} }
export const Configurator = (props: ConfiguratorProps) => ( export const Configurator = (props: ConfiguratorProps) => (
<Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}> <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}>
<Container width="50%"> <Container> Forms </Container>
<CodeDemo /> <CodeDemo />
</Container> </Container>
</Container>
); );