Styling

Author: kishikawakatsumi

Public/css/common.css

@@ -74,6 +74,7 @@
   -webkit-user-select: none;
   touch-action: manipulation;
   font-size: 90%;
+  font-weight: 600;
 }
 
 #debugger-button:hover {

Public/index.html

@@ -209,7 +209,9 @@ <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
                 <div class="d-flex">
                   <input id="debugger-step-range" type="range" class="form-range flex-grow-1" value="1" min="1"
                     max="100">
-                  <div id="debugger-step-range-max" class="ms-3">100</div>
+                  <div class="ms-3">
+                    <span id="debugger-step-range-max" class="badge rounded-pill text-bg-secondary">100</span>
+                  </div>
                 </div>
                 <p class="mb-0" style="text-align: center">
                   <button id="debugger-go-start" class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
@@ -229,7 +231,9 @@ <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
                 </p>
 
                 <div class="my-1" style="font-weight: 600;">Match Step <span id="debugger-match-step"></span></div>
-                <div id="debugger-regex" class="border mb-3">
+                <div class="mb-3">
+                  <input id="debugger-regex" type="text" class="form-control form-control-sm border shadow-none"
+                    style="border-radius: 0;" readonly>
                 </div>
 
                 <div class="border my-3">

Public/js/app.js

@@ -207,7 +207,7 @@ export class App {
     matchStep.textContent = "1";
 
     const debuggerPattern = document.getElementById("debugger-regex");
-    debuggerPattern.textContent = expression;
+    debuggerPattern.value = expression;
 
     this.debuggerText.value = text;
 
@@ -302,7 +302,7 @@ export class App {
     const method = "debug";
     const params = {
       method,
-      pattern: document.getElementById("debugger-regex").textContent,
+      pattern: document.getElementById("debugger-regex").value,
       text: this.debuggerText.value,
       matchOptions: this.matchOptions.value,
       step: document.getElementById("debugger-step-range").value,

Public/scss/default.scss

@@ -17,6 +17,7 @@ $table-cell-padding-y-sm: 0.05rem;
 @import "bootstrap/scss/buttons";
 @import "bootstrap/scss/transitions";
 @import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/badge";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/modal";