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 = () => { const EmptyState = () => {
return ( return (
<> <>
<div className='absolute inset-0 flex flex-col items-center justify-center z-10 gap-2'> <div className='absolute inset-0 flex flex-col items-center justify-center z-10'>
<div className='border border-[#18181B]/25 rounded-2xl p-1 flex items-center justify-center my-2'> <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'> <Button className='rounded-2xl border border-sky-500 bg-primary text-white p-3 cursor-default'>
<Icon icon={'heroicons:funnel'} className='text-4xl text-whitd' /> <Icon
fontSize={26}
icon={'heroicons:funnel'}
className='text-white'
/>
</Button> </Button>
</div> </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 No Filters Selected
</span> </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 Please choose filters to narrow down your results and make your search
easier. easier.
</span> </span>
@@ -56,18 +56,19 @@ const UniformityGaugeChartSkeleton: React.FC<
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
<div className='absolute inset-x-0 top-24 flex flex-col items-center justify-center'> <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'> <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'> <Button className='rounded-2xl border border-sky-500 bg-primary text-white p-3 cursor-default'>
<Icon <Icon
fontSize={26}
icon={'heroicons:funnel'} icon={'heroicons:funnel'}
className='text-4xl text-whitd' className='text-white'
/> />
</Button> </Button>
</div> </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 No Filters Selected
</span> </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 Please choose filters to narrow down your results and make your
search easier. search easier.
</span> </span>