From a8306b3dedcc5c50c90e219379e1dc6f4125ffcf Mon Sep 17 00:00:00 2001
From: Farrel Augusta Dinata <farrel.apeiron@gmail.com>
Date: Sat, 21 Sep 2024 08:19:54 +0700
Subject: [PATCH] fix color combination between light or dark theme

---
 src/App.jsx             | 4 ++--
 src/components/Card.jsx | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6e33fea..3560cc3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -23,10 +23,10 @@ const router = createBrowserRouter(
 function App() {
 	const theme = useSelector((state) => state.theme.theme)
 
-	const appThemeClass = theme === 'dark' ? 'bg-slate-800 text-white' : 'bg-white text-black'
+	const appThemeClass = theme === 'dark' ? 'bg-slate-800 text-white' : 'bg-slate-300 text-black'
 
 	return (
-		<div className={`${appThemeClass} bg-slate-800 text-white min-h-screen`}>
+		<div className={`${appThemeClass} min-h-screen`}>
 			<RouterProvider router={router} />
 		</div>
 	)
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 2be3b9e..47d6c53 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
 function CardMenuList({shape, title}) {
@@ -29,13 +30,16 @@ function CardMenuBox() {
 
 function Card({id, isMenuActive, toggleDetail, blogTitle, blogWriter, writerPhotoProfile, blogImageUrl , blogWrittenDate}) {
     const navigate = useNavigate()
+    const theme = useSelector((state) => state.theme.theme)
+
+    const cardThemeClass = theme === 'dark' ? 'bg-slate-950 shadow-slate-600 hover:shadow-slate-400' : 'bg-slate-100 shadow-slate-400 hover:shadow-slate-200'
     
     const navigateDetail = () => {
         navigate(`/blog/${blogTitle}`)
     }
 
     return (
-        <div className="mx-auto blog-card bg-slate-950 rounded-lg w-80 m-4 shadow-lg shadow-slate-600 hover:cursor-pointer hover:shadow-slate-400 transition-shadow" onClick={navigateDetail}>
+        <div className={`mx-auto blog-card ${cardThemeClass} rounded-lg w-80 m-4 shadow-lg hover:cursor-pointer transition-shadow`} onClick={navigateDetail}>
             <img src={blogImageUrl} alt="Card image" className="min-w-full h-48 rounded-t-lg object-cover" />
             <div className="p-4">
                 <h1 className="blog-title font-bold">{blogTitle}</h1>