From d0020235ebceabc2335654d731a5f9516c4d3f9a Mon Sep 17 00:00:00 2001
From: shanmukhdutt <ksssaidutt@gmail.com>
Date: Fri, 5 Jan 2024 16:59:04 +0530
Subject: [PATCH] Improved empty-state

---
 src/theme/variables.css     | 15 +++++++++++++++
 src/views/TimezoneModal.vue | 17 +++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/theme/variables.css b/src/theme/variables.css
index 64a2f312..16151432 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -265,3 +265,18 @@ http://ionicframework.com/docs/theming/ */
     display: none;
   }
 }
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+.empty-state>img{
+  object-fit: contain;
+}
+.empty-state>p {
+  text-align: center;
+}
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index 495e83f1..51303e77 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.vue
@@ -13,17 +13,14 @@
     </ion-toolbar>
   </ion-header>
 
-  <!-- Empty state -->
-  <ion-content class="ion-text-center">
+  
+  <ion-content class="ion-padding">
+    <!-- Empty state -->
     <div class="empty-state" v-if="filteredTimeZones.length === 0">
-        <ion-row class="ion-align-items-center ion-justify-content-center" style="height: 50vh;">
-         <ion-col size="auto">
-            <ion-spinner name="crescent" ></ion-spinner>
-         </ion-col>
-         <ion-col size="auto">
-            <p>{{ $t("Fetching time zones")}}</p>
-         </ion-col>
-      </ion-row>  
+      <ion-item lines="none">
+        <ion-spinner name="crescent" ></ion-spinner>
+        <p>{{ $t("Fetching time zones")}}</p>
+      </ion-item>      
     </div>   
 
     <!-- Timezones -->