feat: success message indicator, better UX for image toggling

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 {
+.success {
-    padding: .5rem;
+    background-color: #8cffc0;
-    background-color: rgb(255, 129, 129);
     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;
     }
-}
+}

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" {

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