Merge branch 'feature/dashboard/dark-mode' into 'main'

tooltip works!!

See merge request vkuchenik/website-framework!33

client/src/components/layout/Canvas/components/Tooltip.jsx

@@ -0,0 +1,45 @@
+import { useState, useRef } from "react";
+import { chakra, useSlotRecipe } from "@chakra-ui/react";
+
+
+export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
+  const [isVisible, setIsVisible] = useState(!sidebarIsOpen);
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
+  const timeoutId = useRef(null);
+
+  return (
+    <chakra.div
+      width={sidebarIsOpen ? "194px" : "55px"}
+      transition="width 0.4s ease"
+      onMouseEnter={() => { timeoutId.current = setTimeout(() => setIsVisible(true), 1000); }}
+      onMouseLeave={() => {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+          timeoutId.current = null;
+        }
+        setIsVisible(false);
+      }} 
+    >
+      {children}
+      {isVisible && !sidebarIsOpen && (
+        <>
+          <chakra.div 
+            fontSize="xs"
+            position="absolute"
+            bg="gray.700"
+            color="white"
+            left="65px"
+            px={2}
+            py={1}
+            borderRadius="md"
+            whiteSpace="nowrap"
+            zIndex={10}
+          >
+            {content}
+          </chakra.div>
+        </>
+      )}
+    </chakra.div>
+  )
+}

client/src/components/layout/Canvas/components/Widget.jsx

@@ -12,13 +12,13 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }
         {isDelete ? (
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%">{title}</Text>
+              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
               <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
             </Flex>
           </>
         ):(
           <>
-            <Text className="widget-handle" >{title}</Text>
+            <Text className="widget-handle" fontWeight="bold">{title}</Text>
           </>
         )}
       </chakra.div>

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -81,7 +81,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 
   return (
     /* HEADER */
-    <Tabs.Root lazyMount defaultValue="my dashboard">
+    <Tabs.Root lazyMount defaultValue="my dashboard" size="lg">
       <Flex 
         as="header"
 				position="sticky"
@@ -89,24 +89,24 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
-				py={3}
+				pt={3}
 				align="center"
 				justify="space-between"
       >
         <Tabs.List>
-          <Tabs.Trigger value="my dashboard">
+          <Tabs.Trigger value="my dashboard" >
             My Dashboard
           </Tabs.Trigger>
-          <Tabs.Trigger value="gas">
+          <Tabs.Trigger value="gas" >
             Gas
           </Tabs.Trigger>
-          <Tabs.Trigger value="seismic">
+          <Tabs.Trigger value="seismic" >
             Seismic
           </Tabs.Trigger>
-          <Tabs.Trigger value="remote sensing">
+          <Tabs.Trigger value="remote sensing" >
             Remote Sensing
           </Tabs.Trigger>
-                  <Tabs.Trigger value="daily activity">
+          <Tabs.Trigger value="daily activity" >
             Daily Activity
           </Tabs.Trigger>
         </Tabs.List>

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,6 +1,7 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
-import { Tooltip } from "@/components/ui/tooltip";
+// import { Tooltip } from "@/components/ui/tooltip";
+import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
 import { FaHome } from "react-icons/fa";
 import { FaGlobeAmericas } from "react-icons/fa";
@@ -12,6 +13,8 @@ import { useState } from "react";
 export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
+  const recipe = useSlotRecipe({ key: "sidebar" });
+  const styles = recipe();
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
@@ -22,9 +25,6 @@ export default function Sidebar({ onChangeView }) {
     {icon: HiUsers, name: "Admin", view: "admin"}
   ];
 
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
-
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);
     else setIsOpen(true);
@@ -35,6 +35,7 @@ export default function Sidebar({ onChangeView }) {
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
+      position="relative"
     >
       <IconButton
         aria-label="Toggle Sidebar"
@@ -48,20 +49,22 @@ export default function Sidebar({ onChangeView }) {
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
-        const buttonElement = (
-          <Button 
-                  // key={idx} 
-                  css={styles.buttons} 
-                  onClick={() => {
-                    setActiveButton(idx);
-                    onChangeView(button.view); // Trigger state change in Dashboard
-                  }} 
-                  bg={activeButton === idx ? "primary":undefined} 
-                  color={activeButton === idx ? "#FFFFFF":undefined} 
-                  justifyContent="flex-start"
-          >           
-            <Icon />
-              <span style={{
+        return (
+          <Tooltip tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
+            <Button 
+              key={idx} 
+              css={styles.buttons} 
+              onClick={() => {
+                setActiveButton(idx);
+                onChangeView(button.view); // Trigger state change in Dashboard
+              }} 
+              bg={activeButton === idx ? "primary":undefined} 
+              color={activeButton === idx ? "#FFFFFF":undefined} 
+              justifyContent="flex-start"
+            >           
+              <Icon />
+              <span
+                style={{
                 opacity: isOpen ? 1 : 0,
                 transition: "opacity 0.4s ease",
                 overflow: "hidden",
@@ -72,17 +75,9 @@ export default function Sidebar({ onChangeView }) {
               >
                 {button.name}
               </span>
-          </Button>
-        );
-        // console.log("buttonElement is:", buttonElement)
-        console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement);
-        return !isOpen ? (
-          <Tooltip key={ idx } content={ button.name } placement="right" hasArrow>
-            { buttonElement }
+            </Button>
           </Tooltip>
-        ) : (
-          buttonElement 
-        );
+        )
       })}
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>