VDS-841: Improve login page UI (#187)

* VDS-841: Improve login page UI

* Add aria-hidden="true" to icons

* Remove font weight class

assets/scss/bootstrap-migration/_custom.scss

@@ -1,7 +1,21 @@
-@import "custom/backgrounds";
-@import "custom/popover";
-@import "custom/navbar";
-@import "custom/sizing";
-@import "custom/buttons";
-@import "custom/type";
-@import "custom/modals";
+@import 'custom/backgrounds';
+@import 'custom/popover';
+@import 'custom/navbar';
+@import 'custom/sizing';
+@import 'custom/buttons';
+@import 'custom/type';
+@import 'custom/modals';
+@import 'custom/lists';
+
+.add-cart-item-total {
+  height: 40px;
+}
+
+.login-card {
+  background: center / cover no-repeat url('../../images/login-card-bg.png');
+  .login-card-title {
+    text-shadow: 1px 1px 0px $dark;
+    text-transform: none;
+    font-size: 1.75rem;
+  }
+}

assets/scss/bootstrap-migration/_maps.scss

@@ -6,7 +6,8 @@ $theme-colors: map-merge(
     'gray-600': $gray-600,
     'gray-300': $gray-300,
     'gray-200': $gray-200,
-    'gray-modal': $gray-modal-bg
+    'gray-modal': $gray-modal-bg,
+    'white': $white
   )
 );
 

assets/scss/bootstrap-migration/custom/_lists.scss

@@ -0,0 +1,8 @@
+.dashed-list {
+  list-style-type: none;
+  li:before {
+    content: '\2014';
+    position: absolute;
+    margin-left: -1.25rem;
+  }
+}

assets/scss/bootstrap-migration/custom/_type.scss

@@ -1,5 +1 @@
 @include text-emphasis-variant('.text-dark-green', $dark-green);
-
-.add-cart-item-total {
-  height: 40px;
-}

locales/en.default.json

@@ -475,6 +475,7 @@
             "forgot_password": "Forgot your password?",
             "reset_password_success": "We've sent you an email with a link to update your password.",
             "sign_in": "Sign In",
+            "continue": "Continue",
             "or": "or",
             "cancel": "Return to Store",
             "guest_title": "Continue as a guest",

snippets/bootstrap-migration/customers/login-form.liquid

@@ -26,8 +26,11 @@
     <div class="row">
         <div class="col-6 col-md-5">
     {% else %}
-            <div class="form-group">
-                <input type="submit" class="btn btn-primary w-25 w-md-50" value="{{ 'customer.sign_in.sign_in' | t }}">
+            <div class="form-group mb-5">
+                {% include 'bootstrap-migration/customers/forgot-links' %}
+            </div>
+            <div>
+                <input type="submit" class="btn btn-primary w-50" value="{{ 'customer.sign_in.continue' | t }}">
     {% endif %}
         {% if template != 'customers/login' %}
                 <input type="submit" class="btn btn-primary btn-block" value="{{ 'customer.sign_in.sign_in' | t }}">
@@ -39,11 +42,6 @@
             </div>
         {% endif %}
         </div>
-        {% if template == 'customers/login' %}
-        <div class="form-group">
-            {% include 'bootstrap-migration/customers/forgot-links' %}
-        </div>
-        {% endif %}
 </fieldset>
 {{ antiforgery }}
 </form>

snippets/bootstrap-migration/customers/sign-in-content.liquid

@@ -0,0 +1,17 @@
+<div class="col-sm-6 card-body d-flex flex-column justify-content-center p-4">
+    {% capture loginUrl %} {{ requestUrl }} {% endcapture %}
+    {% include 'bootstrap-migration/customers/login-form' %}
+</div>
+<div class="col-sm-6 login-card card-body d-flex flex-column justify-content-center p-4">
+    <h2 class="text-white login-card-title mb-3">{{ 'customer.sign_in.registration_title' | t: shop.name }}</h2>
+    <ul class="pl-4 dashed-list">
+        {% assign advantages_size = 'customer.sign_in.registration_advantages' | t | size | minus: 2 %}
+        {% assign registration_advantage = 'customer.sign_in.registration_advantages' | t | slice: 1, advantages_size %}
+        {% assign advantages = registration_advantage | split: ',' %}
+        {% for phrase in advantages %}
+            {% assign phrase_size = phrase | strip | size | minus: 2 %}
+            <li>{{ phrase | strip | slice: 1, phrase_size }}</li>
+        {% endfor %}
+    </ul>
+    {{ 'layout.customer.register' | t | customer_register_link | replace: 'a href', 'a class="btn btn-white w-50" href' }}
+</div>

snippets/bootstrap-migration/form-errors-custom.liquid

@@ -1,7 +1,10 @@
 {% unless form.errors.empty? %}
-<div class="alert alert-danger">
-    <p>{{ 'general.forms.post_error' | t }}</p>
-    <ul class="disc">
+<div class="alert alert-danger text-dark d-flex align-items-center">
+    <span class="fa-stack">
+        <i class="fa fa-circle fa-stack-2x text-danger" aria-hidden="true"></i>
+        <i class="fa fa-times fa-stack-1x text-white" aria-hidden="true"></i>
+      </span>
+    <ul class="disc mb-0">
         {% assign message = 'contact.form.message' | t %}
         {% for field in form.errors %}
             {% if field == 'form' %}

templates/customers/login.liquid

@@ -1,28 +1,14 @@
 {% layout 'bootstrap_migration' %}
 
-<main class="container pt-4 pb-5 flex-grow-1" role="main">
-    <div class="row">
-        <div class="col-md-4">
+<main class="container pt-4 pb-sm-5 flex-grow-1" role="main">
+    <div class="row justify-content-center">
+        <div class="col-md-7">
             <h1>{{ 'customer.sign_in.title' | t }}</h1>
-            {% capture loginUrl %} {{ requestUrl }} {% endcapture %}
-            {% include 'bootstrap-migration/customers/login-form' %}
-        </div>
-        <div class="col-md-8">
-            <h1>{{ 'customer.sign_in.registration_title' | t: shop.name }}</h1>
-            <p>
-                {{ 'customer.sign_in.registration_advantages_title' | t: shop.name }}
-                <ul>
-                    {% assign advantages_size = 'customer.sign_in.registration_advantages' | t | size | minus: 2 %}
-                    {% assign registration_advantage = 'customer.sign_in.registration_advantages' | t | slice: 1, advantages_size %}
-                    {% assign advantages = registration_advantage | split: ',' %}
-                    {% for phrase in advantages %}
-                        {% assign phrase_size = phrase | strip | size | minus: 2 %}
-                        <li>{{ phrase | strip | slice: 1, phrase_size }}</li>
-                    {% endfor %}
-                </ul>
-            </p>
-            <div>
-                {{ 'layout.customer.register' | t | customer_register_link | replace: 'a href', 'a class="btn btn-primary w-25" href' }}
+            <div class="d-none d-sm-flex card flex-row flex-wrap">
+                {% include 'bootstrap-migration/customers/sign-in-content' %}
+            </div>
+            <div class="d-flex d-sm-none row">
+                {% include 'bootstrap-migration/customers/sign-in-content' %}
             </div>
         </div>
     </div>