Added additional styling for the appointment cancellation and customer data removal modals.

application/views/appointments/book.php

@@ -55,9 +55,14 @@
                     <div class="col-12 col-md-2">
                         <form id="cancel-appointment-form" method="post"
                               action="<?= site_url('appointments/cancel/' . $appointment_data['hash']) ?>">
+
                             <input type="hidden" name="csrfToken" value="<?= $this->security->get_csrf_hash() ?>"/>
+
                             <textarea name="cancel_reason" style="display:none"></textarea>
-                            <button id="cancel-appointment" class="btn btn-light btn-sm"><?= lang('cancel') ?></button>
+
+                            <button id="cancel-appointment" class="btn btn-warning">
+                                <?= lang('cancel') ?>
+                            </button>
                         </form>
                     </div>
                 </div>
@@ -67,7 +72,7 @@
                     </div>
                     <div class="col-12 col-md-2">
                         <button id="delete-personal-information"
-                                class="btn btn-danger btn-sm"><?= lang('delete') ?></button>
+                                class="btn btn-danger"><?= lang('delete') ?></button>
                     </div>
                 </div>
             <?php endif; ?>

assets/css/frontend.css

@@ -369,9 +369,9 @@ body {
    ------------------------------------------------------------------------- */
 
 .booking-header-bar {
-    padding: 10px 0;
+    padding: 15px 0;
     margin: 0;
-    background: #FAFAFA;
+    background: #f6f5ee;
     border-bottom: 1px solid #E2E2E2;
 }
 
@@ -380,10 +380,6 @@ body {
     margin-bottom: 0;
 }
 
-#cancel-appointment-frame {
-    text-align: center;
-}
-
 .ui-dialog .ui-dialog-title {
     font-size: 1.2em;
 }

assets/css/general.css

@@ -27,7 +27,7 @@ body .custom-qtip {
 }
 
 body .ui-widget {
-    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-size: 1.1em;
 }
 
@@ -42,14 +42,14 @@ body .ui-dialog .ui-dialog-titlebar-close {
 }
 
 body .ui-draggable .ui-dialog-titlebar {
-    background: #39c678;
+    background: #429a82;
     color: #FFF;
-    font-size: 1.5em;
+    font-size: 1.2em;
     font-weight: lighter;
     padding: 12px 10px;
-    border: none;
-    border-bottom: 4px solid #c0f1d6;
     margin-bottom: 10px;
+    border: none;
+    border-radius: 0;
 }
 
 body .ui-dialog {
@@ -64,6 +64,10 @@ body .ui-dialog .ui-dialog-buttonpane {
     border: none;
 }
 
+body .ui-dialog .ui-dialog-buttonpane .btn {
+    min-width: 120px;
+}
+
 body .ui-button .ui-icon,
 body .ui-button:hover .ui-icon {
     background-image: url('../ext/jquery-ui/images/ui-icons_222222_256x240.png');
@@ -177,8 +181,8 @@ body .ui-widget-header .ui-priority-primary {
 body .ui-widget input, .ui-widget select,
 body .ui-widget textarea,
 body .ui-widget button {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-size: 12px;
+    font-size: 1rem;
 }
 
 body .ui-datepicker .ui-datepicker-buttonpane button {

assets/js/frontend_book.js

@@ -368,46 +368,54 @@ window.FrontendBook = window.FrontendBook || {};
              */
             $('#cancel-appointment').click(function (event) {
                 var buttons = [
+                    {
+                        text: EALang.cancel,
+                        click: function () {
+                            $('#message_box').dialog('close');
+                        }
+                    },
                     {
                         text: 'OK',
                         click: function () {
                             if ($('#cancel-reason').val() === '') {
-                                $('#cancel-reason').css('border', '2px solid red');
+                                $('#cancel-reason').css('border', '2px solid #DC3545');
                                 return;
                             }
                             $('#cancel-appointment-form textarea').val($('#cancel-reason').val());
                             $('#cancel-appointment-form').submit();
                         }
-                    },
-                    {
-                        text: EALang.cancel,
-                        click: function () {
-                            $('#message_box').dialog('close');
-                        }
                     }
                 ];
 
                 GeneralFunctions.displayMessageBox(EALang.cancel_appointment_title,
                     EALang.write_appointment_removal_reason, buttons);
 
-                $('#message_box').append('<textarea id="cancel-reason" rows="3"></textarea>');
+                $('<textarea/>', {
-                $('#cancel-reason').css('width', '100%');
+                    'class': 'form-control',
+                    'id': 'cancel-reason',
+                    'rows': '3',
+                    'css': {
+                        'width': '100%'
+                    }
+                })
+                    .appendTo('#message_box');
+
                 return false;
             });
 
             $('#delete-personal-information').on('click', function () {
                 var buttons = [
-                    {
-                        text: EALang.delete,
-                        click: function () {
-                            FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
-                        }
-                    },
                     {
                         text: EALang.cancel,
                         click: function () {
                             $('#message_box').dialog('close');
                         }
+                    },
+                    {
+                        text: EALang.delete,
+                        click: function () {
+                            FrontendBookApi.deletePersonalInformation(GlobalVariables.customerToken);
+                        }
                     }
                 ];