feat: Add skeletons for dark mode (fixes #64)

- Remove unnecessary classes
krishnaacharyaa · Dec 1, 2023 · 29768d1 · 29768d1
1 parent cd40261
commit 29768d1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 40 deletions.
diff --git a/frontend/src/components/skeletons/featured-post-card-skeleton.tsx b/frontend/src/components/skeletons/featured-post-card-skeleton.tsx
@@ -2,26 +2,33 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const FeaturedPostCardSkeleton = () => {
   return (
-    <div className="flex h-48 gap-4 rounded-lg bg-slate-50">
+    <div className="bg-light flex rounded-lg dark:bg-dark-card">
+      {/* for image */}
       <div className="w-1/3">
-        {/* for image */}
-        <Skeleton className="h-full w-full rounded-lg bg-slate-200" />
+        <Skeleton className="h-full w-full rounded-lg bg-slate-200 dark:bg-slate-700" />
       </div>
-      <div className="flex h-full w-2/3 flex-col gap-2">
-        {/* for title */}
-        <Skeleton className="h-6 w-full bg-slate-200 text-xl" />
-        <Skeleton className="h-6 w-2/3 bg-slate-200 text-xl" />
-        <div className="flex flex-wrap gap-2">
-          {/* for categories */}
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-        </div>
-        {/* for description */}
-        <Skeleton className="line-clamp-2 h-12 w-full bg-slate-200" />
-        <div className="mb-1 flex flex-1 items-end">
-          {/* for author and time */}
-          <Skeleton className="h-5 w-1/3 bg-slate-200" />
+      <div className="flex h-48 w-2/3 gap-4 rounded-lg p-3">
+        <div className="flex w-full flex-col gap-3">
+          {/* for title */}
+          <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-6 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <div className="flex flex-wrap gap-2">
+            {/* for categories */}
+            {Array(3)
+              .fill(0)
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+                />
+              ))}
+          </div>
+          {/* for description */}
+          <Skeleton className="line-clamp-2 h-12 w-10/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mb-1 flex flex-1 items-end">
+            {/* for author and time */}
+            <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/skeletons/latest-post-card-skeleton.tsx b/frontend/src/components/skeletons/latest-post-card-skeleton.tsx
@@ -2,22 +2,24 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const LatestPostCardSkeleton = () => {
   return (
-    <div className="rounded-lg bg-slate-50 py-2 shadow-sm">
+    <div className="bg-light rounded-lg p-3 dark:bg-dark-card">
       <div className="flex">
         <div className="mb-2 flex flex-1 flex-wrap gap-2">
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-          <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          {Array(3)
+            .fill(0)
+            .map((_, index) => (
+              <Skeleton
+                key={index}
+                className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700"
+              />
+            ))}
         </div>
-        <Skeleton className="h-4 w-4 bg-slate-200" style={{ height: 12, width: 12 }} />
       </div>
-      <div className="mb-2 line-clamp-2 text-xl font-semibold">
-        <Skeleton className="h-6 w-full bg-slate-200" />
-        <Skeleton className="mt-2 h-6 w-2/3 bg-slate-200" />
-      </div>
-      <div className="flex text-xs text-slate-500">
-        <Skeleton className="h-4 w-1/3 bg-slate-200" />
+      <div className="mb-2">
+        <Skeleton className="h-6 w-11/12 bg-slate-200 dark:bg-slate-700" />
+        <Skeleton className="mt-2 h-4 w-2/3 bg-slate-200 dark:bg-slate-700" />
       </div>
+      <Skeleton className="h-3 w-1/3 bg-slate-200 dark:bg-slate-700" />
     </div>
   );
 };
diff --git a/frontend/src/components/skeletons/post-card-skeleton.tsx b/frontend/src/components/skeletons/post-card-skeleton.tsx
@@ -2,18 +2,16 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export const PostCardSkeleton = () => {
   return (
-    <div className="w-full p-4 md:w-1/2 lg:w-1/3 xl:w-1/4">
-      <div className="rounded-lg bg-slate-50 shadow-md">
-        <Skeleton className="h-48 w-full rounded-lg" />
+    <div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+      <div className="bg-light m-4 rounded-lg shadow-md dark:bg-dark-card">
+        <Skeleton className="h-48 w-full rounded-lg dark:bg-slate-700" />
         <div className="p-4">
-          <div className="mb-2 flex text-xs text-slate-500">
-            <Skeleton className="mr-2 h-4 w-2/3 bg-slate-200" />
-          </div>
-          <Skeleton className="mb-2 h-6 w-4/5 bg-slate-200" />
-          <Skeleton className="line-clamp-2 h-14 w-full bg-slate-200 text-slate-600" />
-          <div className="mt-4 flex flex-wrap gap-2">
-            <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
-            <Skeleton className="h-6 w-16 rounded-3xl bg-slate-200" />
+          <Skeleton className="mb-2 h-3 w-2/3 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="mb-2 h-6 w-4/5 bg-slate-200 dark:bg-slate-700" />
+          <Skeleton className="h-16 w-11/12 bg-slate-200 dark:bg-slate-700" />
+          <div className="mt-2 flex flex-wrap gap-2">
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
+            <Skeleton className="h-6 w-16 rounded-full bg-slate-200 dark:bg-slate-700" />
           </div>
         </div>
       </div>