From d9985643f3b7df697280f01a7a778c9876b92397 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 28 Sep 2020 14:26:12 +0300
Subject: [PATCH] Additional styling for the frontend pages.

---
 application/views/appointments/book.php | 48 ++++++++++++-------------
 assets/css/error404.css                 |  2 +-
 assets/css/forgot_password.css          |  2 +-
 assets/css/frontend.css                 | 31 +++++++++-------
 assets/css/login.css                    |  2 +-
 assets/css/logout.css                   |  2 +-
 assets/css/no_privileges.php.css        |  2 +-
 assets/js/frontend_book.js              | 47 ++++++++++++++----------
 assets/js/frontend_book_api.js          |  2 +-
 9 files changed, 77 insertions(+), 61 deletions(-)

diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index 0db795ef..86e8d2a8 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -185,10 +185,10 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-next-1" class="btn button-next btn-info"
+                    <button type="button" id="button-next-1" class="btn button-next btn-dark"
                             data-step_index="1">
                         <?= lang('next') ?>
-                        <i class="fas fa-long-arrow-alt-right ml-2"></i>
+                        <i class="fas fa-chevron-right ml-2"></i>
                     </button>
                 </div>
             </div>
@@ -219,15 +219,15 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-back-2" class="btn button-back btn-light"
+                    <button type="button" id="button-back-2" class="btn button-back btn-secondary"
                             data-step_index="2">
-                        <i class="fas fa-long-arrow-alt-left mr-2"></i>
+                        <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
                     </button>
-                    <button type="button" id="button-next-2" class="btn button-next btn-info"
+                    <button type="button" id="button-next-2" class="btn button-next btn-dark"
                             data-step_index="2">
                         <?= lang('next') ?>
-                        <i class="fas fa-long-arrow-alt-right ml-2"></i>
+                        <i class="fas fa-chevron-right ml-2"></i>
                     </button>
                 </div>
             </div>
@@ -242,21 +242,21 @@
                     <div class="row frame-content">
                         <div class="col-12 col-md-6">
                             <div class="form-group">
-                                <label for="first-name" class="control-label"><?= lang('first_name') ?> *</label>
+                                <label for="first-name" class="control-label"><?= lang('first_name') ?> <span class="text-danger">*</span></label>
                                 <input type="text" id="first-name" class="required form-control" maxlength="100"/>
                             </div>
                             <div class="form-group">
-                                <label for="last-name" class="control-label"><?= lang('last_name') ?> *</label>
+                                <label for="last-name" class="control-label"><?= lang('last_name') ?> <span class="text-danger">*</span></label>
                                 <input type="text" id="last-name" class="required form-control" maxlength="120"/>
                             </div>
                             <div class="form-group">
-                                <label for="email" class="control-label"><?= lang('email') ?> *</label>
+                                <label for="email" class="control-label"><?= lang('email') ?> <span class="text-danger">*</span></label>
                                 <input type="text" id="email" class="required form-control" maxlength="120"/>
                             </div>
                             <div class="form-group">
                                 <label for="phone-number" class="control-label">
                                     <?= lang('phone_number') ?>
-                                    <?= $require_phone_number === '1' ? '*' : '' ?>
+                                    <?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : '' ?>
                                 </label>
                                 <input type="text" id="phone-number" maxlength="60"
                                        class="<?= $require_phone_number === '1' ? 'required' : '' ?> form-control"/>
@@ -278,10 +278,16 @@
                             </div>
                             <div class="form-group">
                                 <label for="notes" class="control-label"><?= lang('notes') ?></label>
-                                <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
+                                <textarea id="notes" maxlength="500" class="form-control" rows="1"></textarea>
                             </div>
                         </div>
                     </div>
+
+                    <div id="form-message" class="text-danger" hidden>
+                        <small>
+                            <?= lang('fields_are_required') ?>
+                        </small>
+                    </div>
                 </div>
 
                 <?php if ($display_terms_and_conditions): ?>
@@ -312,22 +318,16 @@
                     </div>
                 <?php endif ?>
 
-                <div id="form-message" class="text-danger">
-                    <small>
-                        <?= lang('fields_are_required') ?>
-                    </small>
-                </div>
-
                 <div class="command-buttons">
-                    <button type="button" id="button-back-3" class="btn button-back btn-light"
+                    <button type="button" id="button-back-3" class="btn button-back btn-secondary"
                             data-step_index="3">
-                        <i class="fas fa-long-arrow-alt-left mr-2"></i>
+                        <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
                     </button>
-                    <button type="button" id="button-next-3" class="btn button-next btn-info"
+                    <button type="button" id="button-next-3" class="btn button-next btn-dark"
                             data-step_index="3">
                         <?= lang('next') ?>
-                        <i class="fas fa-long-arrow-alt-right ml-2"></i>
+                        <i class="fas fa-chevron-right ml-2"></i>
                     </button>
                 </div>
             </div>
@@ -357,14 +357,14 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-back-4" class="btn button-back btn-light"
+                    <button type="button" id="button-back-4" class="btn button-back btn-secondary"
                             data-step_index="4">
-                        <i class="fas fa-long-arrow-alt-left mr-2"></i>
+                        <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
                     </button>
                     <form id="book-appointment-form" style="display:inline-block" method="post">
                         <button id="book-appointment-submit" type="button" class="btn btn-success">
-                            <i class="far fa-plus-square mr-2"></i>
+                            <i class="far fa-check-square mr-2"></i>
                             <?= ! $manage_mode ? lang('confirm') : lang('update') ?>
                         </button>
                         <input type="hidden" name="csrfToken"/>
diff --git a/assets/css/error404.css b/assets/css/error404.css
index 520ccc0b..4393da36 100644
--- a/assets/css/error404.css
+++ b/assets/css/error404.css
@@ -3,7 +3,7 @@ body {
     height: 100vh;
     display: table-cell;
     vertical-align: middle;
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #message-frame {
diff --git a/assets/css/forgot_password.css b/assets/css/forgot_password.css
index 438a7e03..03282d95 100644
--- a/assets/css/forgot_password.css
+++ b/assets/css/forgot_password.css
@@ -3,7 +3,7 @@ body {
     height: 100vh;
     display: table-cell;
     vertical-align: middle;
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #forgot-password-frame {
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index 294003d4..7a2f5ffb 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -19,7 +19,7 @@ body {
 }
 
 body {
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #main {
@@ -39,7 +39,7 @@ body {
 #book-appointment-wizard #header {
     overflow: auto;
     height: auto;
-    padding: 15px;
+    padding: 20px 15px;
     background: #429a82;
 }
 
@@ -58,7 +58,7 @@ body {
     display: block;
     overflow: auto;
     margin: 15px auto;
-    width: 186px;
+    width: 190px;
 }
 
 #book-appointment-wizard #book-appointment-form #book-appointment-submit {
@@ -126,7 +126,7 @@ body {
 
 #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
     width: 100%;
-    max-width: 200px;
+    max-width: 150px;
     margin: auto;
 }
 
@@ -139,7 +139,8 @@ body {
     padding: 8px;
     margin-right: 12px;
     margin-top: 6px;
-    border-radius: 8px;
+    border-radius: .25rem;
+    transition: all .3s linear;
 }
 
 #book-appointment-wizard .book-step:last-child {
@@ -151,6 +152,7 @@ body {
     display: block;
     text-align: center;
     color: #0bb98d;
+    transition: all .3s linear;
 }
 
 #book-appointment-wizard .active-step {
@@ -160,20 +162,19 @@ body {
     float: left;
     background: #FFF;
     padding: 7px;
-    margin-right: 12px;
+    margin-right: 13px;
     margin-top: 0;
 }
 
 #book-appointment-wizard .active-step strong {
     color: #429a82;
-    font-size: 20px;
+    font-size: 21px;
 }
 
 #book-appointment-wizard #frame-footer {
     padding: 15px;
     text-align: center;
-    border-top: 1px solid #EEE;
-    background: #FAFAFA;
+    border-top: 1px solid #ebeef1;
 }
 
 #book-appointment-wizard #steps .custom-qtip {
@@ -261,7 +262,7 @@ body {
 #book-appointment-wizard #select-language,
 #book-appointment-wizard .backend-link {
     display: block;
-    width: 150px;
+    min-width: 120px;
     margin: 15px auto;
     padding: 5px;
 }
@@ -279,6 +280,12 @@ body {
         min-height: 100vh;
     }
 
+    #book-appointment-wizard {
+        border-radius: .25rem;
+        overflow: hidden;
+        box-shadow: rgba(45, 62, 80, 0.12) 0 1px 5px 0;
+    }
+
     #book-appointment-wizard #company-name {
         display: inline-block;
         float: left;
@@ -297,7 +304,7 @@ body {
 
     #book-appointment-wizard .wizard-frame .command-buttons {
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
     }
 
     #book-appointment-wizard .captcha-title {
@@ -340,7 +347,7 @@ body {
 
     #book-appointment-wizard .backend-link {
         display: inline-block;
-        width: 100px;
+        min-width: 120px;
         padding: 5px;
         margin: 5px auto;
     }
diff --git a/assets/css/login.css b/assets/css/login.css
index 33da3045..6620c353 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -3,7 +3,7 @@ body {
     height: 100vh;
     display: table-cell;
     vertical-align: middle;
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #login-frame {
diff --git a/assets/css/logout.css b/assets/css/logout.css
index e37dcf31..0b5c9a03 100644
--- a/assets/css/logout.css
+++ b/assets/css/logout.css
@@ -3,7 +3,7 @@ body {
     height: 100vh;
     display: table-cell;
     vertical-align: middle;
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #logout-frame {
diff --git a/assets/css/no_privileges.php.css b/assets/css/no_privileges.php.css
index 6eccdc12..895826ec 100644
--- a/assets/css/no_privileges.php.css
+++ b/assets/css/no_privileges.php.css
@@ -3,7 +3,7 @@ body {
     height: 100vh;
     display: table-cell;
     vertical-align: middle;
-    background-color: #F2F2F2;
+    background-color: #f5f8fa;
 }
 
 #no-priv-frame {
diff --git a/assets/js/frontend_book.js b/assets/js/frontend_book.js
index 9e0d8640..1e4bd02a 100644
--- a/assets/js/frontend_book.js
+++ b/assets/js/frontend_book.js
@@ -536,27 +536,32 @@ window.FrontendBook = window.FrontendBook || {};
         $('<div/>', {
             'html': [
                 $('<h4/>', {
-                    'text': $('#select-service option:selected').text()
+                    'text': EALang.appointment
                 }),
                 $('<p/>', {
                     'html': [
-                        $('<strong/>', {
-                            'class': 'text-info',
-                            'html': [
-                                $('<span/>', {
-                                    'text': $('#select-provider option:selected').text()
-                                }),
-                                $('<br/>'),
-                                $('<span/>', {
-                                    'text': selectedDate + ' ' + $('.selected-hour').text()
-                                }),
-                                $('<br/>'),
-                                $('<span/>', {
-                                    'text': $('#select-timezone option:selected').text()
-                                        + (servicePrice ? ' - ' + servicePrice + ' ' + serviceCurrency : '')
-                                })
-                            ]
-                        })
+                        $('<span/>', {
+                            'text': EALang.service + ': ' + $('#select-service option:selected').text()
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.provider + ': ' + $('#select-provider option:selected').text()
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.start + ': ' + selectedDate + ' ' + $('.selected-hour').text()
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.timezone + ': ' +  $('#select-timezone option:selected').text()
+                        }),
+                        $('<br/>'),
+                        $('<span/>', {
+                            'text': EALang.price + ': ' + servicePrice + ' ' + serviceCurrency,
+                            'prop': {
+                                'hidden': !servicePrice
+                            }
+                        }),
                     ]
                 })
             ]
@@ -577,10 +582,14 @@ window.FrontendBook = window.FrontendBook || {};
         $('<div/>', {
             'html': [
                 $('<h4/>)', {
-                    'text': firstName + ' ' + lastName
+                    'text': EALang.customer
                 }),
                 $('<p/>', {
                     'html': [
+                        $('<span/>', {
+                            'text': EALang.customer + ': ' + firstName + ' ' + lastName
+                        }),
+                        $('<br/>'),
                         $('<span/>', {
                             'text': EALang.phone_number + ': ' + phoneNumber
                         }),
diff --git a/assets/js/frontend_book_api.js b/assets/js/frontend_book_api.js
index d3093f96..09b0537b 100755
--- a/assets/js/frontend_book_api.js
+++ b/assets/js/frontend_book_api.js
@@ -97,7 +97,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
 
                         $('#available-hours').append(
                             $('<button/>', {
-                                'class': 'btn btn-outline-info btn-block shadow-none available-hour',
+                                'class': 'btn btn-outline-secondary btn-block shadow-none available-hour',
                                 'text': availableHourMoment.format(timeFormat)
                             })
                         );