refactor, further cleaning up sidebar, home, mydashboard, alertlevelwidget, widget, and more misc.

client/src/components/Canvas/views/Home.jsx

@@ -1,4 +1,4 @@
-import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import { HStack, Flex, Tabs, Button } from "@chakra-ui/react";
 import { useState } from "react";
 import MyDashboard from "./HomeTabs/MyDashboard";
 import { SearchBar } from "../CanvasComponents/SearchBar";
@@ -149,8 +149,8 @@ export default function Home() {
         <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>
-              <SaveButton onSave={ onSave } />
-              <CancelButton onCancel={ onCancel } />
+              <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+              <Button onClick={onCancel} borderRadius="md">Cancel</Button>
               {isDelete ? (
                 <DeleteAllButton onDeleteAll={ DeleteAll } />
               ):(null)
@@ -158,7 +158,7 @@ export default function Home() {
             </>
           ):(
             <>
-              <SearchBar />
+              <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
               <SettingsButton {...settingsButtonProps}/>
             </>
           )}

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,5 +1,5 @@
 import GridLayout, { WidthProvider } from 'react-grid-layout';
-import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
+import { useSlotRecipe, chakra, Flex, SimpleGrid } from '@chakra-ui/react';
 import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
 import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
 
@@ -44,7 +44,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
       className="layout"
       layout={layout}
       cols={16} // Total columns in grid
-      rowHeight={30} // Height of a single row in px
+      rowHeight={40} // Height of a single row in px
       isBounded={true} // Total width of the grid
       margin={[15, 5]} // [horizontal, vertical] gap
       onLayoutChange={onLayoutChange}

client/src/components/Canvas/views/Volcano.jsx

@@ -10,20 +10,13 @@ import { SocialMedia } from './VolcanoTabs/SocialMedia';
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
 
-export default function Volcano({ view, onChangeView }) {
+export default function Volcano() {
     return (
         <Tabs.Root
-            key={view}
-            value={view}
             variant="line"
             width="100%"
             height="100%"
             lazyMount
-            // Prevent navigation away from 'My Dashboard' while in Edit mode
-            onValueChange={(e) => {
-                const nextView = e.value;
-                onChangeView(nextView); 
-            }}
         >       
             <Flex 
                 as="header"
@@ -31,14 +24,12 @@ export default function Volcano({ view, onChangeView }) {
                 top="0"
                 zIndex="dropdown" // zIndex: 1100
                 bg="base200"
-                pl={5}
-                pr={2}
-                pt={3}
+                p={5}
                 align="center"
                 justify="space-between"
                 width="100%"
             > 
-                {/* HEADER */}
+                {/* SUB HEADER */}
                 <CanvasHeaderTabs tabs={VOLCANO_TABS} />
                 <HStack width="258px" justifyContent="flex-end">
                     <SearchBar />
@@ -46,7 +37,7 @@ export default function Volcano({ view, onChangeView }) {
                 </HStack>
             </Flex>
             
-            {/* CANVAS */}
+            {/* SUB CONTENT */}
             <Tabs.Content value="volcanohome">
                 <VolcanoHome />
             </Tabs.Content>