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

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

@@ -1,62 +1,60 @@
 import Widget from "./Widget";
-import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
+import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
 import { Asterisk } from 'lucide-react';
 
 export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
   const { register, handleSubmit, reset, formState: {errors} } = useForm();
+  const [isSubmit, setIsSubmit] = useState(false);
+
   const onSubmit = (data) => {
     console.log("data: ", data);
-    if (data.volcanoname === '') {
-      return null;
-    }
     setIsSubmit(true);
     reset();
   }
-  const [isSubmit, setIsSubmit] = useState(false);
 
   // Prop Forwarding
   const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
+
   return (
-    <Widget title="Alert Level" {...widgetProps}>
+    <Widget title="Alert Level" {...widgetProps} >
       {!isSubmit ? (
         // DISPLAYING INPUT FIElDS AND LABELS
         <Box 
           as="form" 
           onSubmit={handleSubmit(onSubmit)}
           width="100%"
-          height="100%"
-          pt={1}
-          pl={3}
-          pr={3}
+          p={3}
           display="flex"
           flexDir="column"
-          gap="10"
         >
-          <Field.Root orientation="horizontal">
-            <Stack direction="column" gap="3" width="100%">
-              <Stack direction="row" width="100%">
-                <Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
-                {/* place select drop down menu here instead of asking for input */}
-                <Input {...register("countryname")} placeholder="Enter country name"/>
-              </Stack>
-              <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 <Asterisk color="tomato" />
-                  </Field.Label>
-                  <Input 
-                    border={errors.volcanoname ? "2px solid" : undefined}
-                    borderColor={errors.volcanoname ? "tomato" : undefined} 
-                    {...register("volcanoname", { required: 'This field is required.' })} 
-                    placeholder="Enter volcano name"/>
-                </Stack>
-                {errors.volcanoname && <Box cursor="default" userSelect="none" position="absolute" top="40px" left="8.5rem" style={{ color: 'tomato' }}>{errors.volcanoname.message}</Box>}
-              </Flex>
-            </Stack>
-          </Field.Root>
-          <Button type="submit" size="sm">Submit</Button>
+          <Fieldset.Root size="md" maxW="md">
+            <Fieldset.Content>
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Volcano</Field.Label>
+                <Input name="volcanoname" />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Country</Field.Label>
+                <NativeSelect.Root>
+                  <NativeSelect.Field name="country">
+                    <For each={["United Kingdom", "Canada", "United States"]}>
+                      {(item) => (
+                        <option key={item} value={item}>
+                          {item}
+                        </option>
+                      )}
+                    </For>
+                  </NativeSelect.Field>
+                  <NativeSelect.Indicator />
+                </NativeSelect.Root>
+              </Field.Root>
+            </Fieldset.Content>
+
+            <Button type="submit" size="sm">Submit</Button>
+          </Fieldset.Root>
         </Box>
       ):(
         // DISPLAYING ALERT LEVEL DATA