#4032 simplified modal notif + added popup visual

Author: cielbellerose

src/frontend/src/pages/CalendarPage/Components/EventModal.tsx

@@ -1160,30 +1160,36 @@ const EventModal: React.FC<BaseEventModalProps> = ({
           {/* Notification Section */}
           {selectedEventType && (
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-              <NotificationsIcon
-                sx={{ color: selectedEventType.sendSlackNotifications ? 'text.secondary' : 'text.disabled' }}
-              />
+              <NotificationsIcon sx={{ color: 'text.secondary' }} />
               <Tooltip
                 arrow
                 placement="right"
                 title={
                   !selectedEventType.sendSlackNotifications
                     ? 'Slack notifications are disabled for this event type.'
-                    : !selectedTeams.length && !workPackageIds.length
-                      ? ''
-                      : 'Slack notifications will be sent for this event.'
+                    : selectedTeams.length || workPackageIds.length
+                      ? 'Slack notifications will be sent for this event.'
+                      : ''
                 }
               >
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, cursor: 'default' }}>
-                  <NERSwitch checked={selectedEventType.sendSlackNotifications} disabled />
-                  {selectedEventType.sendSlackNotifications && !selectedTeams.length && !workPackageIds.length ? (
+                  <Typography variant="body2" color={'text.disabled'} fontWeight={500}>
+                    {selectedEventType.sendSlackNotifications ? 'On' : 'Off'}
+                  </Typography>
+                  {selectedEventType.sendSlackNotifications && !selectedTeams.length && !workPackageIds.length && (
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                       <WarningAmberIcon sx={{ color: 'error.main', fontSize: 18 }} />
                       <Typography variant="body2" color="error.main">
-                        Add a team or work package to send notifications
+                        Add{' '}
+                        {selectedEventType.teams && selectedEventType.workPackage
+                          ? 'a team or work package'
+                          : selectedEventType.teams
+                            ? 'a team'
+                            : 'a work package'}{' '}
+                        to send notifications
                       </Typography>
                     </Box>
-                  ) : null}
+                  )}
                 </Box>
               </Tooltip>
             </Box>

src/frontend/src/pages/CalendarPage/EventClickPopup.tsx

@@ -39,7 +39,7 @@ import EditEventModal from './Components/EditEventModal';
 import DeleteSeriesConfirmationModal from './Components/DeleteSeriesConfirmationModal';
 import { useToast } from '../../hooks/toasts.hooks';
 import NERDeleteModal from '../../components/NERDeleteModal';
-
+import NotificationsIcon from '@mui/icons-material/Notifications';
 import { getPendingReason } from '../../utils/calendar.utils';
 
 export const getStatusIcon = (status: string, isLarge?: boolean) => {
@@ -436,6 +436,9 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
             <Typography variant="body2" sx={{ flex: 1 }}>
               <b>Status:</b> {event.status}
             </Typography>
+            {specificEventType?.sendSlackNotifications && (event.teams.length > 0 || event.workPackages.length > 0) && (
+              <NotificationsIcon sx={{ color: 'white', fontSize: 18, mt: '3px', flexShrink: 0 }} />
+            )}
           </Stack>
         )}