From 7c7bda669c1ba1e3a363924dae22f9afa8c8860a Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Thu, 4 Feb 2021 13:31:34 +0100
Subject: [PATCH] :sparkles: Add better layout for register success page.

---
 .../resources/images/icons/icon-verify.svg    |  3 ++
 frontend/resources/locales.json               |  2 +-
 .../resources/styles/main/partials/forms.scss | 29 +++++++++++++++++++
 frontend/src/app/main/ui/auth/register.cljs   |  6 ++--
 frontend/src/app/main/ui/icons.cljs           |  1 +
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 frontend/resources/images/icons/icon-verify.svg

diff --git a/frontend/resources/images/icons/icon-verify.svg b/frontend/resources/images/icons/icon-verify.svg
new file mode 100644
index 000000000..1b10a8a22
--- /dev/null
+++ b/frontend/resources/images/icons/icon-verify.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="279.383" height="369.004" viewBox="0 0 261.922 345.941">
+  <path d="M68.319 0L31.94 51.236v28.962L.286 95.255 0 95.12v188.953l123.419 58.308 7.542 3.56 7.542-3.56 123.419-58.308V95.12l-.233.11-31.666-15.062V51.236l-1.106-1.558L193.645 0l-36.38 51.236v.052l-26.47-37.283L104.527 51l-.94-1.322L68.318 0zm6.436 29.762l14.07 19.815H47.81l13.908-19.583 13.036-.232zm125.325 0l14.071 19.815H173.14l13.904-19.583 13.037-.232zm-62.85 14.007l14.07 19.814h-41.008L124.195 44l13.035-.23zM43.923 59.564h19.452v65.497l-19.452-9.19V59.564zm29.438 0h19.355l-.002 79.356-19.355-9.142.002-70.214zm95.887 0h19.453l-.001 70.146-19.452 9.188V59.564zm29.438 0h19.353v56.285l-19.353 9.142V59.564zM106.4 73.57h19.451v81.004l-19.45-9.19V73.57zm29.44 0h19.35l-.001 71.971-19.353 9.145.004-81.116zm94.18 21.526l17.126 7.002-17.126 8.09V95.095zm-198.08.025v15.09l-17.12-8.09 17.12-7zm-16.857 23.81l108.337 51.178v155.588L15.082 274.52V118.93zm231.756 0v155.588l-108.335 51.178V170.11l108.335-51.179zm-19.521 44.302l-45.187 82.05-26.366-21.373-7.364 12.228 37.954 30.627 51.45-94.185-10.487-9.347z"/>
+</svg>
diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json
index ffbe839e8..abb75a4a6 100644
--- a/frontend/resources/locales.json
+++ b/frontend/resources/locales.json
@@ -37,7 +37,7 @@
   },
   "auth.verification-email-sent": {
     "translations": {
-      "en": "We've sent a verification email to %s."
+      "en": "We've sent a verification email to"
     }
   },
 
diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss
index b65fd5583..03d520195 100644
--- a/frontend/resources/styles/main/partials/forms.scss
+++ b/frontend/resources/styles/main/partials/forms.scss
@@ -61,6 +61,35 @@ textarea {
     margin-bottom: 20px;
   }
 
+  .notification-icon {
+    justify-content: center;
+    display: flex;
+    margin-bottom: 3rem;
+
+    svg {
+      fill: $color-gray-60;
+      height: 40%;
+      width: 40%;
+    }
+  }
+
+  .notification-text {
+    font-size: $fs18;
+    color: $color-gray-60;
+    margin-bottom: 20px;
+  }
+
+  .notification-text-email {
+    background: $color-gray-10;
+    border-radius: $br-small;
+    color: $color-gray-60;
+    font-size: $fs18;
+    font-weight: 500;
+    margin: 1.5rem 0 2.5rem 0;
+    padding: 1rem;
+    text-align: center;
+  }
+
   h2 {
     font-size: $fs24;
     color: $color-gray-60;
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 66f618414..9d76bd2b9 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -123,8 +123,10 @@
 (mf/defc register-success-page
   [{:keys [params] :as props}]
   [:div.form-container
-   [:div.subtitle (tr "auth.verification-email-sent" (:email params ""))]
-   [:div.subtitle (tr "auth.check-your-email")]])
+   [:div.notification-icon i/icon-verify]
+   [:div.notification-text (tr "auth.verification-email-sent")]
+   [:div.notification-text-email (:email params "")]
+   [:div.notification-text (tr "auth.check-your-email")]])
 
 
 (mf/defc register-page
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index f620afd84..3d54dfb6b 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -51,6 +51,7 @@
 (def icon-empty (icon-xref :icon-empty))
 (def icon-list (icon-xref :icon-list))
 (def icon-lock (icon-xref :icon-lock))
+(def icon-verify (icon-xref :icon-verify))
 (def icon-set (icon-xref :icon-set))
 (def image (icon-xref :image))
 (def infocard (icon-xref :infocard))