mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
chore: adjust styling in Dashboard related components
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user