[#64] fixed css and empty name bug

src/components/Calendar/Calendar.css

@@ -11,6 +11,9 @@ main {
 
 .calendarListHeader {
   padding-top: 10px;
+  display: flex;
+  align-items: center;
+  margin-left: 25%;
 }
 .sidebar {
   border-right: 2px gray;

src/components/Calendar/CalendarSelection.tsx

@@ -28,7 +28,6 @@ export default function CalendarSelection({
     );
   };
 
-  useEffect(() => {}, [calendars]);
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
 
   return (

src/features/Calendars/CalendarModal.tsx

@@ -26,18 +26,18 @@ function CalendarPopover({
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [color, setColor] = useState("");
-  const [timeZone, setTimeZone] = useState("");
-  const timezones = Intl.supportedValuesOf?.("timeZone") ?? [];
   const handleSave = () => {
     const calId = crypto.randomUUID();
-    dispatch(
-      createCalendarAsync({ name, desc: description, color, userId, calId })
-    );
-    onClose({}, "backdropClick");
+    if (name) {
+      dispatch(
+        createCalendarAsync({ name, desc: description, color, userId, calId })
+      );
+      onClose({}, "backdropClick");
 
-    // Reset
-    setName("");
-    setDescription("");
+      // Reset
+      setName("");
+      setDescription("");
+    }
   };
   const palette = [
     "#D50000",
@@ -100,16 +100,6 @@ function CalendarPopover({
             />
           ))}
         </ButtonGroup>
-        <Select
-          fullWidth
-          label="timeZone"
-          value={timeZone}
-          onChange={(e) => setTimeZone(e.target.value)}
-        >
-          {timezones.map((zone: string) => (
-            <div>{zone}</div>
-          ))}
-        </Select>
         <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
           <Button
             variant="outlined"
@@ -117,7 +107,11 @@ function CalendarPopover({
           >
             Cancel
           </Button>
-          <Button variant="contained" onClick={handleSave}>
+          <Button
+            disabled={name && name !== "" ? false : true}
+            variant="contained"
+            onClick={handleSave}
+          >
             Save
           </Button>
         </Box>