From 00266d270174767eafaa63eda58ddb51827dc274 Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:39:40 +0700
Subject: [PATCH] [#452] UI/update event extend mode (#454)

* Update event modal extend mode UI consistency

- Fix label font-size and fontWeight in extended mode to match normal mode
- Replace Lock icon with LockOutline icon for visibility toggle buttons
- Add displayEmpty prop to notification select to show default value

* Replace video icon with outlined variant for consistency

- Update VideocamIcon to VideocamOutlinedIcon in event form fields
- Update VideocamIcon to VideocamOutlinedIcon in event preview modal
---
 src/components/Calendar/SettingsTab.tsx            | 4 ++--
 src/components/Event/EventFormFields.tsx           | 7 ++++---
 src/components/Event/components/FieldWithLabel.tsx | 2 ++
 src/features/Events/EventDisplayPreview.tsx        | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Calendar/SettingsTab.tsx b/src/components/Calendar/SettingsTab.tsx
index 07748ff..a979a99 100644
--- a/src/components/Calendar/SettingsTab.tsx
+++ b/src/components/Calendar/SettingsTab.tsx
@@ -1,5 +1,5 @@
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
-import LockIcon from "@mui/icons-material/Lock";
+import LockOutlineIcon from "@mui/icons-material/LockOutline";
 import PublicIcon from "@mui/icons-material/Public";
 import {
   Box,
@@ -99,7 +99,7 @@ export function SettingsTab({
             </ToggleButton>
 
             <ToggleButton value="private" sx={{ width: "140px" }}>
-              <LockIcon fontSize="small" sx={{ mr: 1 }} />
+              <LockOutlineIcon fontSize="small" sx={{ mr: 1 }} />
               {t("common.you")}
             </ToggleButton>
           </ToggleButtonGroup>
diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx
index 0f0a9fe..ce3a6b9 100644
--- a/src/components/Event/EventFormFields.tsx
+++ b/src/components/Event/EventFormFields.tsx
@@ -17,12 +17,12 @@ import {
 import {
   Description as DescriptionIcon,
   Public as PublicIcon,
-  Lock as LockIcon,
-  CameraAlt as VideocamIcon,
+  VideocamOutlined as VideocamOutlinedIcon,
   ContentCopy as CopyIcon,
   Close as DeleteIcon,
 } from "@mui/icons-material";
 import iconCamera from "../../static/images/icon-camera.svg";
+import LockOutlineIcon from "@mui/icons-material/LockOutline";
 import AttendeeSelector from "../Attendees/AttendeeSearch";
 import RepeatEvent from "./EventRepeat";
 import { RepetitionObject } from "../../features/Events/EventsTypes";
@@ -652,6 +652,7 @@ export default function EventFormFields({
               <Select
                 labelId="notification"
                 value={alarm}
+                displayEmpty
                 onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
               >
                 <MenuItem value="">{t("event.form.notifications.")}</MenuItem>
@@ -732,7 +733,7 @@ export default function EventFormFields({
                 {t("event.form.visibleAll")}
               </ToggleButton>
               <ToggleButton value="PRIVATE" sx={{ minWidth: "160px" }}>
-                <LockIcon sx={{ mr: 1 }} />
+                <LockOutlineIcon sx={{ mr: 1 }} />
                 {t("event.form.visibleParticipants")}
               </ToggleButton>
             </ToggleButtonGroup>
diff --git a/src/components/Event/components/FieldWithLabel.tsx b/src/components/Event/components/FieldWithLabel.tsx
index 950a47c..af6f0e0 100644
--- a/src/components/Event/components/FieldWithLabel.tsx
+++ b/src/components/Event/components/FieldWithLabel.tsx
@@ -46,6 +46,8 @@ export const FieldWithLabel = React.memo(
             minWidth: "115px",
             marginRight: "12px",
             flexShrink: 0,
+            fontSize: "0.875rem",
+            fontWeight: 500,
           }}
         >
           {label}
diff --git a/src/features/Events/EventDisplayPreview.tsx b/src/features/Events/EventDisplayPreview.tsx
index 4fa14ec..22e336e 100644
--- a/src/features/Events/EventDisplayPreview.tsx
+++ b/src/features/Events/EventDisplayPreview.tsx
@@ -12,7 +12,7 @@ import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
 import RepeatIcon from "@mui/icons-material/Repeat";
 import SubjectIcon from "@mui/icons-material/Subject";
-import VideocamIcon from "@mui/icons-material/Videocam";
+import VideocamOutlinedIcon from "@mui/icons-material/VideocamOutlined";
 import { Box, Typography } from "@linagora/twake-mui";
 import EventPopover from "./EventModal";
 import {
@@ -512,7 +512,7 @@ export default function EventPreviewModal({
               <InfoRow
                 icon={
                   <Box sx={{ minWidth: "25px", marginRight: 2 }}>
-                    <VideocamIcon />
+                    <VideocamOutlinedIcon />
                   </Box>
                 }
                 content={