feat: improve video conference UI in EventModal

- Replace 'Meeting link generated' text with 'Join Visio conference' button
- Button opens video conference link in new tab when clicked
- Use contained variant styling to match Save button appearance
- Maintain copy and delete functionality for meeting links

src/features/Events/EventDisplay.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import {
   deleteEventAsync,
-  getEventAsync,
   moveEventAsync,
   putEventAsync,
   removeEvent,
@@ -9,7 +8,6 @@ import {
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
 import {
-  Popover,
   Button,
   Box,
   Typography,
@@ -41,7 +39,6 @@ import CircleIcon from "@mui/icons-material/Circle";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { userAttendee } from "../User/userDataTypes";
-import { TIMEZONES } from "../../utils/timezone-data";
 import { Calendars } from "../Calendars/CalendarTypes";
 import { CalendarEvent, RepetitionObject } from "./EventsTypes";
 import { isValidUrl } from "../../utils/apiUtils";
@@ -94,7 +91,7 @@ export default function EventDisplayModal({
   const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
   const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
-  const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
+  const [timezone] = useState(event?.timezone ?? "UTC");
   const [newCalId, setNewCalId] = useState(event?.calId);
   const [calendarid, setCalendarid] = useState(
     calId.split("/")[0] === user.userData?.openpaasId

src/features/Events/EventDisplayPreview.tsx

@@ -15,8 +15,6 @@ import {
   CardContent,
   Divider,
   IconButton,
-  Avatar,
-  Badge,
   PopoverPosition,
 } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
@@ -29,18 +27,13 @@ import LocationOnIcon from "@mui/icons-material/LocationOn";
 import VideocamIcon from "@mui/icons-material/Videocam";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CircleIcon from "@mui/icons-material/Circle";
-import CancelIcon from "@mui/icons-material/Cancel";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { userAttendee } from "../User/userDataTypes";
 import EventDisplayModal, {
   InfoRow,
   renderAttendeeBadge,
-  stringAvatar,
 } from "./EventDisplay";
-import { dlEvent, getEvent } from "./EventApi";
-import { CalendarEvent } from "./EventsTypes";
+import { dlEvent } from "./EventApi";
 import EventDuplication from "../../components/Event/EventDuplicate";
-import { getCalendar } from "../Calendars/CalendarApi";
 
 export default function EventPreviewModal({
   eventId,

src/features/Events/EventModal.tsx

@@ -610,9 +610,18 @@ function EventPopover({
 
           {hasVideoConference && meetingLink && (
             <>
-              <Typography sx={{ color: "text.secondary", mr: 1 }}>
-                Meeting link generated
-              </Typography>
+              <Button
+                startIcon={<VideocamIcon />}
+                onClick={() => window.open(meetingLink, "_blank")}
+                size="medium"
+                variant="contained"
+                sx={{
+                  textTransform: "none",
+                  mr: 1,
+                }}
+              >
+                Join Visio conference
+              </Button>
               <IconButton
                 onClick={handleCopyMeetingLink}
                 size="small"