POC: Tidy styles

Author: nginx-jack

assets/css/v2/style.css

@@ -1439,6 +1439,7 @@ hr {
     padding: 6px;
     margin-top: 5px;
     margin-bottom: 15px;
+    border: darkgrey 1px solid;
   }
   .header-row {
     display: flex;
@@ -1469,6 +1470,15 @@ hr {
     outline: none;
     box-shadow: 0px 2px 0px oklch(0.65 0.188 24 / 0.8);
   }
+
+  button:hover.green {
+    box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
+  }
+
+  button:focus.green {
+    outline: none;
+    box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
+  }
 }
 
 .njs-function {
@@ -1478,8 +1488,26 @@ hr {
 }
 
 #run-btn {
-  padding: 8px 16px;
-  font-size: 16px;
+  height: 29px;
+  margin-top: 5px;
+  background-color: white;
+  border: 1px solid black;
+  padding: 4px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #000;
+  z-index: 1;
+  --color-codeblock-shadow: 0% 0 0;
+  box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
+}
+
+#run-btn:hover {
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
+}
+
+#run-btn:focus {
+  outline: none;
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
 }
 
 .njs-output {

layouts/partials/njs-playground.html

@@ -21,7 +21,7 @@ <h3>Request Builder</h3>
     <div id="headers-container">
         <!-- Dynamic header entries go here -->
     </div>
-    <button id="add-header">Add Header</button>
+    <button id="add-header" class="green">Add Header</button>
 
 </div>
 <h3>NJS Function</h3>
@@ -148,7 +148,7 @@ <h3>NJS Function</h3>
                 return {
                     ...request,
                     requestText: request.body,
-                    return: (status, value) => (JSON.stringify({status, value})),
+                    return: (status, value) => (JSON.stringify({status, value}, null, 2)),
                     headersOut: {},
                 }
             }

layouts/partials/sidebar-v2.html

@@ -11,6 +11,7 @@
     (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
     (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
     (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
+    (dict "title" "NJS Playground" "url" "/njs" "type" "nginx-other")
 }}
 {{ $productMap := dict }}
 {{ range $nginxProducts }}