mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 02:37:09 +03:00
code-blocks: fixes key warning and some minor cleanup
This commit is contained in:
@wwwjim
parent
f0dcd556ad
commit
afcf54c651
@ -227,124 +227,122 @@ export const injectGlobalStyles = () => css`
|
||||
|
||||
/* prettier-ignore */
|
||||
export const injectCodeBlockStyles = () => css`
|
||||
@font-face {
|
||||
font-family: 'jet-brains-regular';
|
||||
src: url('/static/JetBrainsMono-Regular.woff');
|
||||
.language-javascript {
|
||||
code,
|
||||
pre {
|
||||
color:"#e5e5e5";
|
||||
font-family: 'jet-brains-regular', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre {
|
||||
padding: none;
|
||||
margin: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code,
|
||||
pre {
|
||||
background:none;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
|
||||
code[class*="language-javascript"],
|
||||
pre[class*="language-javascript"] {
|
||||
color:"#e5e5e5";
|
||||
font-family: 'jet-brains-regular', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-javascript"] {
|
||||
padding: none;
|
||||
margin: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-javascript"],
|
||||
pre[class*="language-javascript"] {
|
||||
background:none;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-javascript"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
`;
|
||||
`;
|
||||
|
||||
@ -19,7 +19,6 @@ const STYLES_CODE_BLOCK = css`
|
||||
const STYLES_PADDING = css`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
border-radius: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
white-space: pre-wrap;
|
||||
@ -43,24 +42,25 @@ const STYLES_CODE = css`
|
||||
padding-left: 16px;
|
||||
`;
|
||||
|
||||
// TODO:
|
||||
// Refactor to https://github.com/FormidableLabs/prism-react-renderer
|
||||
export class CodeBlock extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
Prism.highlightAll();
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const codeBlockContent = this.props.children + "";
|
||||
const codeBlockToken = codeBlockContent.split("\n");
|
||||
const textMap = codeBlockToken;
|
||||
|
||||
return (
|
||||
<div css={STYLES_CODE_BLOCK}>
|
||||
<div css={STYLES_CODE_BLOCK} className="language-javascript">
|
||||
{textMap.map((element, index) => {
|
||||
return (
|
||||
<div css={STYLES_PADDING}>
|
||||
<div css={STYLES_PADDING} key={`${element}-${index}`}>
|
||||
<div css={STYLES_PRE}>{index}</div>
|
||||
<pre css={STYLES_CODE} className="language-javascript">
|
||||
<pre css={STYLES_CODE}>
|
||||
<code>{element}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
@ -14,10 +14,10 @@ const STYLES_CREATE_TOKEN = css`
|
||||
`;
|
||||
|
||||
const STYLES_CREATE_TOKEN_TOP = css`
|
||||
box-sizing: border-box;
|
||||
font-family: ${Constants.font.medium};
|
||||
background: ${Constants.system.black};
|
||||
color: ${Constants.system.white};
|
||||
font-family: "mono";
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
min-height: 88px;
|
||||
@ -38,19 +38,9 @@ export const CreateToken = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CREATE_TOKEN}>
|
||||
<div css={STYLES_CREATE_TOKEN_TOP}>
|
||||
{props.token ? (
|
||||
props.token
|
||||
) : (
|
||||
<marquee
|
||||
style={{
|
||||
color: Constants.system.pitchBlack,
|
||||
width: "100%",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX{" "}
|
||||
</marquee>
|
||||
)}
|
||||
{props.token
|
||||
? props.token
|
||||
: `XXXXXXXX - XXXX - XXXX - XXXX - XXXXXXXXXXXX`}
|
||||
</div>
|
||||
<div css={STYLES_CREATE_TOKEN_BOTTOM}>
|
||||
<ButtonPrimaryFull onClick={props.onClick}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user