alert level has a complete form

+ alert level now has entry for country and volcano name
+ widget now has a submit button
+ now has a refresh button that only appears when something is submitted
+ adjusted number of columns in grid layout
+ other small sizing adjustments in canvas

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

@@ -9,23 +9,27 @@ import { RemoteSensing } from "./HomeTabs/RemoteSensing";
 import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
+import { v4 as uuid } from 'uuid';
+
 
 export default function Home({...props}) {
   // deconstructing props
   const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
     isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
 
-  const onAddWidget = (ID) => {
+  const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
     setLayout(prev => [
       ...prev,
       {
         i: ID,
         x: (prev.length * 3) % 12,
         y: Infinity,
-        w: 2, 
-        h: 5,
-        minW: 2,
-        minH: 5,
+        w: w, 
+        h: h,
+        minW: minw,
+        minH: minh,
+        maxW: maxw,
+        maxH: maxh,
         static: false,
         resizeHandles: ['se']
       }
@@ -33,6 +37,15 @@ export default function Home({...props}) {
     onEditWidgets();
   };
 
+  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
+    const newID = uuid();      // could be replaced with something else like guid
+    setWidgetArray([           // updating widget array containing info on the types of widgets
+      ...widgetArray,
+      {i: newID, widget: name }
+    ]);
+    onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
+  }
+
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
@@ -87,7 +100,7 @@ export default function Home({...props}) {
 
   // Prop Forwarding
   const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
-  const settingsButtonProps = { onAddWidget, onEditWidgets, onDeleteWidgets, setWidgetArray, widgetArray };
+  const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
   
   return (
     /* HEADER */
@@ -109,7 +122,7 @@ export default function Home({...props}) {
 				top="0"
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
-				px={6}
+				px={5}
 				pt={3}
 				align="center"
 				justify="space-between"