diff --git a/client/src/App.jsx b/client/src/App.jsx index 75d84e6..4f55612 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,24 +2,16 @@ import { useState } from 'react' import Header from './components/header.jsx'; import Sidebar from './components/sidebar.jsx'; import Widget from './components/Widget.jsx' +import { Grid, GridItem, useRecipe } from "@chakra-ui/react" import CanvasHeader from './components/CanvasHeader.jsx' -// import { CanvasHeaderNav } from './components/CanvasHeaderNav.jsx' -// import { SearchBar } from './components/SearchBar.jsx' -// import { SettingsButton } from './components/SettingsButton.jsx' -import { Grid, GridItem } from "@chakra-ui/react" function App() { - // UGLY SANITY CHECK - DELETE LATER - // return ( - //
- // {/* */} - // {/* */} - // {/* */} - //
- // ) + const recipe = useRecipe({ key: "canvas" }); + const styles = recipe(); + return ( - + > diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx index c1aa092..7e9261e 100644 --- a/client/src/components/header.jsx +++ b/client/src/components/header.jsx @@ -1,47 +1,36 @@ - -import { Box, Button, Avatar, HStack, Stack, Text, Menu, Portal } from "@chakra-ui/react" +import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react" export default function Header() { + const recipe = useRecipe({ key: "header" }); + const styles = recipe(); + return ( - - - - + + + + {user.name} + {user.email} + + {/* Add a drop down menu to the avatar */} + + + + + + + + + + + Account + Settings + Logout + + + + + {/* End drop down menu */} + ); } diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx index 6fce220..05c7f35 100644 --- a/client/src/components/sidebar.jsx +++ b/client/src/components/sidebar.jsx @@ -1,4 +1,5 @@ -import { Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react"; +import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react"; +import { 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,23 +47,23 @@ export const Users = createIcon({ fill: "none", path: ( <> - - - - - - + + + + + + ), }); - - - export default function Sidebar() { const [isOpen, setIsOpen] = useState(true); const [hasFinishedClosing, setHasFinishedClosing] = useState(true); - const [activeButton, setActiveButton] = useState("Dashboard"); + + const [activeButton, setActiveButton] = useState(0) + const recipe = useSlotRecipe({ key: "sidebar" }); + const styles = recipe(); const toggleSidebar = () => { if (isOpen) { @@ -72,57 +73,30 @@ export default function Sidebar() { } else { setIsOpen(true); setHasFinishedClosing(true); - // setTimeout(() => setIsOpen(true), 5); - // setTimeout(() => setHasFinishedClosing(false), 200); } }; return ( setIsOpen(!isOpen)} onClick={toggleSidebar} - // icon={} > + {/* Dashboard */} - {/* Global Map */} - - {/* EXPERIMENTAL STYLING */} - {/* */} - {/* Regional Map */} - {/* Volcano */} - {/* Admin */} - + ); } 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..68926d3 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -1,18 +1,113 @@ -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: "{base200}", + color: "text", + width: "100%", + height: "100%", + borderBottom: "1px solid", + borderBottomColor:"{border}", + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", } }); +const canvasRecipe = defineRecipe({ + base: { + bg: "{base200}" + } +}); + +const sidebarRecipe = defineSlotRecipe({ + slots: ["root", "close_button", "buttons", "dark_mode_button"], + base: { + root: { + bg: "{base200}", + borderRight: "1px solid", + borderColor: "{border}", + width: "100%", + height: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "start", + alignItems: "start", + gap: 2, + p: 2, + }, + buttons: { + bg: "transparent", + _hover: {bg: "{primaryLt}"}, + fontSize: "xl", + color: {base: "#19332D", _dark: "#CBCBCB"}, + variant: "ghost", + width: "100%" + }, + } +}); + + +// 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: { + base100: { value: {base: "#f7f9fa", _dark: "#787b73"}}, + base200: { value: {base: "#eef2f6", _dark: "#484c42"}}, + base300: { value: {base: "#dfe5ed", _dark: "#60645a"}}, + primary: { value: {base: "#9cd855", _dark: "#629631"}}, + primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}}, + 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, + canvas: canvasRecipe, + }, + slotRecipes: { + sidebar: sidebarRecipe, + } + }, +}); + export const system = createSystem(defaultConfig, config); \ No newline at end of file