From a65b3bbe4afdf1b7329beef6cd1b78b157cbe789 Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Sat, 27 Aug 2022 07:46:24 +0100
Subject: [PATCH] Use CSS background images for options page icon buttons

---
 ext/src/ui/options/Bridge.svelte    |  4 +---
 ext/src/ui/options/Whitelist.svelte | 21 ++++-----------------
 ext/src/ui/options/styles/index.css | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/ext/src/ui/options/Bridge.svelte b/ext/src/ui/options/Bridge.svelte
index 3c1d301..5a45531 100644
--- a/ext/src/ui/options/Bridge.svelte
+++ b/ext/src/ui/options/Bridge.svelte
@@ -198,9 +198,7 @@
                     class="ghost bridge__refresh"
                     title={_("optionsBridgeRefresh")}
                     on:click={checkBridgeStatus}
-                >
-                    <img src="assets/photon_refresh.svg" alt="icon, refresh" />
-                </button>
+                />
             </div>
 
             {#if bridgeInfo}
diff --git a/ext/src/ui/options/Whitelist.svelte b/ext/src/ui/options/Whitelist.svelte
index f3b1d95..8f2b4a0 100644
--- a/ext/src/ui/options/Whitelist.svelte
+++ b/ext/src/ui/options/Whitelist.svelte
@@ -184,9 +184,7 @@
                         title={_("optionsSiteWhitelistEditItem")}
                         disabled={isEditing && !isEditingValid}
                         on:click={() => beginEditing(i)}
-                    >
-                        <img src="assets/photon_edit.svg" alt="icon, edit" />
-                    </button>
+                    />
                 {/if}
 
                 <button
@@ -195,9 +193,7 @@
                     title={_("optionsSiteWhitelistRemoveItem")}
                     disabled={isEditing && !isEditingItem && !isEditingValid}
                     on:click={() => removeItem(i)}
-                >
-                    <img src="assets/photon_delete.svg" alt="icon, remove" />
-                </button>
+                />
 
                 {#if !isEditingItem && opts.showAdvancedOptions}
                     <button
@@ -217,14 +213,7 @@
                             }
                             expandedItemIndices = expandedItemIndices;
                         }}
-                    >
-                        <img
-                            src="../assets/{isItemExpanded
-                                ? 'photon_arrowhead_up.svg'
-                                : 'photon_arrowhead_down.svg'}"
-                            alt="icon, arrow down"
-                        />
-                    </button>
+                    />
 
                     {#if isItemExpanded}
                         <div class="whitelist__expanded">
@@ -300,8 +289,6 @@
             title={_("optionsSiteWhitelistAddItem")}
             on:click={addItem}
             type="button"
-        >
-            <img src="assets/photon_new.svg" alt="icon, add" />
-        </button>
+        />
     </div>
 </div>
diff --git a/ext/src/ui/options/styles/index.css b/ext/src/ui/options/styles/index.css
index c7f64f7..4e9d960 100644
--- a/ext/src/ui/options/styles/index.css
+++ b/ext/src/ui/options/styles/index.css
@@ -144,6 +144,7 @@ input:placeholder-shown {
 }
 
 .bridge__refresh {
+    background-image: url("../assets/photon_refresh.svg");
     position: absolute;
     right: 0;
     top: 0;
@@ -370,7 +371,20 @@ input:placeholder-shown {
     width: -moz-available;
 }
 
+.whitelist__edit-button {
+    background-image: url("../assets/photon_edit.svg");
+}
+.whitelist__remove-button {
+    background-image: url("../assets/photon_delete.svg");
+}
+.whitelist__expand-button {
+    background-image: url("../../assets/photon_arrowhead_down.svg");
+}
+.whitelist__item--expanded .whitelist__expand-button {
+    background-image: url("../../assets/photon_arrowhead_up.svg");
+}
 .whitelist__add-button {
+    background-image: url("../assets/photon_new.svg");
     margin-inline-end: auto;
 }