From f9af31d4a7529c075d4be3d30c02f2974dcd8320 Mon Sep 17 00:00:00 2001
From: polarDefender <patch.demon115@gmail.com>
Date: Mon, 3 Jun 2024 10:32:56 -0700
Subject: [PATCH] updated status page

---
 static/css/status.css |  9 ++++++-
 static/css/styles.css |  1 +
 static/stauts.html    | 56 +++++++++++++++++++++----------------------
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/static/css/status.css b/static/css/status.css
index ac260571..11693750 100644
--- a/static/css/status.css
+++ b/static/css/status.css
@@ -17,12 +17,19 @@
     color: #ccc731;
 }
 
-.editabl-content {
+.editable-content {
     font-size: 12px;
     display: flex;
     justify-content: end;
     align-items: center;
     color: #999999;
+    max-width: 50%;
+}
+
+.editable-content>input {
+    border: none;
+    box-shadow: none;
+    text-align: right;
 }
 
 .invite-link {
diff --git a/static/css/styles.css b/static/css/styles.css
index b2d9454b..f38597db 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -81,6 +81,7 @@ input[type="text"] {
   border: 1px solid #c740c7;
   border-radius: 5px;
   font-size: 14px;
+  outline: none;
   color: #999999;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
 }
diff --git a/static/stauts.html b/static/stauts.html
index 7c987e7d..b1bf80fb 100644
--- a/static/stauts.html
+++ b/static/stauts.html
@@ -38,42 +38,42 @@
       <section class="node-status">
         <div>
             <div class="status-element" style="margin-top: 15px;">
-                <div>Public Node Name:</div>
-                <div class="fc-grey editabl-content">
-                    Nodey McNodeFace 
-                    <div class="question-box">
-                        <button class="icon-button" id="show-nodey">
-                          <img src="img/pencil.svg" />
-                        </button>
-                    </div>
-                </div>
+              <div style="text-align: left;">Public Node Name:</div>
+              <div class="fc-grey editable-content">
+                  <input type="text" value="" placeholder="Nodey McNodeFace" />
+                  <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>Nostr Relay:</div>
-                <div class="fc-grey editabl-content">
-                    wss://relay.lightning.pub 
-                    <div class="question-box">
-                        <button class="icon-button" id="show-nostr">
-                          <img src="img/pencil.svg" />
-                        </button>
-                    </div>
-                </div>
+              <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="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;">
-                <div>Administrator:</div>
-                <div>
-                    npub12334556677889990
-                </div>
+              <div>Administrator:</div>
+              <div>
+                  npub12334556677889990
+              </div>
             </div>
         </div>
         <div style="display: flex; justify-content: end;padding-right: 12px;">
-            <div class="marked" id="show-reset" style="text-decoration: underline; margin-top: 5px;position: relative;">Reset 
-              <div class="watchdog-status">
-                <button class="icon-button" id="show-question">
-                  <img src="img/question.svg" />
-                </button>
-              </div>
+          <div class="marked" id="show-reset" style="text-decoration: underline; margin-top: 5px;position: relative;">Reset 
+            <div class="watchdog-status">
+              <button class="icon-button" id="show-question">
+                <img src="img/question.svg" />
+              </button>
             </div>
+          </div>
         </div>
         <div id="reset-box">
           <div style="width: 100%;height: 100%;position: relative;">