From b5ea6e746c732abaffe74a71127c66b287efed33 Mon Sep 17 00:00:00 2001
From: Meghna <11170663+MeghnaAJ@users.noreply.github.com>
Date: Fri, 29 Jul 2022 22:33:11 +0530
Subject: [PATCH] UX: updated account activation page design (#17730)

---
 .../stylesheets/common/base/activation.scss   | 27 +++++++++++++++
 app/views/users/activate_account.html.erb     |  4 ++-
 .../users/perform_account_activation.html.erb | 33 +++++++++++--------
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index e3be4947bc..00ec1e4fa7 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -26,3 +26,30 @@
     }
   }
 }
+
+.activate-account {
+  .activate-title {
+    text-align: center;
+    .waving-hand {
+      height: 32px;
+      margin-bottom: 13px;
+    }
+  }
+  #activate-account-button {
+    margin-top: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  .perform-activation {
+    border-top: 6px solid var(--tertiary);
+    box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+    border-radius: 10px;
+    padding: 1em 2.5em 1em 2.5em;
+    .image {
+      width: 150px;
+      margin: auto;
+      padding-bottom: 1em;
+    }
+  }
+}
diff --git a/app/views/users/activate_account.html.erb b/app/views/users/activate_account.html.erb
index 790df1011c..34973d66cb 100644
--- a/app/views/users/activate_account.html.erb
+++ b/app/views/users/activate_account.html.erb
@@ -1,5 +1,6 @@
 <div id='simple-container'>
-    <h2><%= t 'activation.welcome_to', site_name: SiteSetting.title %></h2>
+  <div class='activate-account'>
+    <h1 class="activate-title"><%= t 'activation.welcome_to', site_name: SiteSetting.title %> <img src="<%= Emoji.url_for("wave") %>" alt="" class="waving-hand"></h1>
     <br/>
     <button class='btn btn-primary' id='activate-account-button'><%= t 'activation.action' %></button>
 
@@ -7,6 +8,7 @@
       <%= hidden_field_tag 'password_confirmation' %>
       <%= hidden_field_tag 'challenge' %>
     <% end %>
+  </div>
 </div>
 
 <%- content_for(:no_ember_head) do %>
diff --git a/app/views/users/perform_account_activation.html.erb b/app/views/users/perform_account_activation.html.erb
index ae726da69f..5992e40903 100644
--- a/app/views/users/perform_account_activation.html.erb
+++ b/app/views/users/perform_account_activation.html.erb
@@ -1,22 +1,27 @@
 <div id='simple-container'>
-
   <%if flash[:error]%>
     <div class='alert alert-error'>
       <%=flash[:error]%>
     </div>
   <%else%>
-    <h2><%= t 'activation.welcome_to', site_name: SiteSetting.title %></h2>
-    <br>
-
-    <% if @needs_approval %>
-      <p><%= t 'activation.approval_required' %></p>
-    <% else %>
-      <p><%= t('activation.please_continue') %></p>
-      <p><a class="btn" href="<%= path "/" %>"><%= t('activation.continue_button', site_name: SiteSetting.title) -%></a></p>
-      <%- content_for(:no_ember_head) do %>
-        <%= tag.meta id: 'data-auto-redirect', data: { path: path('/') } %>
-      <%- end %>
-      <%= preload_script 'auto-redirect' %>
-    <% end %>
+    <div class='activate-account'>
+      <h1 class="activate-title"><%= t 'activation.welcome_to', site_name: SiteSetting.title %> <img src="<%= Emoji.url_for("wave") %>" alt="" class="waving-hand"></h1>
+      <br>
+      <div class='perform-activation'>
+        <div class="image">
+          <img src="/images/wizard/tada.svg" alt="" class="waving-hand">
+        </div>
+        <% if @needs_approval %>
+          <p><%= t 'activation.approval_required' %></p>
+        <% else %>
+          <p><%= t('activation.please_continue') %></p>
+          <p><a class="btn" href="<%= path "/" %>"><%= t('activation.continue_button', site_name: SiteSetting.title) -%></a></p>
+          <%- content_for(:no_ember_head) do %>
+            <%= tag.meta id: 'data-auto-redirect', data: { path: path('/') } %>
+          <%- end %>
+          <%= preload_script 'auto-redirect' %>
+        <% end %>
+      </div>
+    </div>
   <%end%>
 </div>