show all events toggle outside of filter modal

Author: chpy04

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

@@ -14,7 +14,8 @@ import {
   Alert,
   Checkbox,
   FormControlLabel,
-  FormGroup
+  FormGroup,
+  Switch
 } from '@mui/material';
 import PageLayout from '../../components/PageLayout';
 import { Calendar, ConflictStatus, DayOfWeek, EventType, Event } from 'shared';
@@ -709,28 +710,42 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({
                   Calendars:
                 </Typography>
 
-                <Button
-                  size="small"
-                  variant="outlined"
-                  id="filter-events-button"
-                  onClick={() => setOpenFilterModal(true)}
-                  sx={{
-                    px: 1,
-                    py: 0,
-                    color: 'white',
-                    borderColor: 'white',
-                    backgroundColor: 'transparent',
-                    textTransform: 'none',
-                    fontSize: 14,
-                    fontFamily: (t) => t.typography.h4.fontFamily,
-                    '&:hover': {
-                      borderColor: 'white',
-                      backgroundColor: 'rgba(255, 255, 255, 0.1)'
+                <Stack direction="row" spacing={1} alignItems="center">
+                  <FormControlLabel
+                    control={
+                      <Switch size="small" checked={allEventsMode} onChange={(e) => setAllEventsMode(e.target.checked)} />
                     }
-                  }}
-                >
-                  Filters
-                </Button>
+                    label={<Typography sx={{ fontSize: 12, color: 'white', whiteSpace: 'nowrap' }}>All Events</Typography>}
+                    sx={{ mr: 0 }}
+                  />
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    id="filter-events-button"
+                    disabled={allEventsMode}
+                    onClick={() => setOpenFilterModal(true)}
+                    sx={{
+                      px: 1,
+                      py: 0,
+                      color: 'white',
+                      borderColor: 'white',
+                      backgroundColor: 'transparent',
+                      textTransform: 'none',
+                      fontSize: 14,
+                      fontFamily: (t) => t.typography.h4.fontFamily,
+                      '&:hover': {
+                        borderColor: 'white',
+                        backgroundColor: 'rgba(255, 255, 255, 0.1)'
+                      },
+                      '&.Mui-disabled': {
+                        color: 'rgba(255, 255, 255, 0.3)',
+                        borderColor: 'rgba(255, 255, 255, 0.3)'
+                      }
+                    }}
+                  >
+                    Filters
+                  </Button>
+                </Stack>
               </Stack>
 
               {calendars.length > 0 && (
@@ -810,7 +825,6 @@ const NewCalendarPage: React.FC<NewCalendarPageProps> = ({
           setTeamIds={(ids: string[]) => setTeamIds(ids)}
           setShowInvited={(changed: boolean) => updateAdditionalMemberIds(changed)}
           setShowTeam={(changed: boolean) => updateAdditionalTeamIds(changed)}
-          setAllEventsMode={(enabled: boolean) => setAllEventsMode(enabled)}
         />
       </PageLayout>
     </>

src/frontend/src/pages/CalendarPage/FilterModal.tsx

@@ -1,15 +1,5 @@
 import React, { useState } from 'react';
-import {
-  Autocomplete,
-  Box,
-  Button,
-  Checkbox,
-  FormControlLabel,
-  Switch,
-  TextField,
-  Typography,
-  useTheme
-} from '@mui/material';
+import { Autocomplete, Box, Button, Checkbox, TextField, Typography } from '@mui/material';
 import NERModal from '../../components/NERModal';
 import PeopleIcon from '@mui/icons-material/People';
 import { useAllUsers, useCurrentUser } from '../../hooks/users.hooks';
@@ -32,7 +22,6 @@ export interface BaseFilterModalProps {
   setTeamIds: (ids: string[]) => void;
   setShowInvited: (changed: boolean) => void;
   setShowTeam: (changed: boolean) => void;
-  setAllEventsMode: (enabled: boolean) => void;
 }
 
 const FilterModal: React.FC<BaseFilterModalProps> = ({
@@ -42,14 +31,11 @@ const FilterModal: React.FC<BaseFilterModalProps> = ({
   setMemberIds,
   setTeamIds,
   setShowInvited,
-  setShowTeam,
-  setAllEventsMode
+  setShowTeam
 }) => {
   const [dropDownMembersOpen, setDropDownMembersOpen] = useState(false);
   const [dropDownTeamOpen, setDropDownTeamOpen] = useState(false);
   const currUser = useCurrentUser();
-  const theme = useTheme();
-  const allEventsMode = filterValues?.allEventsMode ?? false;
 
   const MemberDropdown = () => {
     const memberIds = filterValues?.memberIds ?? [];
@@ -284,26 +270,7 @@ const FilterModal: React.FC<BaseFilterModalProps> = ({
       formId="shop-form"
       showCloseButton
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={allEventsMode}
-              onChange={(e) => setAllEventsMode(e.target.checked)}
-              sx={{
-                '& .MuiSwitch-switchBase.Mui-checked': {
-                  color: theme.palette.primary.main
-                },
-                '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                  backgroundColor: theme.palette.primary.main
-                }
-              }}
-            />
-          }
-          label={<Typography sx={{ fontSize: 16, color: 'white' }}>Show All Events</Typography>}
-        />
-      </Box>
-      <Box sx={{ opacity: allEventsMode ? 0.5 : 1, pointerEvents: allEventsMode ? 'none' : 'auto' }}>
+      <Box>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <PeopleIcon sx={{ color: 'white', mr: 1 }} />
           <Typography variant="h6">Attendees</Typography>