From 88a332e9573b52560b03417efc0919254389f5aa Mon Sep 17 00:00:00 2001
From: Nadir Technologies <116459177+Nadir-Software@users.noreply.github.com>
Date: Tue, 31 Oct 2023 21:35:38 +0000
Subject: [PATCH] UI/UX improvements for filter comparison

---
 filters.html |  2 +-
 filters.js   | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/filters.html b/filters.html
index e3203be..a9bf0a6 100644
--- a/filters.html
+++ b/filters.html
@@ -28,7 +28,7 @@ <h1>Image Viewer</h1>
                 <span id="export-text">Copy link to filtered image</span>
             </button>
             
-            <button onclick="compare()" id="original-button">
+            <button onclick="compare()" id="original-button" inert class="button-subtle">
                 <span class="material-symbols-rounded">compare</span>
                 <span id="original-text">Show original image</span>
             </button>
diff --git a/filters.js b/filters.js
index c7d7139..28b4c7a 100644
--- a/filters.js
+++ b/filters.js
@@ -29,7 +29,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
         document.getElementById("hue-rotate").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("invert").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("opacity").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("saturate").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("sepia").style.backgroundColor = generateRGBA(palette.accent, 0.25);
 
@@ -105,14 +104,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
             document.getElementById("opacity").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         })
 
-        document.getElementById("original-button").addEventListener("mouseover", () => {
-            document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.5);
-        })
-
-        document.getElementById("original-button").addEventListener("mouseout", () => {
-            document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        })
-
         document.getElementById("saturate").addEventListener("focusin", () => {
             document.getElementById("saturate").style.backgroundColor = generateRGBA(palette.accent, 0.5);
         })
@@ -152,6 +143,8 @@ function generateMaterialDesignPalette(imageURL, callback) {
                 primaryLight: swatches.LightVibrant.getHex(),
                 primary: swatches.Muted.getHex(),
             };
+
+            localStorage.setItem("accent", palette.accent);
   
             // Execute the callback function with the generated palette
             callback(null, palette);
@@ -327,6 +320,19 @@ function addFilter(filter) {
         }
     }
 
+    document.getElementById("original-button").removeAttribute("inert");
+    document.getElementById("original-button").removeAttribute("class");
+
+    document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+
+    document.getElementById("original-button").addEventListener("mouseover", () => {
+        document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.5);
+    })
+
+    document.getElementById("original-button").addEventListener("mouseout", () => {
+        document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+    })
+
     filters = img.style.filter;
     document.getElementById("original-text").innerText = "Show original image";
 }