improved safe upgrade success message

Signed-off-by: Andy Miller <rhuk@mac.com>

languages/en.yaml

@@ -542,7 +542,7 @@ PLUGIN_ADMIN:
   SAFE_UPGRADE_STAGE_FINALIZING: "Finalizing changes"
   SAFE_UPGRADE_STAGE_COMPLETE: "Upgrade complete"
   SAFE_UPGRADE_STAGE_ERROR: "Upgrade encountered an error"
-  SAFE_UPGRADE_RESULT_SUCCESS: "Grav upgraded to v%s"
+  SAFE_UPGRADE_RESULT_SUCCESS: "Grav Upgrade to v%s Successful!"
   SAFE_UPGRADE_RESULT_MANIFEST: "Snapshot reference: <code>%s</code>"
   SAFE_UPGRADE_RESULT_HINT: "Restore snapshots from Tools → Restore Grav."
   SAFE_UPGRADE_RESULT_NOOP: "Grav is already up to date."

themes/grav/app/updates/safe-upgrade.js

@@ -890,12 +890,21 @@ export default class SafeUpgrade {
             const manifest = result.manifest || {};
             const target = result.version || manifest.target_version || '';
             const identifier = manifest.id || '';
+            this.ensureSuccessBannerStyles();
 
             this.steps.result.html(`
                 <div class="safe-upgrade-result success">
-                    <h3>${r('SAFE_UPGRADE_RESULT_SUCCESS', target, 'Grav upgraded to v%s')}</h3>
+                    <div class="safe-upgrade-result__banner">
-                    ${identifier ? `<p>${r('SAFE_UPGRADE_RESULT_MANIFEST', identifier, 'Snapshot reference: <code>%s</code>')}</p>` : ''}
+                        <span class="safe-upgrade-result__icon"><i class="fa fa-check"></i></span>
-                    <p>${t('SAFE_UPGRADE_RESULT_HINT', 'Restore snapshots from Tools → Restore Grav.')}</p>
+                        <div>
+                            <p class="safe-upgrade-result__label">${t('SAFE_UPGRADE_STAGE_COMPLETE', 'Upgrade complete')}</p>
+                            <h3>${r('SAFE_UPGRADE_RESULT_SUCCESS', target, 'Grav Upgrade to v%s Successful!')}</h3>
+                        </div>
+                    </div>
+                    <div class="safe-upgrade-result__details">
+                        ${identifier ? `<p>${r('SAFE_UPGRADE_RESULT_MANIFEST', identifier, 'Snapshot reference: <code>%s</code>')}</p>` : ''}
+                        <p>${t('SAFE_UPGRADE_RESULT_HINT', 'Restore snapshots from Tools → Restore Grav.')}</p>
+                    </div>
                 </div>
             `);
 
@@ -932,6 +941,67 @@ export default class SafeUpgrade {
         }
     }
 
+    ensureSuccessBannerStyles() {
+        if ($('#safe-upgrade-success-banner-styles').length) {
+            return;
+        }
+
+        const css = `
+            .safe-upgrade-result.success {
+                background: rgba(41, 182, 94, 0.08);
+                border: 1px solid rgba(41, 182, 94, 0.24);
+                border-radius: 12px;
+                padding: 1.3rem 1.4rem;
+                box-shadow: 0 14px 32px rgba(41, 182, 94, 0.18);
+                margin-bottom: 1rem;
+                text-align: left;
+            }
+            .safe-upgrade-result.success .safe-upgrade-result__banner {
+                display: flex;
+                align-items: center;
+                gap: 0.9rem;
+                margin-bottom: 0.85rem;
+            }
+            .safe-upgrade-result.success .safe-upgrade-result__icon {
+                width: 44px;
+                height: 44px;
+                border-radius: 50%;
+                background: #27ae60;
+                color: #fff;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 1.25rem;
+                box-shadow: 0 10px 22px rgba(39, 174, 96, 0.35);
+            }
+            .safe-upgrade-result.success .safe-upgrade-result__label {
+                font-size: 0.82rem;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                font-weight: 600;
+                margin: 0 0 0.15rem;
+                color: rgba(39, 174, 96, 0.85);
+            }
+            .safe-upgrade-result.success h3 {
+                margin: 0;
+                font-size: 1.2rem;
+                color: #14301d;
+            }
+            .safe-upgrade-result.success .safe-upgrade-result__details {
+                font-size: 0.95rem;
+                color: rgba(20, 48, 29, 0.9);
+            }
+            .safe-upgrade-result.success .safe-upgrade-result__details p {
+                margin: 0.4rem 0;
+            }
+        `;
+
+        $('<style>', {
+            id: 'safe-upgrade-success-banner-styles',
+            text: css
+        }).appendTo('head');
+    }
+
     switchStep(step) {
         Object.keys(this.steps).forEach((handle) => {
             const isActive = handle === step;

themes/grav/js/admin.min.js

@@ -2929,7 +2929,8 @@ var SafeUpgrade = /*#__PURE__*/function () {
         var manifest = result.manifest || {};
         var target = result.version || manifest.target_version || '';
         var identifier = manifest.id || '';
-        this.steps.result.html("\n                <div class=\"safe-upgrade-result success\">\n                    <h3>".concat(r('SAFE_UPGRADE_RESULT_SUCCESS', target, 'Grav upgraded to v%s'), "</h3>\n                    ").concat(identifier ? "<p>".concat(r('SAFE_UPGRADE_RESULT_MANIFEST', identifier, 'Snapshot reference: <code>%s</code>'), "</p>") : '', "\n                    <p>").concat(t('SAFE_UPGRADE_RESULT_HINT', 'Restore snapshots from Tools → Restore Grav.'), "</p>\n                </div>\n            "));
+        this.ensureSuccessBannerStyles();
+        this.steps.result.html("\n                <div class=\"safe-upgrade-result success\">\n                    <div class=\"safe-upgrade-result__banner\">\n                        <span class=\"safe-upgrade-result__icon\"><i class=\"fa fa-check\"></i></span>\n                        <div>\n                            <p class=\"safe-upgrade-result__label\">".concat(t('SAFE_UPGRADE_STAGE_COMPLETE', 'Upgrade complete'), "</p>\n                            <h3>").concat(r('SAFE_UPGRADE_RESULT_SUCCESS', target, 'Grav Upgrade to v%s Successful!'), "</h3>\n                        </div>\n                    </div>\n                    <div class=\"safe-upgrade-result__details\">\n                        ").concat(identifier ? "<p>".concat(r('SAFE_UPGRADE_RESULT_MANIFEST', identifier, 'Snapshot reference: <code>%s</code>'), "</p>") : '', "\n                        <p>").concat(t('SAFE_UPGRADE_RESULT_HINT', 'Restore snapshots from Tools → Restore Grav.'), "</p>\n                    </div>\n                </div>\n            "));
         this.switchStep('result');
         external_jQuery_default()('[data-gpm-grav]').remove();
         if (target) {
@@ -2952,6 +2953,18 @@ var SafeUpgrade = /*#__PURE__*/function () {
         this.buttons.recheck.removeClass('hidden').prop('disabled', false);
       }
     }
+  }, {
+    key: "ensureSuccessBannerStyles",
+    value: function ensureSuccessBannerStyles() {
+      if (external_jQuery_default()('#safe-upgrade-success-banner-styles').length) {
+        return;
+      }
+      var css = "\n            .safe-upgrade-result.success {\n                background: rgba(41, 182, 94, 0.08);\n                border: 1px solid rgba(41, 182, 94, 0.24);\n                border-radius: 12px;\n                padding: 1.3rem 1.4rem;\n                box-shadow: 0 14px 32px rgba(41, 182, 94, 0.18);\n                margin-bottom: 1rem;\n                text-align: left;\n            }\n            .safe-upgrade-result.success .safe-upgrade-result__banner {\n                display: flex;\n                align-items: center;\n                gap: 0.9rem;\n                margin-bottom: 0.85rem;\n            }\n            .safe-upgrade-result.success .safe-upgrade-result__icon {\n                width: 44px;\n                height: 44px;\n                border-radius: 50%;\n                background: #27ae60;\n                color: #fff;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 1.25rem;\n                box-shadow: 0 10px 22px rgba(39, 174, 96, 0.35);\n            }\n            .safe-upgrade-result.success .safe-upgrade-result__label {\n                font-size: 0.82rem;\n                letter-spacing: 0.08em;\n                text-transform: uppercase;\n                font-weight: 600;\n                margin: 0 0 0.15rem;\n                color: rgba(39, 174, 96, 0.85);\n            }\n            .safe-upgrade-result.success h3 {\n                margin: 0;\n                font-size: 1.2rem;\n                color: #14301d;\n            }\n            .safe-upgrade-result.success .safe-upgrade-result__details {\n                font-size: 0.95rem;\n                color: rgba(20, 48, 29, 0.9);\n            }\n            .safe-upgrade-result.success .safe-upgrade-result__details p {\n                margin: 0.4rem 0;\n            }\n        ";
+      external_jQuery_default()('<style>', {
+        id: 'safe-upgrade-success-banner-styles',
+        text: css
+      }).appendTo('head');
+    }
   }, {
     key: "switchStep",
     value: function switchStep(step) {
@@ -15052,4 +15065,4 @@ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADz
 /******/ 	Grav = __webpack_exports__;
 /******/ 	
 /******/ })()
-;
+;

themes/grav/scss/template/_safe-upgrade.scss

@@ -290,6 +290,60 @@
                 border-bottom: 0;
             }
 
+            &.success {
+                background: rgba(41, 182, 94, 0.08);
+                border: 1px solid rgba(41, 182, 94, 0.24);
+                border-radius: 12px;
+                padding: 1.3rem 1.4rem;
+                box-shadow: 0 14px 32px rgba(41, 182, 94, 0.18);
+                margin-bottom: 1rem;
+                text-align: left;
+
+                .safe-upgrade-result__banner {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.9rem;
+                    margin-bottom: 0.85rem;
+                }
+
+                .safe-upgrade-result__icon {
+                    width: 44px;
+                    height: 44px;
+                    border-radius: 50%;
+                    background: #27ae60;
+                    color: #fff;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.25rem;
+                    box-shadow: 0 10px 22px rgba(39, 174, 96, 0.35);
+                }
+
+                .safe-upgrade-result__label {
+                    font-size: 0.82rem;
+                    letter-spacing: 0.08em;
+                    text-transform: uppercase;
+                    font-weight: 600;
+                    margin: 0 0 0.15rem;
+                    color: rgba(39, 174, 96, 0.85);
+                }
+
+                h3 {
+                    margin: 0;
+                    font-size: 1.2rem;
+                    color: #14301d;
+                }
+
+                .safe-upgrade-result__details {
+                    font-size: 0.95rem;
+                    color: rgba(20, 48, 29, 0.9);
+
+                    p {
+                        margin: 0.4rem 0;
+                    }
+                }
+            }
+
             &.error {
                 background: rgba(192, 57, 43, 0.08);
                 border: 1px solid rgba(192, 57, 43, 0.22);