From 783176fd874b425af5baf70d8370ee45370bc01e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 16:10:18 -0300
Subject: [PATCH] Change classNames "material-status" to use only Tailwind

---
 src/components/status.tsx                                     | 1 +
 .../placeholder/components/placeholder-material-status.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index bbdb504e4..fe971da12 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -401,6 +401,7 @@ const Status: React.FC<IStatus> = (props) => {
 
   return (
     <HotKeys handlers={handlers} data-testid='status'>
+      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
       <div
         className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index e3b289d70..4e605da3e 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -5,8 +5,8 @@ import PlaceholderStatus from './placeholder-status';
 /** Fake material status to display while data is loading. */
 const PlaceholderMaterialStatus: React.FC = () => {
   return (
-    <div className='material-status' tabIndex={-1} aria-hidden>
-      <div className='material-status__status' tabIndex={0}>
+    <div className='pb-2.5' tabIndex={-1} aria-hidden>
+      <div className='rounded-[10px] py-[15px] pb-[10px] shadow-[0_0_6px_0_rgba(0,0,0,0.1)]' tabIndex={0}>
         <PlaceholderStatus />
       </div>
     </div>