Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark Mode added using Redux. #57

Closed
wants to merge 6 commits into from
Closed

Dark Mode added using Redux. #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
47a7cb8
Dark mode added using Redux.
SwanandD121 May 17, 2024
1f66b1c
fix(ui): removed the arrows in pincode number input box
Varad0014 May 18, 2024
3426a88
Merge pull request #61 from Varad0014/Varad0014/fix/54
dvjsharma May 18, 2024
951c37f
Dark mode added using Redux.
SwanandD121 May 17, 2024
9cc3cd8
Resolved 1 conflict
SwanandD121 May 19, 2024
06ef1d5
Conflict resolved_01
SwanandD121 May 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drawn2Shoe</title>
</head>
<body>
<body className="dark transition-colors ease-in">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
Expand Down
20 changes: 15 additions & 5 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@
"react-burger-menu": "^3.0.9",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.2.1",
"react-razorpay": "^2.0.1",
"react-redux": "^8.1.2",
"react-router-dom": "^6.16.0"
"react-redux": "^8.1.3",
"react-router-dom": "^6.16.0",
"redux": "^4.2.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
Expand Down
38 changes: 20 additions & 18 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,27 @@ import Product from "./pages/Product";
import Cart from "./pages/Cart";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="categories" element={<Categories />} />
<Route path="customize" element={<Customize />} />
<Route path="shop" element={<Shop />} />
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="designers" element={<Designer_home />} />
<Route path="about" element={<About />} />
<Route path="product" element={<Product />} />
<Route path="cart" element={<Cart />} />
<Route path="retailer" element={<Layout_retailer />}>
<Route index element={<Retailer_home />} />
<div className="dark:bg-gradient-to-r from-slate-900 to-gray-950">
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="categories" element={<Categories />} />
<Route path="customize" element={<Customize />} />
<Route path="shop" element={<Shop />} />
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route path="designers" element={<Designer_home />} />
<Route path="about" element={<About />} />
<Route path="product" element={<Product />} />
<Route path="cart" element={<Cart />} />
<Route path="retailer" element={<Layout_retailer />}>
<Route index element={<Retailer_home />} />
</Route>
</Route>
</Route>
</Routes>
</BrowserRouter>
</Routes>
</BrowserRouter>
</div>
);
}

Expand Down
34 changes: 34 additions & 0 deletions client/src/ThemeContext.jsx
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We utilize Redux for state management instead of the context API. This would lead to 2 state management practices which is not recommended. Please look for a redux based alternative.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We utilize Redux for state management instead of the context API. This would lead to 2 state management practices which is not recommended. Please look for a redux based alternative.

Alright, working on it.

Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// ThemeContext.js
import React, { createContext, useState, useEffect } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(null);

useEffect(() => {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
} else {
setTheme('light');
}
}, []);

useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [theme]);

const handleThemeSwitch = () => {
setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
};

return (
<ThemeContext.Provider value={{ theme, handleThemeSwitch }}>
{children}
</ThemeContext.Provider>
);
};
Binary file added client/src/assets/logoblack.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/logowhite.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions client/src/components/Carousel2/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ const Carousel2 = () => {
return (
<div className="flex w-full items-center justify-center">
<div
className="carousel min-h-[300px] w-[700px] rounded-2xl mx-6 my-10"
className="carousel min-h-[300px] w-[700px] rounded-2xl mx-6 my-10 dark:text-white dark:shadow-gray-800 dark:bg-slate-700"
style={{ boxShadow: "2px 4px 35px 4px rgba(0, 0, 0, 0.10)" }}
>
<div
id="slide1"
className="carousel-item relative w-full justify-center items-center"
className="carousel-item relative w-full justify-center items-center dark:text-white dark:shadow-slate-800"
>
<div className="flex w-[80%] justify-start items-center flex-col py-5">
<div className="flex justify-start items-center w-full">
Expand Down Expand Up @@ -74,13 +74,13 @@ const Carousel2 = () => {
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</div>
<div className="custom text-gray-500 text-[14px]">
<div className="custom text-gray-500 text-[14px] dark:text-white">
Divyansh Bisht
</div>
</div>
</div>
<div className="w-full h-[1.5px] bg-gray-400 my-3"></div>
<div className="text-[18px] text-gray-700 custom">
<div className="text-[18px] text-gray-700 custom dark:text-slate-300">
I was surprised. The quality was much higher than I
expected! The best feeling is having people coming
up to me in the street and asking where I got them.
Expand All @@ -89,7 +89,7 @@ const Carousel2 = () => {
</div>
</div>
<div
className="carousel min-h-[300px] w-[700px] rounded-2xl mx-6 my-10 max-md:hidden"
className="carousel min-h-[300px] w-[700px] rounded-2xl mx-6 my-10 max-md:hidden dark:shadow dark:shadow-gray-800 dark:bg-slate-700"
style={{ boxShadow: "2px 4px 35px 4px rgba(0, 0, 0, 0.10)" }}
>
<div
Expand Down Expand Up @@ -158,13 +158,13 @@ const Carousel2 = () => {
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</div>
<div className="custom text-gray-500 text-[14px]">
<div className="custom text-gray-500 text-[14px] dark:text-white">
Divij Sharma
</div>
</div>
</div>
<div className="w-full h-[1.5px] bg-gray-400 my-3"></div>
<div className="text-[18px] text-gray-700 custom">
<div className="text-[18px] text-gray-700 custom dark:text-slate-300">
I was pleasantly surprised by the exceptional design
quality! The best part is that I created the design
myself, and they never fail to draw admiration
Expand Down
24 changes: 17 additions & 7 deletions client/src/components/Footer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import React from "react";
import React, { useContext } from "react";
import { NavLink, Link } from "react-router-dom";
import logo from "../../assets/logo-final.png";
import logowhite from '../../assets/logowhite.png'
import logoblack from '../../assets/logoblack.png'
import { useSelector } from "react-redux";



const Footer = () => {

// For Dark Mode using Redux
const theme = useSelector((state) => state.theme.theme);
// For Dark Mode using Redux

return (
<div className="flex items-center justify-center w-full flex-col max-lg:mt-7">
<div className="flex items-center justify-center w-[80%] flex-wrap min-h-[6rem] max-lg:flex-col font-bold">
<div className="flex items-center w-[20%] text-3xl flex-wrap my-3 max-lg:justify-center max-lg:w-full">
<img src={logo} alt="" className="h-9 w-48" />
<img src={theme === "dark" ? logowhite : logoblack} alt="" className="h-9 w-48" />
</div>
<div className="flex items-center justify-center w-[60%] text-[15px] flex-wrap gap-4 my-3">
<div className="flex items-center justify-center w-[60%] text-[15px] flex-wrap gap-4 my-3 dark:text-slate-300">
<NavLink to="/">Home</NavLink>
<NavLink to="categories">Categories</NavLink>
<NavLink to="customize">Customize</NavLink>
<NavLink to="shop">Shop</NavLink>
</div>
<div className="flex items-center w-[20%] gap-3 my-3 justify-end max-lg:justify-center">
<div className="flex items-center w-[20%] gap-3 my-3 justify-end max-lg:justify-center dark:text-white">
<a
href="https://twitter.com/drawn2shoe61810"
target="_blank"
Expand All @@ -40,7 +50,7 @@ const Footer = () => {
aria-labelledby="anxzlakyplg77qoc9l64rzi4s0sin9od"
role="img"
viewBox="0 0 24 24"
className="icon h-[1rem]"
className="icon h-[1rem] dark:fill-white"
>
<title id="anxzlakyplg77qoc9l64rzi4s0sin9od">
Facebook icon
Expand All @@ -60,7 +70,7 @@ const Footer = () => {
strokeLinejoin="round"
strokeMiterlimit="1.414"
role="img"
className="icon h-[1rem]"
className="icon h-[1rem] dark:fill-white"
>
<path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"></path>
</svg>
Expand All @@ -82,7 +92,7 @@ const Footer = () => {
</a>
</div>
</div>
<div className="flex items-center justify-center w-[80%] flex-wrap min-h-[3rem] max-lg:flex-col text-[#6e6d7a] text-[15px]">
<div className="flex items-center justify-center w-[80%] flex-wrap min-h-[3rem] max-lg:flex-col text-[#6e6d7a] dark:text-slate-400 text-[15px]">
<div className="flex w-[50%] my-3 flex-wrap max-lg:justify-center">
© 2023 Drawn2Shoe.
</div>
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Guide/guide.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import step1 from "../../assets/step_3.png";

const Guide = () => {
return (
<div className=" flex justify-center my-11 flex-col items-center">
<div className=" flex justify-center my-11 flex-col items-center dark:text-white">
<div className="w-[80%] flex flex-col gap-6">
<div className="text-[50px] text-center custom max-md:text-[30px]">
Create Custom Shoes in 3 Easy Steps!
</div>
<div className="flex gap-4 max-md:flex-col">
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5">
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5 dark:shadow-gray-800 dark:bg-slate-700">
<img src={step1} alt="" />
<br />
<p className="font-bold text-[24px] custom">
Expand All @@ -26,7 +26,7 @@ const Guide = () => {
<li>Many styles have black or white soles.</li>
</ul>
</div>
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5">
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5 dark:shadow-gray-800 dark:bg-slate-700">
<img src={step2} alt="" />
<br />
<p className="font-bold text-[24px] custom">
Expand All @@ -40,7 +40,7 @@ const Guide = () => {
<li>View mockup of custom shoes in real time</li>
</ul>
</div>
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5">
<div className="rounded-2xl shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] px-10 py-5 dark:shadow-gray-800 dark:bg-slate-700">
<img src={step3} alt="" />
<br />
<p className="font-bold text-[24px] custom">
Expand All @@ -58,7 +58,7 @@ const Guide = () => {
</div>
<div className="mt-[40px] shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] rounded-full">
<Link to="/customize">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-5 py-3 text-[25px] font-medium leading-normal transition duration-150 ease-in-out hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px] hover:border-black">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-5 py-3 text-[25px] font-medium leading-normal transition duration-150 ease-in-out hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px] hover:border-black dark:bg-white dark:text-black dark:hover:bg-transparent dark:hover:border-white dark:hover:text-white">
Customize Now!
</button>
</Link>
Expand Down
Loading