updated status page

static/css/liquidity.css

@@ -1,4 +1,5 @@
 .question-box {
+  cursor: pointer;
   display: inline-block;
   position: relative;
   top: -8px;

static/css/status.css

@@ -1,7 +1,7 @@
 .status-element {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     gap: 100px;
     margin-top: 10px;
     font-size: 15px;
@@ -21,14 +21,15 @@
     font-size: 12px;
     display: flex;
     justify-content: end;
-    align-items: center;
+    align-items: flex-start;
     color: #999999;
     max-width: 50%;
 }
 
-.editable-content>input {
+.show-nodey>input {
-    border: none;
+    /* border: none; */
-    box-shadow: none;
+    /* box-shadow: none; */
+    padding: 5px;
     text-align: right;
 }
 
@@ -122,3 +123,19 @@
     background-color: #373a3d;
     transition: background-color 0.3s;
 }
+
+.small-btn {
+    margin-block-start: 1px;
+    width: 50px;
+    height: 25px;
+    color: white;
+    text-align: center;
+    background-color: transparent;
+    font-size: 12px;
+    text-align: center;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
+    background: linear-gradient(var(--background-color), var(--background-color)) padding-box,
+        var(--gradient) border-box;
+    border-radius: 2rem;
+    border: 1px solid transparent;
+}

static/js/status.js

@@ -9,5 +9,41 @@ $(() => {
     $("#show-nostr").click(() => {
         $("#reset-content").text("Changing the Nostr relay may cause some clients to lose connection. We'll make one last update to the old relay to tell clients about the new relay.");
         $("#reset-box").show();
+        $('.continue-button').attr('id', 'set-show-nostr');
     });
+    $("#show-nodey").click(() => {
+        $('.show-nodey').show()
+        $('#show-nodey-text').hide()
+        $('input[name="show-nodey"]').focus();
+    });
+    $("#save-show-nodey").click(() => {
+        var targetInputVal = $('input[name="show-nodey"]').val()
+        $('#show-nodey-text').text(targetInputVal)
+        $('.show-nodey').hide()
+        $('#show-nodey-text').show()
+    })
+    $("#cancel-show-nodey").click(() => {
+        $('.show-nodey').hide()
+        $('#show-nodey-text').show()
+    })
+    $(".continue-button").click((e) => {
+        if($(".continue-button").prop('id') !== "set-show-nostr") {
+            return
+        }
+        $('.continue-button').attr('id', '');
+        $("#reset-box").hide();
+        $('.show-nostr').show()
+        $('#show-nostr-text').hide()
+        $('input[name="show-nostr"]').focus();
+    });
+    $("#save-show-nostr").click(() => {
+        var targetInputVal = $('input[name="show-nostr"]').val()
+        $('#show-nostr-text').text(targetInputVal)
+        $('.show-nostr').hide()
+        $('#show-nostr-text').show()
+    })
+    $("#cancel-show-nostr").click(() => {
+        $('.show-nostr').hide()
+        $('#show-nostr-text').show()
+    })
 });

static/stauts.html

@@ -40,23 +40,37 @@
             <div class="status-element" style="margin-top: 15px;">
               <div style="text-align: left;">Public Node Name:</div>
               <div class="fc-grey editable-content">
-                  <input type="text" value="" placeholder="Nodey McNodeFace" />
+                <div class="show-nodey" style="display: flex; flex-direction: column; display: none;">
-                  <div class="question-box">
+                  <input type="text" value="" name="show-nodey" placeholder="Nodey McNodeFace" />
-                      <button class="icon-button" id="show-nodey">
+                  <div style="display: flex;justify-content: end;">
-                        <img src="img/pencil.svg" style="cursor: pointer;" />
+                    <button class="small-btn" id="cancel-show-nodey">Cancel</button>
-                      </button>
+                    <button class="small-btn" id="save-show-nodey">Save</button>
                   </div>
+                </div>
+                <div id="show-nodey-text">Nodey McNodeFace</div>
+                <div class="question-box">
+                    <button class="icon-button" id="show-nodey">
+                      <img src="img/pencil.svg" style="cursor: pointer;" />
+                    </button>
+                </div>
               </div>
             </div>
             <div class="status-element" style="margin-top: 15px;">
               <div style="text-align: left;">Nostr Relay:</div>
               <div class="fc-grey editable-content">
-                  <input type="text" placeholder="wss://relay.lightning.pub" value="" />
+                <div class="show-nostr" style="display: flex; flex-direction: column; display: none;">
-                  <div class="question-box">
+                  <input type="text" value="" name="show-nostr" placeholder="wss://relay.lightning.pub" />
-                      <button class="icon-button" id="show-nostr">
+                  <div style="display: flex;justify-content: end;">
-                        <img src="img/pencil.svg" style="cursor: pointer;" />
+                    <button class="small-btn" id="cancel-show-nostr">Cancel</button>
-                      </button>
+                    <button class="small-btn" id="save-show-nostr">Save</button>
                   </div>
+                </div>
+                <div id="show-nostr-text">wss://relay.lightning.pub</div>
+                <div class="question-box">
+                    <button class="icon-button" id="show-nostr">
+                      <img src="img/pencil.svg" style="cursor: pointer;" />
+                    </button>
+                </div>
               </div>
             </div>
             <div class="status-element" style="margin-top: 15px;">
@@ -83,7 +97,7 @@
             <div class="reset-box-content" id="reset-content">
             </div>
             <div class="continue-button-container">
-              <div class="continue-button" onclick="location.href='connect.html'">Continue</div>
+              <div class="continue-button" id="">Continue</div>
             </div>
           </div>
         </div>