From 3d136c964d37e76e04f31bd7064399ebcf0d11a7 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 10 Mar 2022 10:39:20 +0000
Subject: [PATCH] Updated unsubscribe page

No issue
---
 core/frontend/public/ghost.css      | 75 ++++++++++++++++++++++++-----
 core/frontend/views/unsubscribe.hbs | 61 +++++++++++------------
 core/server/services/mega/mega.js   |  8 +--
 core/server/views/maintenance.html  |  4 +-
 4 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/core/frontend/public/ghost.css b/core/frontend/public/ghost.css
index 9a9b46c3fd..001d639820 100644
--- a/core/frontend/public/ghost.css
+++ b/core/frontend/public/ghost.css
@@ -663,7 +663,7 @@ h2 {
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
-    margin: 0 5%;
+    margin: 0 24px;
     padding-bottom: 8vh;
 }
 
@@ -679,15 +679,12 @@ h2 {
     max-width: 520px;
     width: 100%;
     margin: 4rem 0 6rem;
+    padding: 40px;
+    background: #fff;
     color: var(--darkgrey);
     font-size: 1.9rem;
     line-height: 1.5em;
     font-weight: 300;
-}
-
-.gh-flow-content.private {
-    padding: 40px;
-    background: #fff;
     border-radius: 3px;
     box-shadow: 
         0 2.8px 2.2px rgba(0,0,0,.02),
@@ -698,9 +695,20 @@ h2 {
         0 100px 80px rgba(0,0,0,.05);
 }
 
-@media (max-width: 400px) {
+.gh-flow-content.unsubscribe {
+        align-items: center;
+        justify-content: center;
+        max-width: 560px;
+        min-height: 200;
+        margin: 4rem 0;
+        text-align: center;
+}
+
+@media (max-width: 500px) {
     .gh-flow-content {
-        font-size: 4vw;
+        padding: 0;
+        background: transparent;
+        box-shadow: none;
     }
 }
 
@@ -711,16 +719,34 @@ h2 {
 }
 
 .gh-flow-content h1 {
-    margin-bottom: 32px;
+    margin-bottom: 24px;
     color: #15171A;
     font-size: 4.1rem;
     font-weight: 700;
     line-height: 1.15em;
 }
 
+.gh-flow-content.unsubscribe h1 {
+    font-size: 3.2rem;
+}
+
 @media (max-width: 600px) {
-    .gh-flow-content h1 {
-        font-size: 7vw;
+    .gh-flow-content h1,
+    .gh-flow-content.unsubscribe h1 {
+        font-size: 6vw;
+    }
+}
+
+.gh-flow-content.unsubscribe p {
+    margin: 0 0 .4em;
+    color: #394047;
+    font-size: 1.8rem;
+}
+
+@media (max-width: 500px) {
+    .gh-flow-content.unsubscribe p {
+        font-size: 1.6rem;
+        line-height: 1.5;
     }
 }
 
@@ -755,6 +781,33 @@ h2 {
     font-weight: 500;
 }
 
+.unsubscribe-footer {
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+@media (max-width: 500px) {
+    .unsubscribe-footer {
+        padding: 0 24px;
+        font-size: 1.4rem;
+        line-height: 1.4em;
+    }
+}
+
+.unsubscribe-footer p {
+    color: #7C8B9A;
+    margin: 0 0 .4rem;
+}
+
+.unsubscribe-footer a {
+    color: #15171A;
+    text-decoration: none;
+}
+
+.unsubscribe-footer a:hover {
+    text-decoration: underline;
+}
+
 /* Sign in
 /* ---------------------------------------------------------- */
 .gh-signin {
diff --git a/core/frontend/views/unsubscribe.hbs b/core/frontend/views/unsubscribe.hbs
index 8ff460eddc..88da9f862f 100644
--- a/core/frontend/views/unsubscribe.hbs
+++ b/core/frontend/views/unsubscribe.hbs
@@ -5,8 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>
-        {{#if member}}Successfully Unsubscribed{{/if}}
-        {{#if error}}Unsubscribe Failed{{/if}}
+        {{#if error}}
+            Unsubscribe Failed
+        {{else}}
+            Successfully Unsubscribed
+        {{/if}}
     </title>
     <link rel="stylesheet" href="{{asset "public/ghost.css" hasMinFile="true"}}" />
 </head>
@@ -15,42 +18,34 @@
         <div class="gh-viewport">
             <main class="gh-main" role="main">
                 <div class="gh-flow">
-                    <header class="gh-flow-head gh-flow-head-unsubscribe">
-                        <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-unsubscribe">
+                        {{#if @site.icon}}
+                            <img class="site-icon" src="{{img_url @site.icon absolute="true"}}" layout="fixed">
+                        {{/if}}
+                        <section class="gh-flow-content unsubscribe">
                             {{#if error}}
+                                <h1>Unsubscribe failed.</h1>
                                 <p>{{error}}</p>
-                            {{else}}
-                                {{#if member}}
-                                    <p>
-                                        <span class="gh-flow-em">{{member.email}}</span> has been successfully unsubscribed from emails.
-                                        {{#match member.status "!=" "free"}}
-                                            <br>
-                                            Don't worry, this will not cancel your paid subscription to {{@site.title}}.
-                                        {{/match}}
-                                    </p>
-                                    <p>Didn't mean to do this? Manage your account <a href="{{@site.url}}/#/portal/account">here</a>.</p>
-                                {{/if}}
+                            {{else if member}}
+                                <h1>Successfully unsubscribed.</h1>
+                                <p>
+                                    <span class="gh-flow-em">{{member.email}}</span> will no longer receive this newsletter.
+                                    {{#match member.status "!=" "free"}}
+                                        This will not cancel your paid subscription{{#if @site.title}} to {{@site.title}}{{/if}}.
+                                    {{/match}}
+                                </p>
                             {{/if}}
                         </section>
+                        <div class="unsubscribe-footer">
+                            {{#unless error}}
+                                <p>Didn't mean to do this? Manage your account <a href="{{@site.url}}/#/portal/account">here</a>.</p>
+                            {{/unless}}
+                            {{#if @site.title}}
+                                <a href="{{@site.url}}">{{@site.title}}</a>
+                            {{else}}
+                                <a href="{{@site.url}}">Visit site</a>
+                            {{/if}}
+                        </div>
                     </div>
                 </div>
             </main>
diff --git a/core/server/services/mega/mega.js b/core/server/services/mega/mega.js
index 5d7b93d1c4..44020e7018 100644
--- a/core/server/services/mega/mega.js
+++ b/core/server/services/mega/mega.js
@@ -249,14 +249,14 @@ const retryFailedEmail = async (emailModel) => {
 async function handleUnsubscribeRequest(req) {
     if (!req.url) {
         throw new errors.BadRequestError({
-            message: 'Unsubscribe failed! Could not find member'
+            message: 'Email address not found.'
         });
     }
 
     const {query} = url.parse(req.url, true);
     if (!query || !query.uuid) {
         throw new errors.BadRequestError({
-            message: (query.preview ? 'Unsubscribe preview' : 'Unsubscribe failed! Could not find member')
+            message: (query.preview ? 'Unsubscribe preview' : 'Email address not found.')
         });
     }
 
@@ -266,7 +266,7 @@ async function handleUnsubscribeRequest(req) {
 
     if (!member) {
         throw new errors.BadRequestError({
-            message: 'Unsubscribe failed! Could not find member'
+            message: 'Email address not found.'
         });
     }
 
@@ -276,7 +276,7 @@ async function handleUnsubscribeRequest(req) {
     } catch (err) {
         throw new errors.InternalServerError({
             err,
-            message: 'Failed to unsubscribe member'
+            message: 'Failed to unsubscribe this email address'
         });
     }
 }
diff --git a/core/server/views/maintenance.html b/core/server/views/maintenance.html
index 17a4dd3dc0..cdda43886a 100644
--- a/core/server/views/maintenance.html
+++ b/core/server/views/maintenance.html
@@ -44,7 +44,7 @@ body {
     flex-direction: column;
     justify-content: center;
     max-width: 500px;
-    min-height: 500px;
+    min-height: 360px;
     margin: 0 0 4vmin;
     padding: 40px;
     text-align: center;
@@ -63,7 +63,7 @@ h1 {
     letter-spacing: -0.02em;
 }
 p {
-    margin: 0 0 40px;
+    margin: 0;
     opacity: 0.7;
     font-weight: 400;
 }