Added a button to reset the status page icon to the default (#6533)

Author: CommanderStorm

src/lang/en.json

@@ -1223,5 +1223,6 @@
     "labelDomainNameExpiryNotification": "Domain Name Expiry Notification",
     "domainExpiryDescription": "Trigger notification when domain names expires in:",
     "minimumIntervalWarning": "Intervals below 20 seconds may result in poor performance.",
-    "lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors."
+    "lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors.",
+    "imageResetConfirmation": "Image reset to default"
 }

src/pages/StatusPage.vue

@@ -138,6 +138,9 @@
             <h1 class="mb-4 title-flex">
                 <!-- Logo -->
                 <span class="logo-wrapper" @click="showImageCropUploadMethod">
+                    <button v-if="editMode" type="button" class="p-0 bg-transparent border-0 small-reset-btn reset-top-left" @click.stop="resetToDefaultImage">
+                        <font-awesome-icon icon="times" class="text-danger" />
+                    </button>
                     <img :src="logoURL" alt class="logo me-2" :class="logoClass" />
                     <font-awesome-icon v-if="enableEditMode" class="icon-upload" icon="upload" />
                 </span>
@@ -962,6 +965,20 @@ export default {
             }
         },
 
+        /**
+         * Reset logo image to default (public/icon.svg)
+         * @returns {void}
+         */
+        resetToDefaultImage() {
+            if (! this.editMode) {
+                return;
+            }
+
+            this.imgDataUrl = "/icon.svg";
+            this.config.icon = this.imgDataUrl;
+            toast.success(this.$t("imageResetConfirmation"));
+        },
+
         /**
          * Create an incident for this status page
          * @returns {void}
@@ -1181,6 +1198,58 @@ footer {
         cursor: pointer;
         box-shadow: 0 15px 70px rgba(0, 0, 0, 0.9);
     }
+
+    /* Reset button placed at top-left of the logo */
+    .reset-top-left {
+        position: absolute;
+        top: 0;
+        left: -15px;
+        z-index: 2;
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: white;
+        border: none;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        padding: 0;
+        transition: transform $easing-in 0.18s, box-shadow $easing-in 0.18s, background-color $easing-in 0.18s;
+        transform-origin: center;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.06);
+            transform: scale(1.18);
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+        }
+
+        &:hover ~ .icon-upload {
+            transform: none !important;
+        }
+    }
+
+    .small-reset-btn {
+        transition: transform $easing-in 0.18s, box-shadow $easing-in 0.18s, background-color $easing-in 0.18s;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.04);
+            transform: scale(1.18);
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+        }
+    }
 }
 
 .logo {