From 01c16ad1502c7946751b951c37431fb7c65ef67c Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Sun, 23 Mar 2025 13:53:28 +0530
Subject: [PATCH] fix: calender setting skeleton (#20317)

---
 .../tabs/advanced/EventAdvancedTab.tsx         | 16 ++++++++--------
 .../SelectedCalendarsSettingsWebWrapper.tsx    | 18 +++++++++---------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
index c1bf9a3935..aad1d6c302 100644
--- a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
+++ b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
@@ -278,19 +278,19 @@ const destinationCalendarComponents = {
       <div className="border-subtle space-y-6 rounded-lg border p-6">
         <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="flex w-full flex-col">
-            <div className="h-4 w-32 animate-pulse rounded-md bg-gray-200" />
-            <div className="mt-2 h-10 w-full animate-pulse rounded-md bg-gray-200" />
-            <div className="mt-2 h-4 w-48 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
+            <div className="bg-emphasis mt-2 h-10 w-full animate-pulse rounded-md" />
+            <div className="bg-emphasis mt-2 h-4 w-48 animate-pulse rounded-md" />
           </div>
           <div className="w-full">
-            <div className="h-4 w-32 animate-pulse rounded-md bg-gray-200" />
-            <div className="mt-2 h-10 w-full animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
+            <div className="bg-emphasis mt-2 h-10 w-full animate-pulse rounded-md" />
           </div>
         </div>
         <div className="space-y-2">
-          <div className="h-6 w-64 animate-pulse rounded-md bg-gray-200" />
-          <div className="h-10 w-full animate-pulse rounded-md bg-gray-200" />
-          <div className="h-4 w-48 animate-pulse rounded-md bg-gray-200" />
+          <div className="bg-emphasis h-6 w-64 animate-pulse rounded-md" />
+          <div className="bg-emphasis h-10 w-full animate-pulse rounded-md" />
+          <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
         </div>
       </div>
     );
diff --git a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
index 8a57e61986..d17629b9af 100644
--- a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
+++ b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
@@ -199,28 +199,28 @@ export const SelectedCalendarsSettingsWebWrapperSkeleton = () => {
       <div className="border-subtle border-b p-6">
         <div className="flex items-center justify-between">
           <div>
-            <div className="h-4 w-32 animate-pulse rounded-md bg-gray-200" />
-            <div className="mt-2 h-4 w-48 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
+            <div className="bg-emphasis mt-2 h-4 w-48 animate-pulse rounded-md" />
           </div>
-          <div className="h-8 w-32 animate-pulse rounded-md bg-gray-200" />
+          <div className="bg-emphasis h-8 w-32 animate-pulse rounded-md" />
         </div>
       </div>
       <div className="p-6 pt-2">
         <div className="border-subtle mt-4 rounded-lg border p-4">
           <div className="flex items-center">
-            <div className="h-10 w-10 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis h-10 w-10 animate-pulse rounded-md" />
             <div className="ml-4 space-y-2">
-              <div className="h-4 w-32 animate-pulse rounded-md bg-gray-200" />
-              <div className="h-4 w-48 animate-pulse rounded-md bg-gray-200" />
+              <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
+              <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
             </div>
           </div>
           <div className="border-subtle mt-4 space-y-4 border-t pt-4">
-            <div className="h-4 w-64 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis h-4 w-64 animate-pulse rounded-md" />
             <div className="space-y-2">
               {[1, 2, 3].map((i) => (
                 <div key={i} className="flex items-center justify-between">
-                  <div className="h-4 w-48 animate-pulse rounded-md bg-gray-200" />
-                  <div className="h-6 w-10 animate-pulse rounded-md bg-gray-200" />
+                  <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
+                  <div className="bg-emphasis h-6 w-10 animate-pulse rounded-md" />
                 </div>
               ))}
             </div>