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] 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;