From d323a16d1d6b4c1d5f31969f747d532b61a48b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Mon, 18 Feb 2019 17:28:50 -0600
Subject: [PATCH] Playground uses same component HTML as Developer Program

---
 app/components/client/playground-scripts.js | 12 +++---------
 app/components/playground.js                |  4 ++--
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/app/components/client/playground-scripts.js b/app/components/client/playground-scripts.js
index db3b836..7a17f9f 100644
--- a/app/components/client/playground-scripts.js
+++ b/app/components/client/playground-scripts.js
@@ -268,9 +268,7 @@ const handleExamples = debounce(event => {
       if (document.getElementById("playground-url").style.display === "none")
         document.getElementById("playground-url").removeAttribute("style");
 
-      for (const example of document.querySelectorAll(".playground-navigation__example"))
-        example.classList.remove("active");
-
+      document.querySelectorAll(".playground-navigation__example").forEach(example => example.classList.remove("active"));
       document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
@@ -294,9 +292,7 @@ const handleExamples = debounce(event => {
       document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
       document.getElementById("playground-url").style.display = "none";
 
-      for (const example of document.querySelectorAll(".playground-navigation__example"))
-        example.classList.remove("active");
-
+      document.querySelectorAll(".playground-navigation__example").forEach(example => example.classList.remove("active"));
       document.querySelector(".playground-navigation__example:nth-child(2)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
@@ -323,9 +319,7 @@ const handleExamples = debounce(event => {
       if (document.getElementById("playground-url").style.display === "none")
         document.getElementById("playground-url").removeAttribute("style");
 
-      for (const example of document.querySelectorAll(".playground-navigation__example"))
-        example.classList.remove("active");
-
+      document.querySelectorAll(".playground-navigation__example").forEach(example => example.classList.remove("active"));
       document.querySelector(".playground-navigation__example:nth-child(3)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
diff --git a/app/components/playground.js b/app/components/playground.js
index c4463a3..f0a60d7 100644
--- a/app/components/playground.js
+++ b/app/components/playground.js
@@ -28,10 +28,10 @@ export default () => dedent`
 
 function example1() {
   return html`
-    <div class="playground-content__urlbar" id="playground-url">
+    <input-submit class="playground-content__urlbar" id="playground-url">
       <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/>
       <button class="button" data-action="execute claim" type="button">Resolve</button>
-    </div>
+    </input-submit>
 
     <div class="playground-content__trends" id="playground-loader"></div>
     <div id="playground-results"></div>