From 36ff857c4d5e6866028dd3e6a6998377a95c963e Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Wed, 3 May 2023 07:51:53 +0200
Subject: [PATCH] Update the timezone info styling in the appointments and
 unavailability modals

---
 .../views/components/appointments_modal.php   | 20 ++++++----
 .../components/unavailabilities_modal.php     | 37 +++++++++++--------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/application/views/components/appointments_modal.php b/application/views/components/appointments_modal.php
index ea9844da..f39a2860 100644
--- a/application/views/components/appointments_modal.php
+++ b/application/views/components/appointments_modal.php
@@ -167,16 +167,20 @@
                                     <div
                                         class="border rounded d-flex justify-content-between align-items-center bg-light timezone-info">
                                         <div class="border-end w-50 p-1 text-center">
-                                            <?= lang('provider') ?>:
-                                            <span class="provider-timezone">
-                                                -
-                                            </span>
+                                            <small>
+                                                <?= lang('provider') ?>:
+                                                <span class="provider-timezone">
+                                                    -
+                                                </span>
+                                            </small>
                                         </div>
                                         <div class="w-50 p-1 text-center">
-                                            <?= lang('current_user') ?>:
-                                            <span>
-                                                <?= $timezones[session('timezone', 'UTC')] ?>
-                                            </span>
+                                            <small>
+                                                <?= lang('current_user') ?>:
+                                                <span>
+                                                    <?= $timezones[session('timezone', 'UTC')] ?>
+                                                </span>
+                                            </small>
                                         </div>
                                     </div>
                                 </div>
diff --git a/application/views/components/unavailabilities_modal.php b/application/views/components/unavailabilities_modal.php
index d3c3eed9..95890031 100644
--- a/application/views/components/unavailabilities_modal.php
+++ b/application/views/components/unavailabilities_modal.php
@@ -45,22 +45,29 @@
                         </div>
 
                         <div class="mb-3">
-                            <label class="form-label"><?= lang('timezone') ?></label>
+                            <label class="form-label">
+                                <?= lang('timezone') ?>
+                            </label>
 
-                            <ul>
-                                <li>
-                                    <?= lang('provider') ?>:
-                                    <span class="provider-timezone">
-                                        -
-                                    </span>
-                                </li>
-                                <li>
-                                    <?= lang('current_user') ?>:
-                                    <span>
-                                        <?= $timezones[$timezone] ?>
-                                    </span>
-                                </li>
-                            </ul>
+                            <div
+                                class="border rounded d-flex justify-content-between align-items-center bg-light timezone-info">
+                                <div class="border-end w-50 p-1 text-center">
+                                    <small>
+                                        <?= lang('provider') ?>:
+                                        <span class="provider-timezone">
+                                                    -
+                                                </span>
+                                    </small>
+                                </div>
+                                <div class="w-50 p-1 text-center">
+                                    <small>
+                                        <?= lang('current_user') ?>:
+                                        <span>
+                                                    <?= $timezones[session('timezone', 'UTC')] ?>
+                                                </span>
+                                    </small>
+                                </div>
+                            </div>
                         </div>
 
                         <div class="mb-3">