From 6b952c4236b6268537afc6169ac003ffa089f6cd Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 13:01:41 -0800 Subject: feat: improve styling of code demo component --- packages/website/ts/pages/instant/code_demo.tsx | 131 +++++++++++++++++++-- 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 = props => { const codeString = ` - + `; return ( - + {codeString} ); 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) => ( - - - - + + Forms + ); -- cgit