From 4e0e9f9d3f8b731e88ae6b150e893b00be9ce5e7 Mon Sep 17 00:00:00 2001 From: salirezav Date: Fri, 19 Sep 2025 12:43:37 -0400 Subject: [PATCH] Update modal backdrop blur effect and Vite configuration - Changed backdrop blur effect in multiple modal components from 32px to 2px for a more subtle appearance. - Updated Vite configuration to use automatic JSX runtime for improved compatibility with React 17 and above. --- .../src/components/CameraConfigModal.tsx | 2 +- .../src/components/CameraPreviewModal.tsx | 2 +- .../src/components/CreateUserModal.tsx | 2 +- .../src/components/ExperimentModal.tsx | 2 +- .../components/RepetitionScheduleModal.tsx | 2 +- .../src/components/ScheduleModal.tsx | 2 +- .../src/components/Scheduling.tsx | 111 ++++++++++-------- .../video-streaming/components/Pagination.tsx | 1 - .../video-streaming/components/VideoCard.tsx | 1 - management-dashboard-web-app/vite.config.ts | 4 +- 10 files changed, 71 insertions(+), 58 deletions(-) diff --git a/management-dashboard-web-app/src/components/CameraConfigModal.tsx b/management-dashboard-web-app/src/components/CameraConfigModal.tsx index bf1971d..39abdbb 100755 --- a/management-dashboard-web-app/src/components/CameraConfigModal.tsx +++ b/management-dashboard-web-app/src/components/CameraConfigModal.tsx @@ -168,7 +168,7 @@ export function CameraConfigModal({ cameraName, isOpen, onClose, onSuccess, onEr return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/CameraPreviewModal.tsx b/management-dashboard-web-app/src/components/CameraPreviewModal.tsx index f64b8d1..19d74e7 100755 --- a/management-dashboard-web-app/src/components/CameraPreviewModal.tsx +++ b/management-dashboard-web-app/src/components/CameraPreviewModal.tsx @@ -102,7 +102,7 @@ export function CameraPreviewModal({ cameraName, isOpen, onClose, onError }: Cam return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/CreateUserModal.tsx b/management-dashboard-web-app/src/components/CreateUserModal.tsx index f378d05..dcaa614 100755 --- a/management-dashboard-web-app/src/components/CreateUserModal.tsx +++ b/management-dashboard-web-app/src/components/CreateUserModal.tsx @@ -108,7 +108,7 @@ export function CreateUserModal({ roles, onClose, onUserCreated }: CreateUserMod return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/ExperimentModal.tsx b/management-dashboard-web-app/src/components/ExperimentModal.tsx index 5b3ecf3..b4d9a82 100755 --- a/management-dashboard-web-app/src/components/ExperimentModal.tsx +++ b/management-dashboard-web-app/src/components/ExperimentModal.tsx @@ -63,7 +63,7 @@ export function ExperimentModal({ experiment, onClose, onExperimentSaved, phaseI return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx b/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx index 0a307ea..73cd3bf 100755 --- a/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx +++ b/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx @@ -94,7 +94,7 @@ export function RepetitionScheduleModal({ experiment, repetition, onClose, onSch return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/ScheduleModal.tsx b/management-dashboard-web-app/src/components/ScheduleModal.tsx index 2cd7133..1539882 100755 --- a/management-dashboard-web-app/src/components/ScheduleModal.tsx +++ b/management-dashboard-web-app/src/components/ScheduleModal.tsx @@ -94,7 +94,7 @@ export function ScheduleModal({ experiment, onClose, onScheduleUpdated }: Schedu return (
e.stopPropagation()}> diff --git a/management-dashboard-web-app/src/components/Scheduling.tsx b/management-dashboard-web-app/src/components/Scheduling.tsx index 81e14dd..4ebbc4e 100644 --- a/management-dashboard-web-app/src/components/Scheduling.tsx +++ b/management-dashboard-web-app/src/components/Scheduling.tsx @@ -362,52 +362,40 @@ function AvailabilityCalendar({ user }: { user: User }) { } ]) - const [selectedDate, setSelectedDate] = useState(null) - const [showTimeSlotForm, setShowTimeSlotForm] = useState(false) - const [newTimeSlot, setNewTimeSlot] = useState({ - startTime: '09:00', - endTime: '17:00', - title: 'Available' + const [selectedDate, setSelectedDate] = useState(null) + const [showTimeSlotForm, setShowTimeSlotForm] = useState(false) + const [newTimeSlot, setNewTimeSlot] = useState({ + startTime: '09:00', + endTime: '17:00' + }) + const [currentView, setCurrentView] = useState(Views.MONTH) + + const eventStyleGetter = (event: CalendarEvent) => { + return { + style: { + backgroundColor: '#10b981', // green-500 for available + borderColor: '#10b981', + color: 'white', + borderRadius: '4px', + border: 'none', + display: 'block' + } + } + } + + const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => { + // Set the selected date and show the time slot form + setSelectedDate(start) + setShowTimeSlotForm(true) + + // Pre-fill the form with the selected time range + const startTime = moment(start).format('HH:mm') + const endTime = moment(end).format('HH:mm') + setNewTimeSlot({ + startTime, + endTime }) - - const eventStyleGetter = (event: CalendarEvent) => { - let backgroundColor = '#3174ad' - let borderColor = '#3174ad' - - if (event.resource === 'available') { - backgroundColor = '#10b981' // green-500 - borderColor = '#10b981' - } else if (event.resource === 'unavailable') { - backgroundColor = '#ef4444' // red-500 - borderColor = '#ef4444' - } - - return { - style: { - backgroundColor, - borderColor, - color: 'white', - borderRadius: '4px', - border: 'none', - display: 'block' - } - } - } - - const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => { - // Set the selected date and show the time slot form - setSelectedDate(start) - setShowTimeSlotForm(true) - - // Pre-fill the form with the selected time range - const startTime = moment(start).format('HH:mm') - const endTime = moment(end).format('HH:mm') - setNewTimeSlot({ - startTime, - endTime, - title: 'Available' - }) - } + } const handleSelectEvent = (event: CalendarEvent) => { if (window.confirm('Do you want to remove this availability?')) { @@ -495,10 +483,35 @@ function AvailabilityCalendar({ user }: { user: User }) {
- {/* Time Slot Form Modal */} - {showTimeSlotForm && selectedDate && ( -
-
+ {/* Time Slot Form Modal */} + {showTimeSlotForm && selectedDate && ( +
+
+
e.stopPropagation()}> + {/* Close Button */} + +

Add Availability for {moment(selectedDate).format('MMMM D, YYYY')}

diff --git a/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx b/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx index 8a891d7..e5ed533 100755 --- a/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx +++ b/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx @@ -5,7 +5,6 @@ * Provides page navigation with first/last, previous/next, and numbered page buttons. */ -import React from 'react'; import { type PaginationProps } from '../types'; export const Pagination: React.FC = ({ diff --git a/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx b/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx index a471567..6d6d8f3 100755 --- a/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx +++ b/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx @@ -4,7 +4,6 @@ * A reusable card component for displaying video information with thumbnail, metadata, and actions. */ -import React from 'react'; import { type VideoCardProps } from '../types'; import { VideoThumbnail } from './VideoThumbnail'; import { diff --git a/management-dashboard-web-app/vite.config.ts b/management-dashboard-web-app/vite.config.ts index c8c46f5..967a5c6 100755 --- a/management-dashboard-web-app/vite.config.ts +++ b/management-dashboard-web-app/vite.config.ts @@ -5,7 +5,9 @@ import tailwindcss from '@tailwindcss/vite' // https://vite.dev/config/ export default defineConfig({ plugins: [ - react(), + react({ + jsxRuntime: 'automatic' + }), tailwindcss(), ], server: {