From 5c74f048a527f8995118bcad131d211fde326113 Mon Sep 17 00:00:00 2001
From: Meghna <11170663+MeghnaAJ@users.noreply.github.com>
Date: Sun, 9 Jan 2022 10:21:42 +0530
Subject: [PATCH] UX: updated "accept invite" error page (#15490)

---
 app/assets/stylesheets/common/base/login.scss | 10 ++++++++++
 app/views/invites/show.html.erb               |  9 +++++++--
 config/locales/server.en.yml                  |  2 +-
 public/images/crying-face.svg                 |  1 +
 4 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 public/images/crying-face.svg

diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index e0f7e1ed37d..bb84c7ac7dc 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -387,3 +387,13 @@ button#new-account-link {
     color: var(--tertiary);
   }
 }
+
+.invite-error {
+  box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+  border-radius: 10px;
+  padding: 1em 2.5em 1em 2.5em;
+  .error-image {
+    text-align: center;
+    padding-bottom: 1em;
+  }
+}
diff --git a/app/views/invites/show.html.erb b/app/views/invites/show.html.erb
index 125a9c775ef..e403e247dba 100644
--- a/app/views/invites/show.html.erb
+++ b/app/views/invites/show.html.erb
@@ -1,7 +1,12 @@
 <div id='simple-container'>
   <%if flash[:error]%>
-    <div class='alert alert-error'>
-      <%=flash[:error].html_safe%>
+    <div class='invite-error'>
+      <div class="error-image">
+        <img src="/images/crying-face.svg" alt="crying-face emoji">
+      </div>
+      <div class="error-info">
+        <%=flash[:error].html_safe%>
+      </div>
     </div>
   <%end%>
 </div>
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index 4b57bc8a5cd..2d1bdc13b0b 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -246,7 +246,7 @@ en:
 
       <p>Otherwise please <a href="%{base_url}/password-reset">Reset Password</a>.</p>
     not_found_template_link: |
-      <p>The invitation to <a href="%{base_url}">%{site_name}</a> can no longer be redeemed. Please ask the person who invited you to send you a new invitation.</p>
+      <p>This invitation to <a href="%{base_url}">%{site_name}</a> can no longer be redeemed. Please ask the person who invited you to send you a new invitation.</p>
     user_exists: "There's no need to invite <b>%{email}</b>, they <a href='%{base_path}/u/%{username}/summary'>already have an account!</a>"
     invite_exists: "You already invited <b>%{email}</b>."
     invalid_email: "%{email} isn't a valid email address."
diff --git a/public/images/crying-face.svg b/public/images/crying-face.svg
new file mode 100644
index 00000000000..c1482d41093
--- /dev/null
+++ b/public/images/crying-face.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="6em" height="6em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path fill="#FFCC4D" d="M36 18c0 9.941-8.059 18-18 18c-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"/><ellipse fill="#664500" cx="11.5" cy="17" rx="2.5" ry="3.5"/><ellipse fill="#664500" cx="24.5" cy="17" rx="2.5" ry="3.5"/><path fill="#664500" d="M5.999 13.5a1 1 0 0 1-.799-1.6c3.262-4.35 7.616-4.4 7.8-4.4a1 1 0 0 1 .004 2c-.155.002-3.568.086-6.204 3.6a.998.998 0 0 1-.801.4zm24.002 0a.998.998 0 0 1-.801-.4c-2.641-3.521-6.061-3.599-6.206-3.6a1.002 1.002 0 0 1-.991-1.005A.997.997 0 0 1 23 7.5c.184 0 4.537.05 7.8 4.4a1 1 0 0 1-.799 1.6zm-6.516 14.879C23.474 28.335 22.34 24 18 24s-5.474 4.335-5.485 4.379a.496.496 0 0 0 .232.544a.51.51 0 0 0 .596-.06C13.352 28.855 14.356 28 18 28c3.59 0 4.617.83 4.656.863a.5.5 0 0 0 .829-.484z"/><path fill="#5DADEC" d="M16 31c0 2.762-2.238 5-5 5s-5-2.238-5-5s4-10 5-10s5 7.238 5 10z"/></svg>