From baff217802e4245ce1c69f277b4ca8e9a7b46bc4 Mon Sep 17 00:00:00 2001
From: Atharv <atharvbhandare2001@gmail.com>
Date: Mon, 6 Dec 2021 23:31:19 +0530
Subject: [PATCH] styling light & dark modes

---
 src/App.css                     |  3 +++
 src/App.js                      |  5 ++++-
 src/components/RecipeList.css   |  8 ++++++++
 src/components/RecipeList.js    |  5 ++++-
 src/components/ThemeSelector.js |  4 ++--
 src/context/ThemeContext.js     |  2 +-
 src/pages/recipe/Recipe.css     | 16 ++++++++++++++++
 src/pages/recipe/Recipe.js      |  4 +++-
 8 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 4c006b6..565adcf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,6 @@
 .App {
   min-height: 100%;
+}
+.App.dark {
+  background: #333;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 8e99cc6..8333a6d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useTheme } from './hooks/useTheme'
 
 // components
 import Navbar from "./components/Navbar";
@@ -12,8 +13,10 @@ import Recipe from "./pages/recipe/Recipe";
 import Search from "./pages/search/Search";
 
 function App() {
+  const { mode } = useTheme()
+
   return (
-    <div className="App">
+    <div className={`App ${mode}`}>
       <BrowserRouter>
         <Navbar />
         <ThemeSelector />
diff --git a/src/components/RecipeList.css b/src/components/RecipeList.css
index 935116a..713d06c 100644
--- a/src/components/RecipeList.css
+++ b/src/components/RecipeList.css
@@ -44,3 +44,11 @@
   border-radius: 4px;
   margin: 20px auto 0;
 }
+.recipe-list .card.dark {
+  background: #555;
+}
+.recipe-list .card.dark p,
+.recipe-list .card.dark h3,
+.recipe-list .card.dark div {
+  color: #e4e4e4;
+}
\ No newline at end of file
diff --git a/src/components/RecipeList.js b/src/components/RecipeList.js
index 4a89d2c..62cba02 100644
--- a/src/components/RecipeList.js
+++ b/src/components/RecipeList.js
@@ -1,9 +1,12 @@
 import { Link } from "react-router-dom";
+import { useTheme } from "../hooks/useTheme";
 
 // styles
 import "./RecipeList.css";
 
 export default function RecipeList({ recipes }) {
+  const { mode } = useTheme();
+
   if (recipes.length === 0) {
     return <div className="error">No recipes to load...</div>;
   }
@@ -11,7 +14,7 @@ export default function RecipeList({ recipes }) {
   return (
     <div className="recipe-list">
       {recipes.map((recipe) => (
-        <div key={recipe.id} className="card">
+        <div key={recipe.id} className={`card ${mode}`}>
           <h3>{recipe.title}</h3>
           <p>{recipe.cookingTime} to make.</p>
           <div>{recipe.method.substring(0, 100)}...</div>
diff --git a/src/components/ThemeSelector.js b/src/components/ThemeSelector.js
index e62d9c1..dd4a742 100644
--- a/src/components/ThemeSelector.js
+++ b/src/components/ThemeSelector.js
@@ -3,7 +3,7 @@ import modeIcon from "../assets/mode-icon.svg"
 // Styles
 import "./ThemeSelector.css";
 
-const themeColors = ["#58249c", "#249c6b", "#d9534f","#f0ad4e"];
+const themeColors = ["#58249c", "#249c6b", "#d9534f"];
 
 export default function ThemeSelector() {
   const { changeColor,mode,changeMode } = useTheme();
@@ -11,7 +11,7 @@ export default function ThemeSelector() {
     const changeModeHandler = () => {
         changeMode(mode === 'dark' ? 'light' : 'dark')
     }
-    console.log(mode)
+    // console.log(mode)
 
   return (
     <div className="theme-selector">
diff --git a/src/context/ThemeContext.js b/src/context/ThemeContext.js
index b523c73..b8c6731 100644
--- a/src/context/ThemeContext.js
+++ b/src/context/ThemeContext.js
@@ -20,7 +20,7 @@ const themeReducer = (state, action) => {
 
 export function ThemeProvider({ children }) {
   const [state, dispatch] = useReducer(themeReducer, {
-    defaultColor: "#58249c",
+    defaultColor: "#555",
     mode: "dark",
   });
 
diff --git a/src/pages/recipe/Recipe.css b/src/pages/recipe/Recipe.css
index 0873160..cec7a21 100644
--- a/src/pages/recipe/Recipe.css
+++ b/src/pages/recipe/Recipe.css
@@ -6,6 +6,9 @@
   padding: 40px;
   box-sizing: border-box;
 }
+.recipe>h2{
+  text-decoration: underline;
+}
 .recipe ul {
   display: flex;
   padding: 0;
@@ -26,3 +29,16 @@
 .method {
   text-align: left;
 }
+/* dark mode */
+.recipe.dark {
+  background: #555;
+  color: #e4e4e4;
+}
+.recipe.dark>h2{
+  color: #e4e4e4;
+  text-decoration: underline;
+}
+.recipe.dark li{
+  color: #e4e4e4;
+}
+
diff --git a/src/pages/recipe/Recipe.js b/src/pages/recipe/Recipe.js
index 48326aa..83e7df1 100644
--- a/src/pages/recipe/Recipe.js
+++ b/src/pages/recipe/Recipe.js
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router";
 
 // Hooks
 import { useFetch } from "../../hooks/useFetch";
+import { useTheme } from "../../hooks/useTheme";
 
 // Styles
 import "./Recipe.css";
@@ -12,6 +13,7 @@ export default function Recipe() {
   const url = "http://localhost:3000/recipes/" + id;
   const { data: recipe, isPending, error } = useFetch(url);
   const navigate = useNavigate();
+  const {mode} = useTheme()
 
   useEffect(() => {
     if (error) {
@@ -23,7 +25,7 @@ export default function Recipe() {
   }, [error, navigate]);
 
   return (
-    <div className="recipe">
+    <div className={`recipe ${ mode }`}>
       {error && <div>{error}</div>}
       {isPending && <div>Loading...</div>}
       {recipe && (