From e3f228323ba0a99feafbc7ab39f44e60b60c33fb Mon Sep 17 00:00:00 2001
From: UwicyezaG <icyezagrace003@gmail.com>
Date: Tue, 22 Oct 2024 23:53:18 +0200
Subject: [PATCH] Improve the dark mode skeleton to match the dark design

---
 src/Skeletons/InvitationCardSkeleton.tsx | 37 ++++++++++++++++++++----
 src/Skeletons/SkeletonTable.tsx          | 27 ++++++++++++-----
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/Skeletons/InvitationCardSkeleton.tsx b/src/Skeletons/InvitationCardSkeleton.tsx
index 94b1d8269..01752f6f0 100644
--- a/src/Skeletons/InvitationCardSkeleton.tsx
+++ b/src/Skeletons/InvitationCardSkeleton.tsx
@@ -4,17 +4,42 @@ import 'react-loading-skeleton/dist/skeleton.css';
 
 function InvitationCardSkeleton() {
   return (
-    <div className="bg-white rounded-md shadow-sm p-4 w-[100%] md:w-[30%]">
-      <div className="flex flex-row items-center gap-4 mb-3">
-        <Skeleton circle width={50} height={50} />
+    <div className='bg-white dark:bg-[#0A1729] rounded-md shadow-sm p-4 w-[100%] md:w-[30%]'>
+      <div className='flex flex-row items-center gap-4 mb-3'>
+        <Skeleton
+          circle
+          width={50}
+          height={50}
+          baseColor='var(--skeleton-base-color, #374151)' 
+          highlightColor='var(--skeleton-highlight-color, #333333)' 
+          className="dark:baseColor-[#3F4A4F] dark:highlightColor-[#5B636B]" 
+        />
         <div>
-          <Skeleton width={100} height={20} />
+          <Skeleton
+            width={100}
+            height={20}
+            baseColor='var(--skeleton-base-color, #374151)'
+            highlightColor='var(--skeleton-highlight-color, #333333)'
+            className="dark:baseColor-[#3F4A4F] dark:highlightColor-[#5B636B]"
+          />
         </div>
       </div>
 
-      <Skeleton width={70} height={30} />
+      <Skeleton
+        width={70}
+        height={30}
+        baseColor='var(--skeleton-base-color, #374151)'
+        highlightColor='var(--skeleton-highlight-color, #333333)'
+        className="dark:baseColor-[#3F4A4F] dark:highlightColor-[#5B636B]"
+      />
 
-      <Skeleton width={50} height={20} />
+      <Skeleton
+        width={50}
+        height={20}
+        baseColor='var(--skeleton-base-color, #374151)'
+        highlightColor='var(--skeleton-highlight-color, #333333)'
+        className="dark:baseColor-[#3F4A4F] dark:highlightColor-[#5B636B]"
+      />
     </div>
   );
 }
diff --git a/src/Skeletons/SkeletonTable.tsx b/src/Skeletons/SkeletonTable.tsx
index d1b99b984..3bb237570 100644
--- a/src/Skeletons/SkeletonTable.tsx
+++ b/src/Skeletons/SkeletonTable.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 interface SkeletonTableProps {
@@ -11,18 +10,30 @@ function SkeletonTable({ columns }: SkeletonTableProps) {
       <thead>
         <tr>
           {columns.map((column: any, index: React.Key | null | undefined) => (
-            <th key={column.id || column.name} className="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-              <div className="h-4 bg-gray-300 rounded w-3/4" aria-label="Loading skeleton" />
+            <th
+              key={column.id || column.name}
+              className="px-6 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:bg-[#0A1729] dark:text-gray-400"
+            >
+              <div
+                className="h-4 bg-gray-300 rounded w-3/4 dark:bg-gray-700"
+                aria-label="Loading skeleton"
+              />
             </th>
           ))}
         </tr>
       </thead>
       <tbody>
-        {[...Array(5)].map((_, rowIndex:any) => (
+        {[...Array(5)].map((_, rowIndex: any) => (
           <tr key={rowIndex.id || rowIndex.name}>
-            {columns.map((_, colIndex:any) => (
-              <td key={colIndex.id || colIndex.name} className="px-6 py-4 border-b border-gray-200 bg-white text-sm">
-                <div className="h-4 bg-gray-300 rounded w-full" aria-label="Loading skeleton" />
+            {columns.map((_, colIndex: any) => (
+              <td
+                key={colIndex.id || colIndex.name}
+                className="px-6 py-4 border-b border-gray-200 bg-white text-sm dark:bg-[#0A1731] dark:border-gray-400"
+              >
+                <div
+                  className="h-4 bg-gray-300 rounded w-full dark:bg-gray-700"
+                  aria-label="Loading skeleton"
+                />
               </td>
             ))}
           </tr>
@@ -32,4 +43,4 @@ function SkeletonTable({ columns }: SkeletonTableProps) {
   );
 }
 
-export default SkeletonTable;
\ No newline at end of file
+export default SkeletonTable;