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/CanvasComponents/AlertLevelWidget.jsx

@@ -1,27 +1,65 @@
 import Widget from "./Widget";
-import { HStack, Box, Field, Input, Button } from "@chakra-ui/react";
+import { Stack, Box, Field, Input, Button, Text } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
+import { useState } from "react";
 
 export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
   const { register, handleSubmit } = useForm();
-  const onSubmit = (data) => console.log(data);
+  const onSubmit = (data) => {
+    console.log(data);
+    setIsSubmit(true);
+  }
+  const [isSubmit, setIsSubmit] = useState(false);
 
+  // Prop Forwarding
+  const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
   return (
-    <Widget id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
-      <Box 
-        as="form" 
-        onSubmit={handleSubmit(onSubmit)}
-        width="100%"
-        height="100%"
-        p={2}
-      >
-        <Field.Root orientation="horizontal" >
-            <HStack display="flex" spacing={4} align="center" width="100%">
-              <Field.Label display="flex" whiteSpace="nowrap">Country Name</Field.Label>
-              <Input {...register("countryname")} placeholder="Enter country name"/>
-            </HStack>
-        </Field.Root>
-      </Box>
+    <Widget title="Alert Level" {...widgetProps}>
+      {!isSubmit ? (
+        <Box 
+          as="form" 
+          onSubmit={handleSubmit(onSubmit)}
+          width="100%"
+          height="100%"
+          pt={1}
+          pl={3}
+          pr={3}
+          display="flex"
+          flexDir="column"
+          gap="3"
+        >
+          <Field.Root orientation="horizontal" >
+            <Stack direction="column" gap="3" width="100%">
+              <Stack direction="row" display="flex" flexShrink={1} spacing={4} align="center" width="100%">
+                <Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
+                <Input {...register("countryname")} placeholder="Enter country name"/>
+              </Stack>
+              <Stack direction="row" display="flex" spacing={4} align="center" width="100%">
+                <Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">Volcano Name</Field.Label>
+                <Input {...register("countryname")} placeholder="Enter volcano name"/>
+              </Stack>
+            </Stack>
+          </Field.Root>
+          <Button type="submit" size="sm" onClick={() => setIsSubmit(true)}>Submit</Button>
+        </Box>
+      ):(
+        <Box p={1} mt={1} ml="auto" mr="auto" width="200px">
+          <Box
+            bg="bg" 
+            shadow="md" 
+            borderRadius="md"
+            p={8}
+            width="200px"
+            height="10px"
+            textAlign="center"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
+          </Box>
+        </Box>
+      )}
     </Widget>
   );
 }