Fixed playground styling issues

app/components/client/playground-scripts.js

@@ -199,8 +199,7 @@ function getMemeInfo() { // TODO: Error handling
 
 function playgroundResponseForExample1(source) {
   return `
-    <pre><code class="language-bash">
+    <pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
-<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
 curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${source}" }}'</span> <span class="token url">http://localhost:5279    </span>
 </code></pre>
 
@@ -211,10 +210,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
 
 function playgroundResponseForExample2(source) {
   return `
-    <pre><code class="language-bash">
+    <pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
-<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
 curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "${source.name}", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "${source.description}", "title": "${source.title}", "language": "${source.language}", "license": "${source.license}", "nsfw": ${source.nsfw} }}}'</span> <span class="token url">http://localhost:5279    </span>
-    </code></pre>
+</code></pre>
 
     <div class="loader" id="temp-loader"></div>
     <div id="example2-result"></div>
@@ -225,10 +223,9 @@ function playgroundResponseForExample3(source) {
   document.querySelector("[data-action='execute claim']").disabled = true;
 
   return `
-    <pre><code class="language-bash">
+    <pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
-<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
 curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "claim_tip", "params": { "amount": "0.001", "claim_id": "${source}" }}'</span> <span class="token url">http://localhost:5279    </span>
-    </code></pre>
+</code></pre>
 
     <div class="loader" id="temp-loader"></div>
     <div id="example3-result"></div>

app/components/head.js

@@ -66,6 +66,8 @@ export default (state, emit) => {
     <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
     <link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
     <link rel="shortcut icon" href="/assets/favicon.ico"/>
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
     <link rel="stylesheet" href="/assets/bundle.css"/>
 
     <script src="/assets/scripts/sockets.js"></script>

app/sass/_layout.scss

@@ -8,6 +8,7 @@ body {
 
 html {
   background-color: $lbry-white;
+  font-size: 1rem;
 }
 
 body {

app/sass/pages/_playground.scss

@@ -222,124 +222,7 @@
 .playground-content__meme__editor {
   width: 50%; min-height: 50vh;
   float: right;
-
+  font-size: 1rem;
-  h2 {
-    margin-bottom: 1rem;
-
-    &.__metadata {
-      padding-top: 3rem;
-    }
-  }
-
-  fieldset {
-    border: none;
-
-    &:not(:last-of-type) {
-      margin-bottom: 1rem;
-    }
-  }
-
-  label {
-    width: 100%;
-
-    color: $lbry-gray-2;
-    display: block;
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: 0.05rem;
-    margin-bottom: 0.025rem;
-    text-transform: uppercase;
-  }
-
-  input:not([type="checkbox"]):not([type="submit"]),
-  select,
-  textarea {
-    @media (min-width: 901px) {
-      font-size: 1.25rem;
-    }
-
-    @media (max-width: 900px) {
-      font-size: 1.05rem;
-    }
-  }
-
-  input {
-    &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
-      width: 100%;
-
-      border-bottom: 2px solid;
-      padding-bottom: 0.15rem;
-      transition: all 0.2s;
-    }
-
-    &:not([type="file"]):not([type="submit"]) {
-      &:not(:hover):not(:active) {
-        border-color: $lbry-black;
-      }
-
-      &:hover,
-      &:active {
-        border-color: $lbry-teal-3;
-      }
-    }
-
-    &[type="checkbox"] {
-      width: 1.25rem; height: 1.25rem;
-      top: 0.35rem;
-
-      border: 2px solid;
-      margin-right: 0.5rem;
-      position: relative;
-
-      &::after {
-        width: 100%; height: 100%;
-
-        content: "✓";
-        font-size: 1.3rem;
-        line-height: 1rem;
-        position: absolute;
-      }
-
-      &:not(:checked)::after {
-        color: transparent;
-      }
-
-      &:checked::after {
-        color: $lbry-teal-3;
-      }
-    }
-  }
-
-  select,
-  textarea {
-    width: 100%;
-    border-top: none;
-    border-right: none;
-    border-bottom: 2px solid;
-    border-left: none;
-
-    &:not(:hover):not(:active) {
-      border-color: $lbry-black;
-    }
-
-    &:hover,
-    &:active {
-      border-color: $lbry-teal-3;
-    }
-  }
-
-  select {
-    background-image: url("/assets/media/svg/down.svg");
-    background-position: 99% center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    padding-right: 2rem;
-  }
-
-  textarea {
-    min-height: 100px;
-    resize: vertical;
-  }
 }
 
 .playground-content__trends {

app/sockets.js

@@ -245,31 +245,34 @@ function generateMemeCreator(socket) {
     </div>
 
     <form class="playground-content__meme__editor">
-      <h2>Image Text</h2>
-
       <fieldset>
+        <legend>Image Text</legend>
+
+        <fieldset-section>
           <label for="meme-top-line">Top line</label>
           <input id="meme-top-line" name="meme-top-line" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.topLine.value}" required/>
-      </fieldset>
+        </fieldset-section>
 
-      <fieldset>
+        <fieldset-section>
           <label for="meme-bottom-line">Bottom line</label>
           <input id="meme-bottom-line" name="meme-bottom-line" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.bottomLine.value}" required/>
+        </fieldset-section>
       </fieldset>
 
-      <h2 class="__metadata">Metadata</h2>
-
       <fieldset>
+        <legend>Metadata</legend>
+
+        <fieldset-section>
           <label for="meme-title">Title</label>
           <input id="meme-title" name="meme-title" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.title.value}" required/>
-      </fieldset>
+        </fieldset-section>
 
-      <fieldset>
+        <fieldset-section>
           <label for="meme-description">Description</label>
           <textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
-      </fieldset>
+        </fieldset-section>
 
-      <fieldset>
+        <fieldset-section>
           <label for="meme-language">Language</label>
           <select id="meme-language" name="meme-language">
             <option value="ar">Arabic</option>
@@ -283,9 +286,9 @@ function generateMemeCreator(socket) {
             <option value="es">Spanish</option>
             <option value="">Not specified</option>
           </select>
-      </fieldset>
+        </fieldset-section>
 
-      <fieldset>
+        <fieldset-section>
           <label for="meme-license">License</label>
           <select id="meme-license" name="meme-license" required>
             <option value="Public Domain">Public Domain</option>
@@ -297,14 +300,17 @@ function generateMemeCreator(socket) {
             <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
             <option value="None">None</option>
           </select>
-      </fieldset>
+        </fieldset-section>
 
-      <fieldset>
+        <fieldset-section>
-        <label><input id="meme-nsfw-flag" name="nsfw" type="checkbox"/>NSFW</label>
+          <checkbox-element>
-      </fieldset>
+            <input id="meme-nsfw-flag" name="nsfw" type="checkbox">
+            <label for="meme-nsfw-flag">NSFW</label>
+            <checkbox-toggle/>
+          </checkbox-element>
 
-      <fieldset>
           <button data-action="upload image" class="button" type="button">Submit</button>
+        </fieldset-section>
       </fieldset>
     </form>
   `;

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "@inc/fastify-ws": "^1.1.0",
-    "@octokit/rest": "^16.13.4",
+    "@octokit/rest": "^16.15.0",
     "@slack/client": "^4.8.0",
     "async": "^2.6.1",
     "async-es": "^2.6.1",
@@ -64,17 +64,17 @@
     "@inc/eslint-config": "^1.1.2",
     "@inc/sasslint-config": "^1.1.3",
     "@lbry/color": "^1.1.0",
-    "@lbry/components": "^1.9.0",
+    "@lbry/components": "^2.0.1",
-    "eslint": "^5.12.1",
+    "eslint": "^5.13.0",
     "husky": "^1.3.1",
     "nodemon": "^1.18.9",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^2.5.0",
-    "sass": "^1.16.1",
+    "sass": "^1.17.0",
     "sass-lint": "^1.12.1",
     "snazzy": "^8.0.0",
     "standardx": "^3.0.1",
-    "updates": "^6.2.1"
+    "updates": "^7.0.0"
   },
   "engines": {
     "node": "10.2.x"