From 2a84eba84bf3085df36aef70eb643bd77b2c5d33 Mon Sep 17 00:00:00 2001
From: Camille Moussu <cmoussu@linagora.com>
Date: Fri, 12 Sep 2025 09:31:34 +0200
Subject: [PATCH] [#64] fixed css and empty name bug

---
 src/components/Calendar/Calendar.css          |  3 ++
 src/components/Calendar/CalendarSelection.tsx |  1 -
 src/features/Calendars/CalendarModal.tsx      | 34 ++++++++-----------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css
index 40fcad9..704c32d 100644
--- a/src/components/Calendar/Calendar.css
+++ b/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;
diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx
index 607e583..2c2cc11 100644
--- a/src/components/Calendar/CalendarSelection.tsx
+++ b/src/components/Calendar/CalendarSelection.tsx
@@ -28,7 +28,6 @@ export default function CalendarSelection({
     );
   };
 
-  useEffect(() => {}, [calendars]);
   const [anchorElCal, setAnchorElCal] = useState<HTMLElement | null>(null);
 
   return (
diff --git a/src/features/Calendars/CalendarModal.tsx b/src/features/Calendars/CalendarModal.tsx
index a196993..05c2307 100644
--- a/src/features/Calendars/CalendarModal.tsx
+++ b/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>