From 3fd0ae4837b1758c5ccc754a3af7cabee4c83460 Mon Sep 17 00:00:00 2001
From: RaffaelW <rfflwlf@gmail.com>
Date: Fri, 20 Dec 2024 21:56:43 +0100
Subject: [PATCH 1/2] added small connection icon in status details

---
 data/index.html | 10 ++++++++--
 data/style.css  | 12 ++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/data/index.html b/data/index.html
index d85d818..6d0e944 100644
--- a/data/index.html
+++ b/data/index.html
@@ -49,8 +49,14 @@
                     <div class="dialog-status-content">
                         <div class="card">
                             <span>Signalstärke</span>
-                            <!-- placeholder for wifi icon -->
-                            <span><span class="rssi"></span> dBm</span>
+                            <span class="centered-vertical">
+                                <img
+                                    class="connection-icon small"
+                                    src=""
+                                    alt=""
+                                />
+                                <span><span class="rssi"></span> dBm</span>
+                            </span>
                         </div>
 
                         <div class="card">
diff --git a/data/style.css b/data/style.css
index c18fca5..e6d1123 100644
--- a/data/style.css
+++ b/data/style.css
@@ -308,3 +308,15 @@ div:has(.range-value) {
     height: 24px;
     padding: 8px;
 }
+
+.connection-icon.small {
+    padding: 0;
+    height: 1em;
+}
+
+.centered-vertical {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}

From 391ef3ab2ec6767177be225f30b94141fb331caa Mon Sep 17 00:00:00 2001
From: RaffaelW <rfflwlf@gmail.com>
Date: Fri, 20 Dec 2024 22:08:42 +0100
Subject: [PATCH 2/2] replaced text buttons with icons

---
 data/index.html | 17 +++++++++++------
 data/style.css  | 17 +++++++++++------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/data/index.html b/data/index.html
index 6d0e944..cd215a1 100644
--- a/data/index.html
+++ b/data/index.html
@@ -40,11 +40,20 @@
                     <span>PSRAM: <span class="psram-percentage"></span> %</span>
                     <span>Uptime: <span class="uptime"></span></span>
 
-                    <button type="button" class="expand-status">Mehr</button>
+                    <button type="button" class="expand-status icon-button">
+                        <img src="/icons/open.svg" alt="Mehr" />
+                    </button>
                 </div>
 
                 <dialog class="dialog-status">
-                    <h2 class="model"></h2>
+                    <div class="dialog-header">
+                        <h2 class="model"></h2>
+                        <form method="dialog">
+                            <button type="submit" class="icon-button">
+                                <img src="/icons/close.svg" alt="Schließen" />
+                            </button>
+                        </form>
+                    </div>
 
                     <div class="dialog-status-content">
                         <div class="card">
@@ -109,10 +118,6 @@
                             <span class="sdk-version"></span>
                         </div>
                     </div>
-
-                    <form method="dialog">
-                        <button type="submit">Schließen</button>
-                    </form>
                 </dialog>
 
                 <form class="config">
diff --git a/data/style.css b/data/style.css
index e6d1123..365f982 100644
--- a/data/style.css
+++ b/data/style.css
@@ -168,6 +168,17 @@ dialog::backdrop {
     background-color: #000a;
 }
 
+.dialog-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    & button {
+        margin: 0;
+    }
+}
+
 .card {
     background-color: var(--color-surface);
     padding: 8px;
@@ -297,12 +308,6 @@ div:has(.range-value) {
     gap: 8px;
 }
 
-.dialog-status button {
-    display: block;
-    margin: 0 auto;
-    margin-top: 32px;
-}
-
 .connection-icon {
     width: 24px;
     height: 24px;