From a5613980c0d29fe33376e97fbcb9370774bea0dd Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 30 Jan 2026 14:13:38 +0700
Subject: [PATCH] refactor(FE): Update UniformityGaugeChart styles

---
 .../uniformity/chart/UniformityGaugeChart.tsx | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
index 54f8e4ec..8249e1d5 100644
--- a/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx
@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-          <div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
-            <span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
+          <div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
+            <span className='text-2xl font-medium text-base-content mb-4 leading-8'>
               {value}%
             </span>
-            <div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
-              <span className='text-sm font-medium text-gray-700 mb-32'>
+            <div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
+              <span className='text-lg font-medium text-base-content leading-6'>
                 {label}
               </span>
             </div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('prev')}
           disabled={!hasPrevWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Previous week'
         >
           <Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <Card
           variant='bordered'
           className={{
-            wrapper: 'max-w-xs',
+            wrapper: 'max-w-40 rounded-lg',
+            body: 'p-3',
           }}
         >
           <section className='flex items-center justify-center gap-4'>
             <div className='grid grid-cols-1 min-w-0 text-center'>
-              <div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
-                <span className='text-[#0069E0] font-semibold truncate'>
+              <div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
+                <span className='text-primary font-semibold truncate'>
                   {week}
                 </span>
               </div>
-              <div className='text-xl font-bold text-[#18181B80]'>
-                <span className='text-[#0069E0] break-all'>
+              <div className='text-xl font-bold text-base-content/50'>
+                <span className='text-primary break-all'>
                   {formatNumber(currentValue ?? 0)}
                 </span>
-                <span className='mx-1 text-gray-400 text-base'>From</span>
+                <span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
+                  From
+                </span>
                 <span className='break-all'>
                   {formatNumber(totalValue ?? 0)}
                 </span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('next')}
           disabled={!hasNextWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Next week'
         >
           <Icon icon='heroicons:chevron-right' width={20} height={20} />