refactor(FE): Refine empty-state styling in uniformity skeletons

This commit is contained in:
rstubryan
2026-01-29 11:53:06 +07:00
parent ef3797e724
commit e3d929435a
2 changed files with 16 additions and 11 deletions
@@ -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>
@@ -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>