From afcf54c651462bba6a4bc9b1a23aeb16f4dbad51 Mon Sep 17 00:00:00 2001
From: "@wwwjim" <send@jimmy.email>
Date: Thu, 16 Jul 2020 11:03:52 -0700
Subject: [PATCH] code-blocks: fixes key warning and some minor cleanup

---
 common/styles/global.js                   | 238 +++++++++++-----------
 components/system/components/CodeBlock.js |  12 +-
 components/system/modules/CreateToken.js  |  20 +-
 3 files changed, 129 insertions(+), 141 deletions(-)

diff --git a/common/styles/global.js b/common/styles/global.js
index 921d6861..91de6949 100644
--- a/common/styles/global.js
+++ b/common/styles/global.js
@@ -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;
-  }
-`;
\ No newline at end of file
+`;
diff --git a/components/system/components/CodeBlock.js b/components/system/components/CodeBlock.js
index 95c562a1..66146ac3 100644
--- a/components/system/components/CodeBlock.js
+++ b/components/system/components/CodeBlock.js
@@ -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>
diff --git a/components/system/modules/CreateToken.js b/components/system/modules/CreateToken.js
index 5d789a3d..3a7467fe 100644
--- a/components/system/modules/CreateToken.js
+++ b/components/system/modules/CreateToken.js
@@ -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}>