Improve the dark mode skeleton to match the dark design

atlp-rwanda · Oct 23, 2024 · e6d3b16 · e6d3b16
1 parent b7cb194
commit e6d3b16
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git 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, #E0E0E0)' 
+          highlightColor='var(--skeleton-highlight-color, #F0F0F0)' 
+          className="dark:baseColor-[#4B5563] dark:highlightColor-[#6B7280]" 
+        />
         <div>
-          <Skeleton width={100} height={20} />
+          <Skeleton
+            width={100}
+            height={20}
+            baseColor='var(--skeleton-base-color, #E0E0E0)'
+            highlightColor='var(--skeleton-highlight-color, #F0F0F0)'
+            className="dark:baseColor-[#4B5563] dark:highlightColor-[#6B7280]"
+          />
         </div>
       </div>
 
-      <Skeleton width={70} height={30} />
+      <Skeleton
+        width={70}
+        height={30}
+        baseColor='var(--skeleton-base-color, #E0E0E0)'
+        highlightColor='var(--skeleton-highlight-color, #F0F0F0)'
+        className="dark:baseColor-[#4B5563] dark:highlightColor-[#6B7280]"
+      />
 
-      <Skeleton width={50} height={20} />
+      <Skeleton
+        width={50}
+        height={20}
+        baseColor='var(--skeleton-base-color, #E0E0E0)'
+        highlightColor='var(--skeleton-highlight-color, #F0F0F0)'
+        className="dark:baseColor-[#4B5563] dark:highlightColor-[#6B7280]"
+      />
     </div>
   );
 }

diff --git 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;
+export default SkeletonTable;