Made offer Archive less scary

ghost/admin/app/styles/layouts/offers.css

@@ -236,6 +236,36 @@
     margin-right: 6px;
 }
 
+.gh-offer-archive-container {
+    display: flex;
+    align-items: center;
+    max-width: 680px;
+}
+
+.gh-offer-archive-container p {
+    display: flex;
+    color: var(--middarkgrey);
+    font-size: 1.3rem;
+    margin: 0;
+    border-left: 1px solid var(--whitegrey);
+    padding-left: 16px;
+    margin-left: 16px;
+    line-height: 1.5em;
+}
+
+.gh-offer-archive-container p svg {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    margin-right: 4px;
+    margin-top: 2px;
+}
+
+.gh-offer-archive-container p svg path,
+.gh-offer-archive-container p svg circle {
+    fill: var(--midgrey);
+}
+
 @media (max-width: 1280px) {
     .gh-offer-portal-preview {
         display: none;

ghost/admin/app/templates/offer.hbs

@@ -241,7 +241,7 @@
         </div>
 
         <div class="gh-main-section">
-            <div class="gh-main-section-block">
+            <div class="gh-main-section-block gh-offer-archive-container">
                 {{#if (eq this.offer.status "active")}}
                     {{#if (not this.offer.isNew)}}
                         <button
@@ -251,6 +251,9 @@
                         >
                             <span>Archive offer</span>
                         </button>
+                        <p>
+                            <span>Archiving an offer ensures it is no longer available for use. Don’t worry, existing members remain unchanged and the offer can be reactivated anytime.</span>
+                        </p>
                     {{/if}}
                 {{else}}
                     <button