From 326676df973145898a9947f765cb774e2a3ab6a1 Mon Sep 17 00:00:00 2001
From: Florian Aucomte <33633200+faucomte97@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:38:37 +0000
Subject: [PATCH] feat: Add a button to link to Gmail on email verification
 (#2230)

* feat: Add open in Gmail button to verify email page

* Fix tests

* Bring plane back

* Feedback
---
 portal/static/portal/sass/partials/_buttons.scss     | 11 +++++++++++
 portal/static/portal/sass/partials/_forms.scss       |  6 +++---
 .../templates/portal/email_verification_needed.html  | 12 +++++-------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/portal/static/portal/sass/partials/_buttons.scss b/portal/static/portal/sass/partials/_buttons.scss
index e5b69374a..b739c4ba1 100644
--- a/portal/static/portal/sass/partials/_buttons.scss
+++ b/portal/static/portal/sass/partials/_buttons.scss
@@ -150,6 +150,17 @@ table {
   }
 }
 
+.button-email {
+  &:after {
+    content: "\e0be";
+    font-family: "Material Icons Outlined";
+    position: relative;
+    top: 2px;
+    left: 5px;
+    line-height: 0.9em;
+  }
+}
+
 .button--regular,
 .ui-dialog-buttonset button {
   @include _padding(10px, 15px, 10px, 15px);
diff --git a/portal/static/portal/sass/partials/_forms.scss b/portal/static/portal/sass/partials/_forms.scss
index 20436fda4..f28703005 100644
--- a/portal/static/portal/sass/partials/_forms.scss
+++ b/portal/static/portal/sass/partials/_forms.scss
@@ -177,9 +177,9 @@ form {
   color: $color-text-secondary;
   background-color: $color-primary-400;
 
-  a,
-  a:hover,
-  a:focus {
+  a:not(.button--home),
+  a:not(.button--home):hover,
+  a:not(.button--home):focus {
     color: $color-text-secondary;
   }
 
diff --git a/portal/templates/portal/email_verification_needed.html b/portal/templates/portal/email_verification_needed.html
index fc31ed815..92ef15ed1 100644
--- a/portal/templates/portal/email_verification_needed.html
+++ b/portal/templates/portal/email_verification_needed.html
@@ -7,13 +7,11 @@
     <h4>We need to verify your email address</h4>
     <img class="background" title="Paper Plane" alt="Verification email sent" src="{% static 'portal/img/paper_plane.png' %}">
     <p class="text-left">An email has been sent to the address you provided.</p>
-    <p class="text-left">Please follow the link within the email to verify your details. This will expire in 1 hour.</p>
-    <p class="text-left">If you don't receive the email within the next few minutes, check your spam folder.</p>
+    <p class="text-left">Please follow the link within the email to verify your details. This will expire in one hour.</p>
+    <p class="text-left">If you don't receive the email within the next few minutes, please check your spam folder.</p>
     <div>
-        {% if usertype == "TEACHER" %}
-            <a id="home_button" href="{% url 'home' %}" class="button button--primary button--login">Back to homepage</a>
-        {% else %}
-            <a id="home_button" href="{% url 'home' %}" class="button button--home">Back to homepage</a>
-        {% endif %}
+        <a target="_blank" href="https://mail.google.com/mail/#search/from%3Ano-reply%40codeforlife.education+subject%3AEmail+Verification"
+           class="button button--home button-email">Open in Gmail</a>
     </div>
+    <p class="text-left"><a id="home_button" href="{% url 'home' %}">&lt; back to homepage</a></p>
 {% endblock form_content %}