fix: add dark variant for placeholder (#8160)

Author: TusharThakur04

src/components/Placeholder/Placeholder.jsx

@@ -1,34 +1,34 @@
 // Placeholder string
 const placeholderString = () => `
   <div class="placeholder">
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
   </div>
 `;
 
 function PlaceholderComponent() {
   return (
     <div className="placeholder">
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">
         &nbsp;
       </p>
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">
         &nbsp;
       </p>
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">
         &nbsp;
       </p>
     </div>

src/components/Placeholder/__snapshots__/Placeholder.test.jsx.snap

@@ -5,17 +5,17 @@ exports[`PlaceholderComponent renders correctly 1`] = `
   class="placeholder"
 >
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4"
   >
      
   </p>
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]"
   >
      
   </p>
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2"
   >
      
   </p>

src/styles/dark.css

@@ -118,15 +118,6 @@
     @apply bg-[#121212] text-[#9ab3c0];
   }
 
-  .placeholder h2,
-  .placeholder p {
-    @apply bg-[#252525];
-
-    &:after {
-      background: linear-gradient(90deg, #252525, #121212, #252525);
-    }
-  }
-
   .footer-openjsf-logo {
     @apply invert;
   }