[#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

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

src/components/Event/EventFormFields.tsx

@@ -17,12 +17,12 @@ import {
 import {
   Description as DescriptionIcon,
   Public as PublicIcon,
-  Lock as LockIcon,
+  VideocamOutlined as VideocamOutlinedIcon,
-  CameraAlt as VideocamIcon,
   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>

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}

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={