style: update component styling for improved layout and consistency

This commit is contained in:
Ardeman 2025-03-13 05:36:51 +08:00
parent 86ee6abef7
commit 474c6dc750
3 changed files with 5 additions and 9 deletions

View File

@ -16,7 +16,7 @@ type CardReportProperty = {
export const CardReport = (properties: CardReportProperty) => { export const CardReport = (properties: CardReportProperty) => {
const { title, amount, icon: Icon, counter, currency } = properties const { title, amount, icon: Icon, counter, currency } = properties
return ( return (
<div className="rounded bg-white px-4 py-6 shadow-sm"> <div className="rounded-lg bg-white px-4 py-6 shadow-sm">
<div className="flex items-center"> <div className="flex items-center">
<Icon <Icon
className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white" className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"

View File

@ -70,7 +70,7 @@ export const UiChartPie = () => {
} }
return ( return (
<div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center"> <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 px-4 py-6 text-center shadow-sm">
<h2 className="text-xl font-bold">Top 5 Artikel</h2> <h2 className="text-xl font-bold">Top 5 Artikel</h2>
<Pie <Pie
height={225} height={225}
@ -151,7 +151,7 @@ export const UiChartBar = () => {
} }
return ( return (
<div className="rounded-xl bg-white p-6 shadow-lg"> <div className="rounded-lg bg-white p-6 shadow-sm">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h2 className="text-xl font-bold"> <h2 className="text-xl font-bold">
{view === 'year' {view === 'year'

View File

@ -52,16 +52,12 @@ export const DashboardPage = () => {
<div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap"> <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
<div className="h-full w-full sm:w-[60%]"> <div className="h-full w-full sm:w-[60%]">
<div className="shadow-sm">
<UiChartBar /> <UiChartBar />
</div> </div>
</div>
<div className="w-ful h-full sm:w-[40%]"> <div className="w-ful h-full sm:w-[40%]">
<div className="shadow-sm">
<ChartSubscription /> <ChartSubscription />
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }