From 0e9677ec61636837673661d7e11dbbd44e82cc36 Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Thu, 29 Dec 2022 13:52:17 -0500
Subject: [PATCH] feat: success message indicator, better UX for image toggling

---
 public/home.css       | 30 ++++++++++++++++++++----------
 src/routes/options.go |  6 +++++-
 templates/home.html   |  8 ++++++--
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/public/home.css b/public/home.css
index dbd6a70..e499a09 100644
--- a/public/home.css
+++ b/public/home.css
@@ -25,13 +25,13 @@ body {
 
 .view-form {
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
     align-items: center;
 }
 
 .view-input {
     width: 100%;
-    padding: .5rem;
+    padding: 0.5rem;
     border: 2px solid transparent;
     border-radius: 3px;
 
@@ -48,7 +48,7 @@ body {
 }
 
 .view-button {
-    padding: .5rem;
+    padding: 0.5rem;
     border: 2px solid transparent;
     border-radius: 3px;
 
@@ -65,29 +65,39 @@ body {
     background-color: var(--input-bg-hover);
 }
 
-.error {
-    padding: .5rem;
-    background-color: rgb(255, 129, 129);
+.success {
+    background-color: #8cffc0;
     color: black;
+}
+
+.error {
+    background-color: rgb(255, 129, 129);
+}
+
+.error,
+.success {
+    color: black;
+    padding: 0.5rem;
     border-radius: 5px;
     margin-bottom: 1rem;
 }
 
-.error p {
+.error p,
+.success p {
     margin: 0;
 }
 
 .options {
     margin-top: 1rem;
     display: flex;
-    gap: .5rem;
+    gap: 0.5rem;
 }
 
 .title {
     display: flex;
     width: 100%;
     align-items: center;
-    gap: .5rem;
+    gap: 0.5rem;
 }
 
 .logo {
@@ -100,4 +110,4 @@ body {
         padding: 1rem;
         box-sizing: border-box;
     }
-}
\ No newline at end of file
+}
diff --git a/src/routes/options.go b/src/routes/options.go
index cf887bd..f4c0b77 100644
--- a/src/routes/options.go
+++ b/src/routes/options.go
@@ -18,7 +18,11 @@ func ChangeOptions(c *gin.Context) {
 			text = "enabled"
 		}
 		c.SetCookie("disable_images", fmt.Sprintf("%t", !c.MustGet("disable_images").(bool)), 60*60*24*365*10, "/", "", false, true)
-		c.String(200, "Images are now %s", text)
+		c.HTML(200, "home.html", gin.H{
+			"successMessage": "Images are now " + text,
+			"theme":          c.MustGet("theme").(string),
+		})
+
 	case "theme":
 		text := "dark"
 		if c.MustGet("theme").(string) == "dark" {
diff --git a/templates/home.html b/templates/home.html
index 3bced95..4598576 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -31,11 +31,15 @@
                 browsing habits and other browser fingerprint data to
                 StackOverflow.
             </p>
-            {{ if .errorMessage }}
+            {{ if .successMessage }}
+            <div class="success">
+                <p><b>Success</b>: {{ .successMessage }}</p>
+            </div>
+            {{ else}} {{ if .errorMessage }}
             <div class="error">
                 <p><b>Error</b>: {{ .errorMessage }}</p>
             </div>
-            {{ end }}
+            {{end}} {{ end }}
             <form method="POST">
                 <div class="view-form">
                     <input