restyle current date state

__test__/features/Events/EventUpdateModal.recurring.test.tsx

@@ -129,6 +129,10 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
         screen.queryByDisplayValue("Modified Instance Title")
       ).not.toBeInTheDocument();
 
+      // Expand more options to show timezone (normal mode shows summary first)
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
       // Verify timezone dropdown shows master timezone
       await waitFor(() => {
         expect(screen.getByDisplayValue(/New York/i)).toBeDefined();
@@ -493,8 +497,12 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
         expect(screen.getByDisplayValue("Daily Standup")).toBeInTheDocument();
       });
 
+      // Expand more options to show date/time inputs (normal mode shows DateTimeSummary first)
+      fireEvent.click(
+        screen.getByRole("button", { name: "common.moreOptions" })
+      );
+      const input = await waitFor(() => screen.getByTestId("start-time-input"));
       // Change time to 2:00 PM (14:00)
-      const input = screen.getByTestId("start-time-input");
       await userEvent.click(input);
       await userEvent.clear(input);
       await userEvent.type(input, "14:00{enter}");

package-lock.json

@@ -17,7 +17,7 @@
         "@fullcalendar/moment-timezone": "^6.1.19",
         "@fullcalendar/react": "^6.1.17",
         "@fullcalendar/timegrid": "^6.1.17",
-        "@linagora/twake-mui": "1.1.7",
+        "@linagora/twake-mui": "1.1.8",
         "@lottiefiles/dotlottie-react": "^0.17.13",
         "@mui/icons-material": "^7.1.2",
         "@mui/material": "^7.1.2",
@@ -2712,9 +2712,10 @@
       }
     },
     "node_modules/@linagora/twake-mui": {
-      "version": "1.1.7",
-      "resolved": "https://npm.pkg.github.com/download/@linagora/twake-mui/1.1.7/dd45fa10aeb5c7e6b6e89f59ff9d88c7d2f7e507",
-      "integrity": "sha512-9ZRCeWUWObbIk9h2jg3N0fZlJ+QRBouXzhMNMC4rjQBgFvnCZxZHiMt6kGXQmOov8JsHFKSRhunwfNBYy1cv8Q==",
+      "version": "1.1.8",
+      "resolved": "https://npm.pkg.github.com/download/@linagora/twake-mui/1.1.8/e629a126e62dffd939a8d3d8de3ce024de5a2154",
+      "integrity": "sha512-H2MxtZIy5w1A8VNTNAoM4Pjuph/et4YP8DfzQ+5HCsjRJn6SA/T3nZRZOqC26SxY9kl3XJCKIEKklL+x5af7Vg==",
+      "license": "MIT",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"

package.json

@@ -12,7 +12,7 @@
     "@fullcalendar/moment-timezone": "^6.1.19",
     "@fullcalendar/react": "^6.1.17",
     "@fullcalendar/timegrid": "^6.1.17",
-    "@linagora/twake-mui": "1.1.7",
+    "@linagora/twake-mui": "1.1.8",
     "@lottiefiles/dotlottie-react": "^0.17.13",
     "@mui/icons-material": "^7.1.2",
     "@mui/material": "^7.1.2",

src/components/Calendar/Calendar.styl

@@ -117,7 +117,7 @@
   margin-top 2px
   width 6px
   height 6px
-  background-color #d93025
+  background-color #1D192B1F
   border-radius 50%
   margin-left auto
   margin-right auto

src/components/Calendar/CustomCalendar.styl

@@ -73,7 +73,7 @@ span.fc-daygrid-day-number.current-date
   color #fff
 
 span.fc-daygrid-day-number.current-date:after
-  background-color #f67e35
+  background-color #FB9E3A
 
 td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
 td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor

src/components/Calendar/SettingsTab.tsx

@@ -50,21 +50,26 @@ export function SettingsTab({
     <>
       {/* Form group 1: Name field - first group, margin top 0 */}
       <Box mt={0}>
-        <TextField
-          fullWidth
-          label=""
-          inputProps={{ "aria-label": t("common.name") }}
-          placeholder={t("common.name")}
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          size="small"
-          sx={{
-            "&.MuiFormControl-root": {
-              marginTop: 0,
-              marginBottom: 0,
-            },
-          }}
-        />
+        <Typography variant="h6" sx={{ margin: 0 }}>
+          {t("calendarPopover.settings.calendarName")}
+        </Typography>
+        <Box sx={{ marginTop: "6px" }}>
+          <TextField
+            fullWidth
+            label=""
+            inputProps={{ "aria-label": t("common.name") }}
+            placeholder={t("common.name")}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            size="small"
+            sx={{
+              "&.MuiFormControl-root": {
+                marginTop: 0,
+                marginBottom: 0,
+              },
+            }}
+          />
+        </Box>
       </Box>
 
       {/* Form group 2: Description */}

src/components/Event/components/DateTimeSummary.tsx

@@ -80,11 +80,12 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
     return `${toHHmm(startTimeStr)} - ${toHHmm(endTimeStr)}`;
   };
 
-  // Format timezone: "(UTC+2) Paris"
-  const formatTimezone = (tz: string): string => {
+  // Format timezone: "(UTC+2) Paris". Use event date for offset (DST correctness).
+  const formatTimezone = (tz: string, dateStr?: string): string => {
     if (!tz) return "";
     try {
-      const offset = getTimezoneOffset(tz, new Date());
+      const dateForOffset = dateStr ? dayjs(dateStr).toDate() : new Date();
+      const offset = getTimezoneOffset(tz, dateForOffset);
       const tzName = tz.replace(/_/g, " ");
       return `(${offset}) ${tzName}`;
     } catch (error) {
@@ -127,7 +128,7 @@ export const DateTimeSummary: React.FC<DateTimeSummaryProps> = ({
 
   const dateText = formatDateText();
   const timeText = formatTime(startTime, endTime);
-  const timezoneText = formatTimezone(timezone);
+  const timezoneText = formatTimezone(timezone, startDate);
   const repeatText = formatRepeat(repetition);
 
   // Don't render if no date

src/components/Event/utils/eventUtils.tsx

@@ -13,13 +13,6 @@ import { Avatar, Badge, Box, Typography } from "@linagora/twake-mui";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 
-const EMAIL_DISPLAY_MAX_LENGTH = 50;
-
-function truncateDisplayText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return `${text.slice(0, maxLength)}...`;
-}
-
 export function renderAttendeeBadge(
   a: userAttendee,
   key: string,
@@ -73,10 +66,7 @@ export function renderAttendeeBadge(
         </Badge>
         <Box style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
           <Typography noWrap>
-            {truncateDisplayText(
-              a.cn || a.cal_address,
-              EMAIL_DISPLAY_MAX_LENGTH
-            )}
+            {a.cn || a.cal_address}
           </Typography>
           {isOrganizer && (
             <Typography variant="caption" color="text.secondary">

src/locales/en.json

@@ -76,6 +76,9 @@
       "addNew": "Add new calendar",
       "access": "Access",
       "import": "Import"
+    },
+    "settings": {
+      "calendarName": "Calendar name"
     }
   },
   "colorPicker": {

src/locales/fr.json

@@ -78,6 +78,9 @@
       "addNew": "Ajouter un nouveau calendrier",
       "access": "Accès",
       "import": "Importer"
+    },
+    "settings": {
+      "calendarName": "Nom du calendrier"
     }
   },
   "colorPicker": {

src/locales/ru.json

@@ -78,6 +78,9 @@
       "addNew": "Добавить новый календарь",
       "access": "Доступ",
       "import": "Импорт"
+    },
+    "settings": {
+      "calendarName": "Название календаря"
     }
   },
   "colorPicker": {

src/locales/vi.json

@@ -76,6 +76,9 @@
       "addNew": "Thêm lịch mới",
       "access": "Quyền truy cập",
       "import": "Nhập"
+    },
+    "settings": {
+      "calendarName": "Tên lịch"
     }
   },
   "colorPicker": {