From 474c6dc750c6e7cf3983c999e687b9c683755ed9 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Thu, 13 Mar 2025 05:36:51 +0800
Subject: [PATCH] style: update component styling for improved layout and
 consistency

---
 app/components/ui/card-report.tsx | 2 +-
 app/components/ui/chart.tsx       | 4 ++--
 app/pages/dashboard/index.tsx     | 8 ++------
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/components/ui/card-report.tsx b/app/components/ui/card-report.tsx
index 0f2455e..3861ff8 100644
--- a/app/components/ui/card-report.tsx
+++ b/app/components/ui/card-report.tsx
@@ -16,7 +16,7 @@ type CardReportProperty = {
 export const CardReport = (properties: CardReportProperty) => {
   const { title, amount, icon: Icon, counter, currency } = properties
   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">
         <Icon
           className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
diff --git a/app/components/ui/chart.tsx b/app/components/ui/chart.tsx
index 3915571..2d908da 100644
--- a/app/components/ui/chart.tsx
+++ b/app/components/ui/chart.tsx
@@ -70,7 +70,7 @@ export const UiChartPie = () => {
   }
 
   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>
       <Pie
         height={225}
@@ -151,7 +151,7 @@ export const UiChartBar = () => {
   }
 
   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">
         <h2 className="text-xl font-bold">
           {view === 'year'
diff --git a/app/pages/dashboard/index.tsx b/app/pages/dashboard/index.tsx
index c4c9b59..17f26f4 100644
--- a/app/pages/dashboard/index.tsx
+++ b/app/pages/dashboard/index.tsx
@@ -52,14 +52,10 @@ export const DashboardPage = () => {
 
       <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
         <div className="h-full w-full sm:w-[60%]">
-          <div className="shadow-sm">
-            <UiChartBar />
-          </div>
+          <UiChartBar />
         </div>
         <div className="w-ful h-full sm:w-[40%]">
-          <div className="shadow-sm">
-            <ChartSubscription />
-          </div>
+          <ChartSubscription />
         </div>
       </div>
     </div>