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/Widget.jsx

@@ -1,10 +1,13 @@
 import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
-import { FaEllipsisH } from "react-icons/fa";
+import { GrUndo } from "react-icons/gr";
 
-export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
+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"}>
@@ -19,12 +22,14 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget,
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
               <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
-              <IconButton size="xs" bg="base300" cursor="pointer"><FaEllipsisH fill="text"/></IconButton>
+              {isSubmit ? (
+                <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><GrUndo fill="text" /></IconButton>
+              ):(null)}
             </Flex>
           </>
         )}
       </chakra.div>
-      <chakra.div height="100%" mb="3">
+      <chakra.div height="100%" mb="2">
         {children}
       </chakra.div>
     </>