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}
errorMessage={formik.errors.startDate}
onChange={formik.handleChange}
className={{
inputWrapper:
'rounded-[8px] px-[12px] py-[10px] text-sm border-[#18181B]/10',
}}
isError={
Boolean(formik.errors.startDate) &&
Boolean(formik.touched.startDate)
@@ -568,7 +564,6 @@ const DashboardProduction = () => {
Boolean(formik.touched.location)
}
className={{
label: 'mb-[8px] text-xs font-semibold',
select: 'rounded-[8px] text-sm border-[#18181B]/10',
}}
/>
@@ -742,9 +737,11 @@ const DashboardProduction = () => {
</div>
)}
<div className='w-full p-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
{formErrorList.length > 0 && (
<div className='w-full p-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div>
)}
{/* Action Buttons */}
<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
key={config.key}
className={{
wrapper:
'w-full rounded-[12px] min-h-[132px] border-[1px] border-[#18181B]/10',
wrapper: 'w-full rounded-xl border border-base-content/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
@@ -139,12 +138,12 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
}}
variant='bordered'
footer={
<div className='flex flex-row justify-between px-[16px] pb-[16px]'>
<div className='text-[#18181B]/50 font-semibold text-[12px]'>
<div className='flex flex-row justify-between px-4 pb-4'>
<div className='text-base-content/50 font-semibold text-xs'>
From last month
</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} />
{trend.value}%
@@ -156,15 +155,15 @@ const DashboardStats = ({ data }: DashboardStatsProps) => {
<Alert
variant='soft'
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} />
</Alert>
<div>
<h3 className='text-[#18181B]/50 font-semibold text-[14px]'>
<div className='space-y-1'>
<h3 className='text-base-content/50 font-semibold text-sm'>
{cardData.label}
</h3>
<p className='text-[20px] font-semibold'>
<p className='text-xl font-semibold'>
{formatValue(cardData.value, config.prefix, config.suffix)}
</p>
</div>