chore: adjust styling in Dashboard related components

This commit is contained in:
ValdiANS
2026-01-29 10:23:58 +07:00
parent 9cff99cba9
commit dce913815e
2 changed files with 13 additions and 17 deletions
@@ -441,10 +441,6 @@ const DashboardProduction = () => {
value={formik.values.startDate} value={formik.values.startDate}
errorMessage={formik.errors.startDate} errorMessage={formik.errors.startDate}
onChange={formik.handleChange} onChange={formik.handleChange}
className={{
inputWrapper:
'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
}}
isError={ isError={
Boolean(formik.errors.startDate) && Boolean(formik.errors.startDate) &&
Boolean(formik.touched.startDate) Boolean(formik.touched.startDate)
@@ -568,7 +564,6 @@ const DashboardProduction = () => {
Boolean(formik.touched.location) Boolean(formik.touched.location)
} }
className={{ className={{
label: 'mb-[8px] text-xs font-semibold',
select: 'rounded-[8px] text-sm border-[#18181B]/10', select: 'rounded-[8px] text-sm border-[#18181B]/10',
}} }}
/> />
@@ -742,9 +737,11 @@ const DashboardProduction = () => {
</div> </div>
)} )}
{formErrorList.length > 0 && (
<div className='w-full p-4'> <div className='w-full p-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} /> <AlertErrorList formErrorList={formErrorList} onClose={close} />
</div> </div>
)}
{/* Action Buttons */} {/* Action Buttons */}
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'> <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-[#F9FAFB]'>
@@ -130,8 +130,7 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Card <Card
key={config.key} key={config.key}
className={{ className={{
wrapper: wrapper: 'w-full rounded-xl border border-base-content/10',
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
body: 'p-0', body: 'p-0',
wrapperContent: wrapperContent:
'h-full flex flex-col items-between justify-between', 'h-full flex flex-col items-between justify-between',
@@ -139,12 +138,12 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
}} }}
variant='bordered' variant='bordered'
footer={ footer={
<div className='flex flex-row justify-between px-[16px] pb-[16px]'> <div className='flex flex-row justify-between px-4 pb-4'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'> <div className='text-base-content/50 font-semibold text-xs'>
From last month From last month
</div> </div>
<div <div
className={`${trend.color} font-semibold flex flex-row items-center gap-[8px] text-[12px]`} className={`${trend.color} font-semibold flex flex-row items-center gap-2 text-xs`}
> >
<Icon icon={trend.icon} width={16} height={16} /> <Icon icon={trend.icon} width={16} height={16} />
{trend.value}% {trend.value}%
@@ -156,15 +155,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Alert <Alert
variant='soft' variant='soft'
color={config.alertColor} color={config.alertColor}
className={`rounded-[8px] p-0 w-[50px] h-[50px] bg-[${config.alertColor}]/12 flex items-center justify-center`} className={`rounded-lg p-3 bg-[${config.alertColor}]/12 flex items-center justify-center`}
> >
<Icon icon={config.icon} width={24} height={24} /> <Icon icon={config.icon} width={24} height={24} />
</Alert> </Alert>
<div> <div className='space-y-1'>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'> <h3 className='text-base-content/50 font-semibold text-sm'>
{cardData.label} {cardData.label}
</h3> </h3>
<p className='text-[20px] font-semibold'> <p className='text-xl font-semibold'>
{formatValue(cardData.value, config.prefix, config.suffix)} {formatValue(cardData.value, config.prefix, config.suffix)}
</p> </p>
</div> </div>