From e3d929435af193a1144359326ad2f91d7192b3bf Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Thu, 29 Jan 2026 11:53:06 +0700
Subject: [PATCH] refactor(FE): Refine empty-state styling in uniformity
 skeletons

---
 .../skeleton/UniformityBarChartSkeleton.tsx      | 16 ++++++++++------
 .../skeleton/UniformityGaugeChartSkeleton.tsx    | 11 ++++++-----
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 123a456a..91c7c72d 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -66,16 +66,20 @@ const ChartArea = () => {
 const EmptyState = () => {
   return (
     <>
-      <div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'>
-        <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'>
-          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
-            <Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' />
+      <div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
+        <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mb-2.5'>
+          <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
+            <Icon
+              fontSize={26}
+              icon={'heroicons:funnel'}
+              className='text-white'
+            />
           </Button>
         </div>
-        <span className='text-xl font-semibold text-[#18181B80] leading-5'>
+        <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
           No Filters Selected
         </span>
-        <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+        <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
           Please choose filters to narrow down your results and make your search
           easier.
         </span>
diff --git a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
index 17ed7ee9..a72875f5 100644
--- a/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
+++ b/src/components/pages/production/uniformity/skeleton/UniformityGaugeChartSkeleton.tsx
@@ -56,18 +56,19 @@ const UniformityGaugeChartSkeleton: React.FC<
             </PieChart>
           </ResponsiveContainer>
           <div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'>
-            <div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center mt-5'>
-              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white'>
+            <div className='border border-base-content/25 rounded-2xl p-1 flex items-center justify-center mt-5 mb-2.5'>
+              <Button className='rounded-2xl border border-sky-500 bg-primary  text-white p-3 cursor-default'>
                 <Icon
+                  fontSize={26}
                   icon={'heroicons:funnel'}
-                  className='text-4xl text-whitd'
+                  className='text-white'
                 />
               </Button>
             </div>
-            <span className='text-lg font-semibold text-[#18181B80] leading-5 my-3'>
+            <span className='text-xl font-semibold text-base-content/50 leading-5 mb-1'>
               No Filters Selected
             </span>
-            <span className='text-xs font-light text-[#18181B80] leading-4 text-center max-w-xs px-4'>
+            <span className='text-xs font-light text-base-content/50 leading-4 text-center max-w-xs px-4'>
               Please choose filters to narrow down your results and make your
               search easier.
             </span>