diff --git a/client/src/App.jsx b/client/src/App.jsx
index 591c1c2..8429718 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -25,6 +25,7 @@ function App() {
templateColumns="repeat(4 1fr)"
height="100%"
width="100%"
+ bg="#121212"
>
diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index 72d8271..e6316b9 100644
--- a/client/src/components/header.jsx
+++ b/client/src/components/header.jsx
@@ -1,32 +1,23 @@
-import { Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
export default function Header() {
+ const recipe = useRecipe({ key: "header" });
+ const styles = recipe();
return (
-
-
+
+
-
+
);
}
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 9a32fce..fd89e0e 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -1,4 +1,5 @@
-import { Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
+import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
+import { useColorModeValue, ColorModeButton } from "@/components/ui/color-mode";
import { FaVolcano } from "react-icons/fa6";
import { RxHamburgerMenu } from "react-icons/rx";
import { useState } from "react";
@@ -10,7 +11,7 @@ export const PushPin = createIcon({
fill: "none",
path: (
<>
-
+
),
});
@@ -21,9 +22,9 @@ export const Globe = createIcon({
fill: "none",
path: (
<>
-
-
-
+
+
+
),
});
@@ -34,8 +35,8 @@ export const MapMarker = createIcon({
fill: "none",
path: (
<>
-
-
+
+
),
});
@@ -46,64 +47,46 @@ export const Users = createIcon({
fill: "none",
path: (
<>
-
-
-
-
-
-
+
+
+
+
+
+
),
});
export default function Sidebar () {
+ const variant = useColorModeValue("ghost", "solid")
const [isOpen, setIsOpen] = useState(true);
const [activeButton, setActiveButton] = useState("Dashboard")
+ const recipe = useSlotRecipe({ key: "sidebar" });
+ const styles = recipe();
return (
- <>
- {isOpen && (
-
- setIsOpen(!isOpen)}>
-
- )}
-
- {!isOpen && (
-
+
+ ) : (
+ <>
setIsOpen(!isOpen)}>
@@ -122,9 +105,9 @@ export default function Sidebar () {
setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
-
+
)}
-
-
+
+
);
}
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 85e6708..14f86f7 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,4 +1,5 @@
import { ChakraProvider } from '@chakra-ui/react';
+import { ColorModeProvider } from '@/components/ui/color-mode';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './css/index.css';
@@ -10,7 +11,9 @@ import { system } from './theme.js';
createRoot(document.getElementById('root')).render(
-
+
+
+
,
)
diff --git a/client/src/theme.js b/client/src/theme.js
index 042393a..b11f184 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -1,18 +1,99 @@
-import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react";
-const config = defineConfig({
- theme: {
- tokens: {
- colors: {
- primaryBG: { value: {base: "#FFFFF", _dark: "AAB8C5"} },
- secondaryBG: { value: "#EDF1F1" },
- border: {value: "#000000"}
- },
- fonts: {
- body: { value: "georgia, system-ui, sans-serif" },
- },
- }
+// RECIPES
+const headerRecipe = defineRecipe({
+ base: {
+ bg: "{secondaryBG}",
+ color: "text",
+ width: "100%",
+ height: "100%",
+ borderBottom: "1px solid",
+ borderBottomColor:"{border}",
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
}
});
+const sidebarRecipe = defineSlotRecipe({
+ slots: ["root", "close_button", "buttons", "dark_mode_button"],
+ base: {
+ root: {
+ bg: "{primaryBG}",
+ borderRight: "1px solid",
+ borderColor: "{border}",
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "start",
+ alignItems: "start",
+ gap: 2,
+ p: 2,
+ },
+ buttons: {
+ bg: {base: "transparent", _dark: "#414141"},
+ fontSize: "xl",
+ color: {base: "#19332D", _dark: "#CBCBCB"}
+ },
+ }
+});
+
+
+// const sidebarRecipe = defineRecipe({
+// base: {
+// bg: "{primaryBG}",
+// borderRight: "1px solid",
+// borderColor: "{border}",
+// width: "100%",
+// height: "100%",
+// display: "flex",
+// flexDirection: "column",
+// justifyContent: "start",
+// alignItems: "start",
+// gap: 2,
+// p: 2,
+// },
+// variants: {
+// dark: {
+// borderRight: "2px solid",
+// }
+// }
+// });
+
+// const sidebarBtnRecipe = defineRecipe({
+// base: {
+// bg: "{sidebarBtnBG}"
+// }
+// });
+
+const config = defineConfig({
+ theme: {
+ semanticTokens: {
+ colors: {
+ primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}},
+ secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
+ border: {value: {base: "#000000", _dark: "#CBCBCB"}},
+ text: {value: {base: "#19332D", _dark: "#CBCBCB"}},
+ iconFill: { value: {base: "#FFFFFF", _dark: "#CBCBCB"}},
+ icon: {value: {base: "#19332D", _dark: "#CBCBCB"}},
+ },
+ },
+ tokens: {
+ fonts: {
+ body: { value: "georgia, system-ui, sans-serif" },
+ },
+ },
+ recipes: {
+ // sidebar: sidebarRecipe,
+ // sidebarBTN: sidebarBtnRecipe,
+ header: headerRecipe,
+ },
+ slotRecipes: {
+ sidebar: sidebarRecipe,
+ }
+ },
+});
+
export const system = createSystem(defaultConfig, config);
\ No newline at end of file