From b6cc72cd06ae898c07df994e129a602f0593c54f Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Wed, 14 Sep 2022 10:14:19 +0200
Subject: [PATCH] Styling adjustments to the settings nav component and the
 settings pages

---
 application/views/components/settings_nav.php | 30 ++++++++--------
 application/views/pages/booking_settings.php  | 13 +++----
 application/views/pages/business_settings.php | 36 ++++++++++---------
 application/views/pages/general_settings.php  | 12 ++++---
 application/views/pages/integrations.php      |  6 ++--
 application/views/pages/legal_settings.php    | 20 ++++++-----
 6 files changed, 62 insertions(+), 55 deletions(-)

diff --git a/application/views/components/settings_nav.php b/application/views/components/settings_nav.php
index 533ae9c2..88520627 100755
--- a/application/views/components/settings_nav.php
+++ b/application/views/components/settings_nav.php
@@ -1,34 +1,34 @@
-<h4 class="mt-4 text-black-50 pb-2 border-bottom mb-2">
+<h4 class=" text-black-50 py-3 mb-3 border-bottom fw-light">
     <?= lang('settings') ?>
 </h4>
 
 <ul id="settings-nav" class="nav flex-column">
-    <li class="nav-item mb-2">
-        <a class="nav-link" href="<?= site_url('general_settings') ?>">
+    <li class="nav-item mb-3">
+        <a class="nav-link px-0 py-2" href="<?= site_url('general_settings') ?>">
             <?= lang('general_settings') ?>
         </a>
     </li>
-    
-    <li class="nav-item mb-2">
-        <a class="nav-link" href="<?= site_url('booking_settings') ?>">
+
+    <li class="nav-item mb-3">
+        <a class="nav-link px-0 py-2" href="<?= site_url('booking_settings') ?>">
             <?= lang('booking_settings') ?>
         </a>
     </li>
-    
-    <li class="nav-item mb-2">
-        <a class="nav-link" href="<?= site_url('business_settings') ?>">
+
+    <li class="nav-item mb-3">
+        <a class="nav-link px-0 py-2" href="<?= site_url('business_settings') ?>">
             <?= lang('business_logic') ?>
         </a>
     </li>
-    
-    <li class="nav-item mb-2">
-        <a class="nav-link" href="<?= site_url('legal_settings') ?>">
+
+    <li class="nav-item mb-3">
+        <a class="nav-link px-0 py-2" href="<?= site_url('legal_settings') ?>">
             <?= lang('legal_contents') ?>
         </a>
     </li>
-    
-    <li class="nav-item mb-2">
-        <a class="nav-link" href="<?= site_url('integrations') ?>">
+
+    <li class="nav-item mb-3">
+        <a class="nav-link px-0 py-2" href="<?= site_url('integrations') ?>">
             <?= lang('integrations') ?>
         </a>
     </li>
diff --git a/application/views/pages/booking_settings.php b/application/views/pages/booking_settings.php
index 20bf60e8..f39d8d76 100755
--- a/application/views/pages/booking_settings.php
+++ b/application/views/pages/booking_settings.php
@@ -11,8 +11,9 @@
             <div class="col-sm-6">
                 <form>
                     <fieldset>
-                        <legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
-                            <?= lang('booking_settings') ?>
+                        <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
+                          
+                          
 
                             <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
                                 <button type="button" id="save-settings" class="btn btn-primary">
@@ -20,9 +21,9 @@
                                     <?= lang('save') ?>
                                 </button>
                             <?php endif ?>
-                        </legend>
-
-                        <div class="row mb-3 fields-row">
+                        </div>
+                        
+                        <div class="row mb-5 fields-row">
                             <div class="col-lg-6">
                                 <div class="form-group mb-5">
                                     <label for="first-name" class="form-label">
@@ -329,7 +330,7 @@
                                     </div>
 
 
-                                    <div class="mb-3">
+                                    <div>
                                         <div class="form-check form-switch">
                                             <input class="form-check-input" type="checkbox" id="disable-booking"
                                                    data-field="disable_booking">
diff --git a/application/views/pages/business_settings.php b/application/views/pages/business_settings.php
index 53cac98a..1d788479 100755
--- a/application/views/pages/business_settings.php
+++ b/application/views/pages/business_settings.php
@@ -11,8 +11,10 @@
             <div class="col-sm-6">
                 <form>
                     <fieldset>
-                        <legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
-                            <?= lang('business_logic') ?>
+                        <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
+                            <h4 class="text-black-50 mb-0 fw-light">
+                                <?= lang('business_logic') ?>
+                            </h4>
 
                             <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
                                 <button type="button" id="save-settings" class="btn btn-primary">
@@ -20,14 +22,14 @@
                                     <?= lang('save') ?>
                                 </button>
                             <?php endif ?>
-                        </legend>
-
-                        <h4><?= lang('working_plan') ?></h4>
-
-                        <div class="form-text text-muted mb-4">
-                            <?= lang('edit_working_plan_hint') ?>
                         </div>
 
+                        <h5 class="text-black-50 mb-3 fw-light"><?= lang('working_plan') ?></h5>
+
+                        <p class="form-text text-muted mb-4">
+                            <?= lang('edit_working_plan_hint') ?>
+                        </p>
+
                         <table class="working-plan table table-striped">
                             <thead>
                             <tr>
@@ -39,18 +41,18 @@
                             <tbody><!-- Dynamic Content --></tbody>
                         </table>
 
-                        <div class="text-end">
+                        <div class="text-end mb-5">
                             <button class="btn btn-outline-secondary" id="apply-global-working-plan" type="button">
                                 <i class="fas fa-check"></i>
                                 <?= lang('apply_to_all_providers') ?>
                             </button>
                         </div>
 
-                        <h4><?= lang('breaks') ?></h4>
+                        <h5 class="text-black-50 mb-3 fw-light"><?= lang('breaks') ?></h5>
 
-                        <span class="form-text text-muted">
+                        <p class="form-text text-muted">
                             <?= lang('edit_breaks_hint') ?>
-                        </span>
+                        </p>
 
                         <div class="mt-2">
                             <button type="button" class="add-break btn btn-primary">
@@ -61,7 +63,7 @@
 
                         <br>
 
-                        <table class="breaks table table-striped mb-4">
+                        <table class="breaks table table-striped mb-5">
                             <thead>
                             <tr>
                                 <th><?= lang('day') ?></th>
@@ -73,9 +75,9 @@
                             <tbody><!-- Dynamic Content --></tbody>
                         </table>
 
-                        <h4><?= lang('allow_rescheduling_cancellation_before') ?></h4>
+                        <h5 class="text-black-50 mb-3 fw-light"><?= lang('allow_rescheduling_cancellation_before') ?></h5>
 
-                        <div class="mb-3">
+                        <div class="mb-5">
                             <label for="book-advance-timeout" class="form-label">
                                 <?= lang('timeout_minutes') ?>
                             </label>
@@ -88,9 +90,9 @@
                             </div>
                         </div>
 
-                        <h4><?= lang('future_booking_limit') ?></h4>
+                        <h5 class="text-black-50 mb-3 fw-light"><?= lang('future_booking_limit') ?></h5>
 
-                        <div class="mb-3">
+                        <div class="mb-5">
                             <label for="future-booking-limit" class="form-label">
                                 <?= lang('limit_days') ?>
                             </label>
diff --git a/application/views/pages/general_settings.php b/application/views/pages/general_settings.php
index 8358c6f2..e536c580 100755
--- a/application/views/pages/general_settings.php
+++ b/application/views/pages/general_settings.php
@@ -11,8 +11,10 @@
             <div class="col-sm-6">
                 <form>
                     <fieldset>
-                        <legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
-                            <?= lang('general_settings') ?>
+                        <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
+                            <h4 class="text-black-50 mb-0 fw-light">
+                                <?= lang('general_settings') ?>
+                            </h4>
 
                             <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
                                 <button type="button" id="save-settings" class="btn btn-primary">
@@ -20,11 +22,11 @@
                                     <?= lang('save') ?>
                                 </button>
                             <?php endif ?>
-                        </legend>
+                        </div>
 
                         <div class="row mb-5">
                             <div class="col-12">
-                                <h4><?= lang('company') ?></h4>
+                                <h5 class="text-black-50 mb-3 fw-light"><?= lang('company') ?></h5>
 
                                 <div class="mb-3">
                                     <label class="form-label" for="company-name">
@@ -139,7 +141,7 @@
 
                         <div class="row mb-5">
                             <div class="col-12">
-                                <h4><?= lang('localization') ?></h4>
+                                <h5 class="text-black-50 mb-3 fw-light"><?= lang('localization') ?></h5>
 
                                 <div class="mb-3">
                                     <label class="form-label" for="date-format">
diff --git a/application/views/pages/integrations.php b/application/views/pages/integrations.php
index 695ab2dc..efe79109 100755
--- a/application/views/pages/integrations.php
+++ b/application/views/pages/integrations.php
@@ -8,11 +8,11 @@
             <?php component('settings_nav') ?>
         </div>
         <div id="integrations" class="col-sm-6">
-            <h3 class="text-muted border-bottom py-2">
+            <h4 class="text-black-50 border-bottom py-3 mb-3 fw-light">
                 <?= lang('integrations') ?>
-            </h3>
+            </h4>
 
-            <p class="mb-5">
+            <p class="form-text text-muted mb-4">
                 <?= lang('integrations_info') ?>
             </p>
 
diff --git a/application/views/pages/legal_settings.php b/application/views/pages/legal_settings.php
index 8206419c..9d7002df 100755
--- a/application/views/pages/legal_settings.php
+++ b/application/views/pages/legal_settings.php
@@ -11,20 +11,22 @@
             <div class="col-sm-6">
                 <form>
                     <fieldset>
-                        <legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
-                            <?= lang('legal_contents') ?>
-
+                        <div class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
+                            <h4 class="text-black-50 mb-0 fw-light">
+                                <?= lang('legal_contents') ?>
+                            </h4>
+                            
                             <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
                                 <button type="button" id="save-settings" class="btn btn-primary">
                                     <i class="fas fa-check-square me-2"></i>
                                     <?= lang('save') ?>
                                 </button>
                             <?php endif ?>
-                        </legend>
+                        </div>
 
                         <div class="row">
                             <div class="col-12">
-                                <h4><?= lang('cookie_notice') ?></h4>
+                                <h5 class="text-black-50 mb-3 fw-light"><?= lang('cookie_notice') ?></h5>
 
                                 <div class="form-check form-switch mb-3">
                                     <input class="form-check-input display-switch" type="checkbox"
@@ -38,8 +40,8 @@
                                     <label class="form-label" for="cookie-notice-content"><?= lang('cookie_notice_content') ?></label>
                                     <textarea id="cookie-notice-content" cols="30" rows="10" class="mb-3"></textarea>
                                 </div>
-
-                                <h4><?= lang('terms_and_conditions') ?></h4>
+                                
+                                <h5 class="text-black-50 mb-3 fw-light"><?= lang('terms_and_conditions') ?></h5>
 
                                 <div class="form-check form-switch mb-3">
                                     <input class="form-check-input display-switch" type="checkbox"
@@ -55,8 +57,8 @@
                                               class="mb-3"></textarea>
                                 </div>
 
-                                <h4><?= lang('privacy_policy') ?></h4>
-
+                                <h5 class="text-black-50 mb-3 fw-light"><?= lang('privacy_policy') ?></h5>
+                                
                                 <div class="form-check form-switch mb-3">
                                     <input class="form-check-input display-switch" type="checkbox"
                                            id="display-privacy-policy">