style: apply darkmode to report page (#84)

hudy9x · Nov 20, 2023 · c2e9694 · c2e9694
1 parent 21f28eb
commit c2e9694
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/packages/ui-app/app/_features/Report/ReporMemberProgressChart.tsx b/packages/ui-app/app/_features/Report/ReporMemberProgressChart.tsx
@@ -50,7 +50,7 @@ function MemberChartItem({ name, photo, data }: IMemberChartItem) {
           {notDonePercent} %
         </div>
       </div>
-      <div className="w-[48px] h-[20px] shrink-0 text-[10px] flex items-center justify-center border rounded-md bg-gray-100 px-1">
+      <div className="w-[48px] h-[20px] shrink-0 text-[10px] flex items-center justify-center border rounded-md bg-gray-100 dark:bg-gray-700 dark:text-gray-300 dark:border-slate-800 px-1">
         {done}/{notDone}
       </div>
     </div>

diff --git a/packages/ui-app/app/_features/Report/ReportLayout.tsx b/packages/ui-app/app/_features/Report/ReportLayout.tsx
@@ -6,7 +6,7 @@ import ReportTotalTask from './ReportTotalTask'
 export default function ReportLayout() {
   return (
     <div className="h-screen bg-indigo-50/50">
-      <header className="bg-white border-b py-3">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-800 py-3">
         <div className="w-[900px] mx-auto">
           <h2 className="text-gray-600 dark:text-gray-300 font-bold text-xl">
             Report section
@@ -22,13 +22,15 @@ export default function ReportLayout() {
         assigneeEnable={false}
         importEnable={false}
       />
-      <div className="mx-auto w-[900px] grid grid-cols-3 gap-2 py-8">
-        <ReportTotalTask />
-        <div className="report-box col-span-2">
-          <ReportMemberProgressChart />
-        </div>
-        <div className="report-box">
-          <ReportWorkProgressChart />
+      <div className='h-[calc(100vh-106px)] dark:bg-[#182031]'>
+        <div className="mx-auto w-[900px] grid grid-cols-3 gap-2 py-8">
+          <ReportTotalTask />
+          <div className="report-box col-span-2">
+            <ReportMemberProgressChart />
+          </div>
+          <div className="report-box">
+            <ReportWorkProgressChart />
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/ui-app/app/_features/Report/style.css b/packages/ui-app/app/_features/Report/style.css
@@ -1,5 +1,5 @@
 .report-box {
-  @apply border bg-white shadow-sm rounded-md;
+  @apply border dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm rounded-md;
 }
 
 .center-all {