Skip to content

Commit 96c70e3

Browse files
committed
feat: setting user dashboard color
1 parent 1af199d commit 96c70e3

File tree

7 files changed

+34
-26
lines changed

7 files changed

+34
-26
lines changed

src/App.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { UserStateContextProvider } from "./libs/context/UserInteractionContext"
99
import routes from "./libs/routes/routes";
1010

1111
function App() {
12-
const { activeMenu, themeSettings, setThemeSettings } = StateContext();
13-
12+
const { activeMenu, themeSettings, currentColor, setThemeSettings } =
13+
StateContext();
1414
return (
1515
<div>
1616
<BrowserRouter>
@@ -20,7 +20,7 @@ function App() {
2020
<button
2121
type="button"
2222
className="text-3xl p-3 hover:drop-shadow-xl rounded-full transition-colors text-white hover:bg-light-gray"
23-
style={{ backgroundColor: "blue" }}
23+
style={{ backgroundColor: currentColor }}
2424
onClick={setThemeSettings}
2525
>
2626
<FiSettings />

src/components/Partials/Navbar.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const NavButton = ({ title, customFunc, icon, color, dotColor }) => {
2222
<button
2323
type="button"
2424
onClick={customFunc}
25-
style={{ color }}
2625
className="relative text-xl rounded-full p-3 hover:bg-light-gray"
26+
style={{ color }}
2727
>
2828
<span
2929
style={{ backgroundColor: dotColor }}
@@ -35,7 +35,7 @@ const NavButton = ({ title, customFunc, icon, color, dotColor }) => {
3535
);
3636
};
3737
const Navbar = () => {
38-
const { toggleMenu } = StateContext();
38+
const { toggleMenu, currentColor } = StateContext();
3939
const { isClicked, toggleIsClicked } = UserStateContext();
4040
const { chat, cart, userProfile, notification } = isClicked;
4141

@@ -44,27 +44,27 @@ const Navbar = () => {
4444
<NavButton
4545
title="Menu"
4646
customFunc={toggleMenu}
47-
color="blue"
47+
color={currentColor}
4848
icon={<AiOutlineMenu />}
4949
/>
5050
<div className="flex">
5151
<NavButton
5252
title="Cart"
5353
customFunc={() => toggleIsClicked("cart")}
54-
color="blue"
54+
color={currentColor}
5555
icon={<FiShoppingCart />}
5656
/>
5757
<NavButton
5858
title="Chat"
5959
customFunc={() => toggleIsClicked("chat")}
60-
color="blue"
60+
color={currentColor}
6161
dotColor="#03c9d7"
6262
icon={<BsChatLeft />}
6363
/>
6464
<NavButton
6565
title="Notification"
6666
customFunc={() => toggleIsClicked("notification")}
67-
color="blue"
67+
color={currentColor}
6868
dotColor="#03c9d7"
6969
icon={<RiNotification3Line />}
7070
/>

src/components/Partials/Sidebar.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import StateContext from "../../libs/context/AppContext";
99
import { links } from "../../libs/data/dummy";
1010

1111
const Sidebar = () => {
12-
const { handleCloseSideBar } = StateContext();
12+
const { handleCloseSideBar, currentColor } = StateContext();
1313
const activeLink =
1414
"flex items-center gap-5 pl-3 py-2.5 rounded-lg text-white text-md m-2 transition-colors bg-gray-900";
1515
const normalLink =
@@ -48,6 +48,9 @@ const Sidebar = () => {
4848
className={(nav) =>
4949
nav.isActive ? activeLink : normalLink
5050
}
51+
style={(nav) =>
52+
nav.isActive ? { backgroundColor: currentColor } : {}
53+
}
5154
>
5255
{item.icon}
5356
<span className="capitalize">{item.name}</span>

src/components/Partials/ThemeSettings.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const ThemeSettings = () => {
2222
<button
2323
type="button"
2424
className="text-2xl rounded-full p-2 hover:drop-shadow-xl hover:bg-light-gray"
25-
onClick={() => setThemeSettings()}
25+
onClick={setThemeSettings}
2626
style={{ color: "rgba(153,171,180)" }}
2727
>
2828
<MdOutlineCancel />
@@ -36,8 +36,8 @@ const ThemeSettings = () => {
3636
name="theme"
3737
id="light"
3838
value="Light"
39-
onChange={() => {}}
40-
checked={true}
39+
onChange={setMode}
40+
checked={currentMode === "Light"}
4141
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
4242
/>
4343
<label htmlFor="light" className="ml-2 text-md cursor-pointer">
@@ -50,8 +50,8 @@ const ThemeSettings = () => {
5050
name="theme"
5151
id="dark"
5252
value="Dark"
53-
onChange={() => {}}
54-
checked={true}
53+
onChange={setMode}
54+
checked={currentMode === "Dark"}
5555
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
5656
/>
5757
<label htmlFor="dark" className="ml-2 text-md cursor-pointer">
@@ -78,11 +78,6 @@ const ThemeSettings = () => {
7878
}}
7979
onClick={() => {
8080
setColor(theme.color);
81-
console.log(
82-
currentColor === theme.color,
83-
currentColor,
84-
theme.color
85-
);
8681
}}
8782
>
8883
<BsCheck

src/libs/context/AppContext.jsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,22 @@ const StateContextInit = createContext();
1313
export const StateContextProvider = memo(({ children }) => {
1414
const [activeMenu, toggleMenu] = useToggle(true);
1515
const [themeSettings, setThemeSettings] = useToggle(false);
16-
const [currentColor, setCurrentColor] = useState("#03C9D7");
17-
const [currentMode, setCurrentMode] = useState("Light");
16+
const [currentColor, setCurrentColor] = useState(
17+
localStorage.getItem("color") || "#03C9D7"
18+
);
19+
const [currentMode, setCurrentMode] = useState(
20+
localStorage.getItem("theme") || "Light"
21+
);
1822
const setMode = (e) => {
1923
setCurrentMode(e.target.value);
2024
localStorage.setItem("theme", e.target.value);
25+
26+
setThemeSettings(false);
2127
};
2228
const setColor = (value) => {
2329
setCurrentColor(value);
2430
localStorage.setItem("color", value);
31+
setThemeSettings(false);
2532
};
2633
const [screenSize, handleSize] = useResize();
2734
const handleCloseSideBar = useCallback(() => {

src/pages/Partials/Ecommerce.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react";
22
import { GoPrimitiveDot } from "react-icons/go";
33
import { Button, SparkLine, Stacked } from "../../components/components";
4+
import StateContext from "../../libs/context/AppContext";
45
import { earningData, SparklineAreaData } from "../../libs/data/dummy";
56

67
function Ecommerce() {
8+
const { currentColor } = StateContext();
79
return (
810
<div className="FadeAp mt-5">
911
<div className="flex flex-wrap lg:flex-nowrap justify-center">
@@ -16,7 +18,7 @@ function Ecommerce() {
1618
<div className="mt-6">
1719
<Button
1820
color="white"
19-
bgColor="blue"
21+
bgColor={currentColor}
2022
borderRadius="10px"
2123
size="md"
2224
className="px-3 py-2 hover:drop-shadow-xl"
@@ -92,19 +94,19 @@ function Ecommerce() {
9294
</div>
9395
<div className="mt-5">
9496
<SparkLine
95-
currentColor="blue"
97+
currentColor={currentColor}
9698
id="line-sparkline"
9799
type="Line"
98100
height="80px"
99101
width="80px"
100-
color="blue"
102+
color={currentColor}
101103
data={SparklineAreaData}
102104
/>
103105
</div>
104106
<div className="mt-10">
105107
<Button
106108
color="white"
107-
bgColor="blue"
109+
bgColor={currentColor}
108110
className="px-3 py-2"
109111
borderRadius="5px"
110112
>

tailwind.config.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
safelist: [
66
"text-2xl",
77
"text-3xl",
8+
"bg-[]",
89
{
910
pattern: /text-(red|green|blue)-(100|200|300|500|600|700|800|900)/,
1011
variants: ["lg", "hover", "focus", "lg:hover"],

0 commit comments

Comments
 (0)