From 279f8f85e3610dd93a1e5f81d539ff056255c625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 23 Apr 2023 13:14:36 +0200
Subject: [PATCH] style: add text to iconbuttons

---
 webui/src/components/BrowseColumn.svelte     | 16 ++++++++++++----
 webui/src/components/utils/IconButton.svelte | 13 +++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/webui/src/components/BrowseColumn.svelte b/webui/src/components/BrowseColumn.svelte
index 2051bcc..58ddabe 100644
--- a/webui/src/components/BrowseColumn.svelte
+++ b/webui/src/components/BrowseColumn.svelte
@@ -50,7 +50,9 @@
         name="pencil"
         on:click={() => (editable = !editable)}
         active={editable}
-      />
+      >
+        Edit
+      </IconButton>
       <IconButton
         name={detail ? "zoom-out" : "zoom-in"}
         on:click={() => {
@@ -58,13 +60,19 @@
           detailChanged = true;
         }}
         active={detail}
-      />
-      <IconButton name="link" on:click={() => visit()} disabled={only} />
+      >
+        Detail
+      </IconButton>
+      <IconButton name="link" on:click={() => visit()} disabled={only}>
+        Link
+      </IconButton>
       <IconButton
         name="x-circle"
         on:click={() => dispatch("close")}
         disabled={only}
-      />
+      >
+        Close
+      </IconButton>
     </header>
     <Inspect
       {address}
diff --git a/webui/src/components/utils/IconButton.svelte b/webui/src/components/utils/IconButton.svelte
index 2d24896..5fe4690 100644
--- a/webui/src/components/utils/IconButton.svelte
+++ b/webui/src/components/utils/IconButton.svelte
@@ -9,10 +9,17 @@
 
 <button on:click class:active {disabled} {title}>
   <Icon {name} />
+  <div class="text">
+    <slot />
+  </div>
 </button>
 
 <style lang="scss">
   button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     border: 0;
     background: transparent;
     cursor: pointer;
@@ -35,4 +42,10 @@
     color: gray;
     pointer-events: none;
   }
+
+  .text {
+    font-size: 0.66em;
+    text-align: center;
+    margin-top: 0.2em;
+  }
 </style>