Refined unsubscribe screen design

TryGhost · Nov 15, 2019 · b409a66 · b409a66
1 parent c99f409
commit b409a66
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 5 deletions.
diff --git a/core/frontend/views/unsubscribe.hbs b/core/frontend/views/unsubscribe.hbs
@@ -8,12 +8,43 @@
         {{#if member}}Successfully Unsubscribed{{/if}}
         {{#if error}}Unsubscribe Failed{{/if}}
     </title>
+    <link rel="stylesheet" href="{{asset "public/ghost.css" hasMinFile="true"}}" />
 </head>
 <body>
-    <p><a href="{{@site.url}}">Back to site</a></p>
-    <p>
-        {{#if member}}Success! {{member.email}} has been successfully unsubscribed.{{/if}}
-        {{#if error}}Uh oh! Unsubscribe failed: "{{error}}"{{/if}}
-    </p>
+    <div class="gh-app">
+        <div class="gh-viewport">
+            <main class="gh-main" role="main">
+                <div class="gh-flow">
+                    <header class="gh-flow-head">
+                        <nav class="gh-flow-nav">
+                            <a href="{{@site.url}}" class="gh-flow-back-plain">
+                                <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
+                                <svg width="17px" height="27px" viewBox="0 0 17 27" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
+                                        stroke-linecap="round" stroke-linejoin="round">
+                                        <g id="Stroke-42" transform="translate(2.000000, 2.000000)" stroke-width="3"
+                                            stroke="#7d878a">
+                                            <polyline points="13.5401 0.4256 0.3971 11.9256 13.5401 23.4256"></polyline>
+                                        </g>
+                                    </g>
+                                </svg>
+                                Back to {{@site.title}}
+                            </a>
+                        </nav>
+                    </header>
+
+                    <div class="gh-flow-content-wrap">
+                        <section class="gh-flow-content gh-flow-content-regular">
+                            <p>
+                                {{#if member}}<span class="gh-flow-em">{{member.email}}</span> has been successfully unsubscribed{{/if}}
+                                {{#if error}}Uh oh! Unsubscribe failed: "{{error}}"{{/if}}
+                            </p>
+                        </section>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/core/server/public/ghost.css b/core/server/public/ghost.css
@@ -691,6 +691,33 @@ h2 {
 .gh-flow-back:hover {
     border: #dae1e3 1px solid;
 }
+.gh-flow-back-plain {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+        align-items: center;
+    margin: 0 0 0 3%;
+    padding: 2px 9px 2px 5px;
+    color: #7d878a;
+    font-weight: 300;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+.gh-flow-back-plain svg {
+    margin-right: 4px;
+    height: 12px;
+    line-height: 14px;
+}
+.gh-flow-back-plain svg path {
+    stroke: #7d878a;
+    stroke-width: 1.2px;
+}
+.gh-flow-back-plain:hover {
+    color: #15212A;
+}
 .gh-flow-nav {
     position: relative;
     -ms-flex: 1;
@@ -714,6 +741,10 @@ h2 {
     padding-left: 35px;
 }
 
+.gh-flow-content-regular {
+    font-weight: 300;
+}
+
 @media (max-width: 500px) {
     .gh-flow-content {
         font-size: 4vw;
@@ -747,6 +778,9 @@ h2 {
     line-height: 1.4em;
     font-weight: 100;
 }
+.gh-flow-em {
+    font-weight: 500;
+}
 
 /* Sign in
 /* ---------------------------------------------------------- */