some routes added

client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

@@ -2,7 +2,7 @@ import Widget from "./Widget";
 import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
-import { LuAsterisk } from "react-icons/lu";
+import { Asterisk } from 'lucide-react';
 
 export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
   const { register, handleSubmit, reset, formState: {errors} } = useForm();
@@ -44,7 +44,7 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
               <Flex position="relative" dir="column" gap="0.5" width="100%">
                 <Stack direction="row" width="100%">
                   <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">
-                    Volcano Name <LuAsterisk color="tomato" />
+                    Volcano Name <Asterisk color="tomato" />
                   </Field.Label>
                   <Input 
                     border={errors.volcanoname ? "2px solid" : undefined}

client/src/components/Canvas/CanvasComponents/CustomResizeHandle.jsx

@@ -1,4 +1,4 @@
-import { RiExpandDiagonal2Line } from "react-icons/ri";
+import { MoveDiagonal2 } from 'lucide-react';
 import React from "react";
 
 const CustomResizeHandle = React.forwardRef((props, ref) => {
@@ -19,7 +19,7 @@ const CustomResizeHandle = React.forwardRef((props, ref) => {
         zIndex: "1",
       }}
     >
-      <RiExpandDiagonal2Line />
+      <MoveDiagonal2 />
     </div>
   );
 });

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -1,36 +1,58 @@
 import { Box, Menu, Portal } from '@chakra-ui/react'
 import WidgetMenu from './WidgetMenu';
+import AlertLevel from "@/components/Canvas/CanvasComponents/AlertLevelWidget.jsx";
 
 export default function FirstWidgetButton({ appendWidget }) {
-  const triggerItem = (<>
-    <Menu.Trigger asChild>
-      <Box
-        p={6}
-        m="auto"
-        mt={6}
-        align="center"
-        textAlign="center"
-        justify="center"
-        width="400px"
-        borderRadius="md" 
-        boxShadow="md"
-        border="2px dashed"
-        borderColor="gray.300"
-        bg="gray.50"
-        cursor="pointer"
-        _hover = {{
-          bg: "gray.100",
-          borderColor: "gray.400",
-          boxShadow: "lg",
-        }}
-      >
-        Add Your First Widget
-      </Box>
-    </Menu.Trigger>
-  </>);
+  const triggerItem = (
+    <>
+      <Menu.Trigger asChild>
+        <Box
+          p={6}
+          m="auto"
+          mt={6}
+          align="center"
+          textAlign="center"
+          justify="center"
+          width="400px"
+          borderRadius="md"
+          boxShadow="md"
+          border="2px dashed"
+          borderColor="gray.300"
+          bg="gray.50"
+          cursor="pointer"
+          _hover = {{
+            bg: "gray.100",
+            borderColor: "gray.400",
+            boxShadow: "lg",
+          }}
+        >
+          Add Your First Widget
+        </Box>
+      </Menu.Trigger>
+    </>
+  );
   const positioning = { placement: "bottom-middle" };
-  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
+  // const WidgetMenuProps = { appendWidget, triggerItem, positioning };
   return (
-    <WidgetMenu {...WidgetMenuProps} />
+    // <WidgetMenu {...WidgetMenuProps} />
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item
+              value="AlertLevel"
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
+            >
+              Alert Level
+            </Menu.Item>
+            <Menu.Item value="CO2">CO2</Menu.Item>
+            <Menu.Item value="Ivans">IVANS</Menu.Item>
+            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
+            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
   );
 }

client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx

@@ -1,8 +1,7 @@
 import { Box, Checkbox, Separator , CloseButton, Text, chakra, Field, IconButton, Icon, Input, Fieldset, Flex } from "@chakra-ui/react";
 import { useState } from "react";
-import { FiSettings } from "react-icons/fi";
-import { IoIosArrowDown } from "react-icons/io";
-import { IoIosArrowUp } from "react-icons/io";
+import { ChevronDown } from 'lucide-react';
+import { ChevronUp } from 'lucide-react';
 
 export default function MapSettingsButton() {
   const [open, setOpen] = useState(false);
@@ -16,7 +15,7 @@ export default function MapSettingsButton() {
     </Box>
   ):(
     <IconButton boxShadow="0 0 0 2px rgba(119, 119, 119, 0.4)" size="sm" variant="subtle" onClick={() => setOpen(true)}>
-      <FiSettings />
+      <Settings />
     </IconButton>
   );
 }
@@ -57,7 +56,7 @@ function Lightning() {
         <Checkbox.Label >Lightning</Checkbox.Label>
       </Checkbox.Root>
       <Icon pt="1" size="md" variant="none" onClick={() => setOpen(!open)}>
-        {open ? (<IoIosArrowUp />):(<IoIosArrowDown />)}
+        {open ? (<ChevronUp />):(<ChevronDown />)}
       </Icon>
       {open && (<LightningOptions />)}
     </Box>

client/src/components/Canvas/CanvasComponents/SearchBar.jsx

@@ -1,9 +1,9 @@
 import { Input, InputGroup } from "@chakra-ui/react";
-import { FiSearch } from "react-icons/fi"
+import { Search } from 'lucide-react';
 
 export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
     return (
-        <InputGroup startElement={<FiSearch />}>
+        <InputGroup startElement={<Search />}>
             <Input 
                 placeholder={placeholder} 
                 size={size}

client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

@@ -1,16 +1,16 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
-import { IoIosArrowBack } from "react-icons/io";
-import { FiSettings } from "react-icons/fi";
+import { ArrowLeft } from 'lucide-react';
+import { Settings } from 'lucide-react';
 import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, appendWidget}) {  
-  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const triggerItem = (<> <Menu.TriggerItem> <ArrowLeft /> Add Widget</Menu.TriggerItem> </>);
   const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
           <IconButton variant="ghost" size="md" borderRadius="xl">
-            <FiSettings />
+            <Settings />
           </IconButton>
       </Menu.Trigger>
       <Portal>

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

@@ -1,11 +1,9 @@
 import { useState, useRef } from "react";
-import { chakra, useSlotRecipe } from "@chakra-ui/react";
+import { chakra } from "@chakra-ui/react";
 
 
 export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) {
   const [isVisible, setIsVisible] = useState(false);
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
   const timeoutId = useRef(null);
 
   return (
@@ -30,22 +28,20 @@ export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children})
     >
       {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="overlay" // zIndex = 1300
-          >
-            {content}
-          </chakra.div>
-        </>
+        <chakra.div
+          fontSize="xs"
+          position="absolute"
+          bg="gray.700"
+          color="white"
+          left="65px"
+          px={2}
+          py={1}
+          borderRadius="md"
+          whiteSpace="nowrap"
+          zIndex="overlay" // zIndex = 1300
+        >
+          {content}
+        </chakra.div>
       )}
     </chakra.div>
   )

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

@@ -1,37 +1,30 @@
 import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
-import { GrUndo } from "react-icons/gr";
+import { Undo } from 'lucide-react';
 
 export default function Widget(props) {
   // deconstructing props
   const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
+
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe();
 
-
   return (
     <>
       <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
-        {isDelete ? (
-          <>
-            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%" fontWeight="bold">{title}</Text>
-              <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
-            </Flex>
-          </>
-        ):(
-          <>
-            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-              <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
-              {isSubmit ? (
-                <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><GrUndo fill="text" /></IconButton>
-              ):(null)}
-            </Flex>
-          </>
-        )}
+        <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+          <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
+          {isDelete ? (
+            <CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
+          ):(
+            isSubmit ? (
+              <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
+            ):null
+          )}
+        </Flex>
       </chakra.div>
-      <chakra.div height="100%" mb="2">
+      <Flex height="100%" mb="2">
         {children}
-      </chakra.div>
+      </Flex>
     </>
   );
 }