Merge pull request #58 from filecoin-project/@gndclouds/codeblock-style

Style: Updated codeblock with inline numbers and FireCode

common/constants.js

@@ -18,6 +18,8 @@ export const font = {
   medium: `'inter-medium', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
   mono: `'mono', monaco, monospace`,
   monoBold: `'mono-bold', monaco, monospace`,
+  monoCode: `'fira-code-regular', mono, monospace`,
+  monoCodeBold: `'fira-code-bold', mono-bold, monospace`,
 };
 
 export const typescale = {
@@ -46,4 +48,4 @@ export const theme = {
   ctaBackground: system.brand,
   pageBackground: system.foreground,
   pageText: system.black,
-};
+};

common/styles/global.js

@@ -166,6 +166,16 @@ export const injectGlobalStyles = () => css`
     src: url('/static/Inter-Medium.woff');
   }
 
+  @font-face {
+    font-family: 'fira-code-regular';
+    src: url('/static/FiraCode-Regular.woff');
+  }
+
+  @font-face {
+    font-family: 'fira-code-bold';
+    src: url('/static/FiraCode-Bold.woff');
+  }
+
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,

components/system/components/CodeBlock.js

@@ -4,21 +4,57 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_CODE_BLOCK = css`
-  font-family: ${Constants.system.mono};
-  background-color: ${Constants.system.black};
+  background-color: ${Constants.system.pitchBlack};
   color: ${Constants.system.white};
-  border-radius: 4px;
-  padding: 24px;
-  font-size: 14px;
-  word-wrap: break-word;
+  font-size: 16px;
+  border-color: ${Constants.system.yellow};
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+  border-radius: 7px;
+  padding: 10px;
+`;
+
+const STYLES_PADDING = css`
+  display: flex;
+  border-radius: 7px;
+  align-items: flex-start;
+  justify-content: space-between;
   white-space: pre-wrap;
+`;
+
+const STYLES_PRE = css`
+  color: ${Constants.system.darkGray};
+  font-family: ${Constants.font.monoCode};
+  flex-shrink: 0;
+  min-width: 24px;
+`;
+
+const STYLES_CODE = css`
+  background-color: ${Constants.system.pitchBlack};
+  font-family: ${Constants.font.monoCode};
+  color: ${Constants.system.gray};
   width: 100%;
 `;
 
-export const CodeBlock = (props) => {
-  return (
-    <div css={STYLES_CODE_BLOCK}>
-      <code {...props} />
-    </div>
-  );
-};
+export class CodeBlock extends React.Component {
+
+  render() {
+    const codeBlockContent = this.props.children + ''; 
+    const codeBlockToken = codeBlockContent.split("\n"); 
+    const textMap = codeBlockToken;
+
+    return (
+      <div css={STYLES_CODE_BLOCK}>
+        {textMap.map((element, index) => {
+          return (
+            <div css={STYLES_PADDING}>
+              <div css={STYLES_PRE}>{index}.</div>
+              <div css={STYLES_CODE}>{element}</div>
+          </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+