restyle current date state

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">