feat: restyle custom events modal (#1062)

Co-authored-by: Kevin Wu <[email protected]>
icssc · Jan 10, 2025 · c9ae1af · c9ae1af
1 parent e73280a
commit c9ae1af
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 68 deletions.
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
@@ -4,10 +4,9 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     FormControl,
     IconButton,
-    Input,
-    InputLabel,
     TextField,
     Tooltip,
 } from '@mui/material';
@@ -140,6 +139,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
     }, []);
 
     const isDark = useThemeStore.getState().isDark;
+
     return (
         <>
             {props.customEvent ? (
@@ -167,42 +167,52 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                     </IconButton>
                 </Tooltip>
             )}
-            <Dialog open={open} onClose={handleClose} maxWidth={'lg'}>
-                <DialogContent>
-                    <FormControl>
-                        <InputLabel htmlFor="EventNameInput">Event Name</InputLabel>
-                        <Input required={true} value={title} onChange={handleEventNameChange} />
+            <Dialog open={open} onClose={handleClose} maxWidth={'xs'}>
+                <DialogTitle id="form-dialog-title">
+                    {props.customEvent ? 'Edit a Custom Event' : 'Add a Custom Event'}
+                </DialogTitle>
+                <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                    <FormControl fullWidth>
+                        <TextField
+                            id="event-name-input"
+                            label="Event Name"
+                            variant="outlined"
+                            required={true}
+                            value={title}
+                            onChange={handleEventNameChange}
+                            margin="dense"
+                        />
                     </FormControl>
-                    <form noValidate style={{ display: 'flex', gap: 5, marginTop: 5 }}>
+                    <FormControl fullWidth sx={{ display: 'flex', flexDirection: 'row', gap: '12px' }}>
                         <TextField
                             onChange={handleStartTimeChange}
                             label="Start Time"
                             type="time"
                             defaultValue={start}
+                            fullWidth
                             InputLabelProps={{
                                 shrink: true,
                             }}
                             inputProps={{
                                 step: 300,
                             }}
-                            style={{ marginRight: 5, marginTop: 5 }}
                         />
                         <TextField
                             onChange={handleEndTimeChange}
                             label="End Time"
                             type="time"
                             defaultValue={end}
+                            fullWidth
                             InputLabelProps={{
                                 shrink: true,
                             }}
                             inputProps={{
                                 step: 300,
                             }}
-                            style={{ marginRight: 5, marginTop: 5 }}
                         />
-                    </form>
+                    </FormControl>
                     <DaySelector onSelectDay={handleDayChange} days={props.customEvent?.days} />
-                    <BuildingSelect value={building} onChange={handleBuildingChange} />
+                    <BuildingSelect value={building} onChange={handleBuildingChange} variant="outlined" />
                     <ScheduleSelector
                         scheduleIndices={scheduleIndices}
                         onSelectScheduleIndices={handleSelectScheduleIndices}
@@ -216,11 +226,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} variant="contained" color="primary" disabled={disabled}>
-                        {disabled
-                            ? 'Schedule and day must be checked'
-                            : props.customEvent
-                              ? 'Save Changes'
-                              : 'Add Event'}
+                        {disabled ? 'Specify schedule and day' : props.customEvent ? 'Save Changes' : 'Add Event'}
                     </Button>
                 </DialogActions>
             </Dialog>

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/DaySelector.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/DaySelector.tsx
@@ -1,8 +1,6 @@
 import { Button, Box } from '@material-ui/core';
 import { useEffect, useState } from 'react';
 
-import { useThemeStore } from '$stores/SettingsStore';
-
 const normal_days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
 interface DaySelectorProps {
@@ -13,8 +11,6 @@ interface DaySelectorProps {
 const DaySelector = ({ days = [false, false, false, false, false, false, false], onSelectDay }: DaySelectorProps) => {
     const [selectedDays, setSelectedDays] = useState(days);
 
-    const { isDark } = useThemeStore();
-
     useEffect(() => {
         onSelectDay(selectedDays);
     }, [onSelectDay, selectedDays]);
@@ -30,24 +26,23 @@ const DaySelector = ({ days = [false, false, false, false, false, false, false],
             sx={{
                 display: 'flex',
                 flexDirection: 'row',
-                justifyContent: 'center',
-                padding: 5,
+                justifyContent: 'space-between',
             }}
+            style={{ gap: '12px' }}
         >
             {normal_days.map((day, index) => (
                 <Button
                     key={index}
                     variant={selectedDays[index] ? 'contained' : 'outlined'}
                     size="small"
-                    onClick={() => {
-                        handleChange(index);
-                    }}
-                    color={isDark ? 'default' : 'primary'}
+                    fullWidth
+                    onClick={() => handleChange(index)}
+                    color={'default'}
                     style={{
-                        margin: 5,
-                        maxWidth: 40,
-                        minWidth: 40,
-                        aspectRatio: 1,
+                        display: 'block',
+                        aspectRatio: 1 / 1,
+                        minWidth: 20,
+                        minHeight: 40,
                     }}
                 >
                     {day[0]}

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/ScheduleSelector.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/ScheduleSelector.tsx
@@ -1,6 +1,10 @@
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import FormControl from '@material-ui/core/FormControl';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import type { RepeatingCustomEvent } from '@packages/antalmanac-types';
 import { PureComponent } from 'react';
 
@@ -20,43 +24,44 @@ class ScheduleSelector extends PureComponent<ScheduleSelectorProps, ScheduleSele
         scheduleIndices: this.props.scheduleIndices,
     };
 
-    handleChange = (dayIndex: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const checked = event.target.checked;
+    handleChange = (event: SelectChangeEvent<typeof this.state.scheduleIndices>) => {
+        const value = event.target.value as number[];
 
-        this.setState(
-            (prevState) => {
-                const newScheduleIndices = checked
-                    ? [...prevState.scheduleIndices, dayIndex]
-                    : prevState.scheduleIndices.filter((scheduleIndex) => {
-                          return scheduleIndex !== dayIndex;
-                      });
-
-                return { scheduleIndices: newScheduleIndices };
-            },
-            () => this.props.onSelectScheduleIndices(this.state.scheduleIndices)
-        );
+        this.setState({ scheduleIndices: value }, () => this.props.onSelectScheduleIndices(this.state.scheduleIndices));
     };
 
     render() {
         return (
-            <FormGroup row>
-                {this.props.scheduleNames.map((name, index) => {
-                    return (
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={this.state.scheduleIndices.includes(index)}
-                                    onChange={this.handleChange(index)}
-                                    value={index + 1}
-                                    color="primary"
-                                />
-                            }
-                            label={name}
-                            key={name}
-                        />
-                    );
-                })}
-            </FormGroup>
+            <FormControl style={{ maxWidth: 400 }} fullWidth variant="outlined">
+                <InputLabel id="schedule-select-label" htmlFor="select-multiple-chip">
+                    Select schedules
+                </InputLabel>
+                <Select
+                    labelId="schedule-select-label"
+                    id="schedule-select"
+                    size="small"
+                    multiple
+                    value={this.state.scheduleIndices}
+                    defaultValue={this.state.scheduleIndices}
+                    onChange={this.handleChange}
+                    input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
+                    renderValue={(selected) => (
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                            {selected.map((value: number) => {
+                                return <Chip key={value} label={this.props.scheduleNames[value]} />;
+                            })}
+                        </Box>
+                    )}
+                >
+                    {this.props.scheduleNames.map((name: string, index: number) => {
+                        return (
+                            <MenuItem key={index} value={index}>
+                                {name}
+                            </MenuItem>
+                        );
+                    })}
+                </Select>
+            </FormControl>
         );
     }
 }

diff --git a/apps/antalmanac/src/components/Map/Map.tsx b/apps/antalmanac/src/components/Map/Map.tsx
@@ -310,7 +310,7 @@ export default function CourseMap() {
                             <Tab key={day} label={day} sx={{ padding: 1, minHeight: 'auto', minWidth: '10%' }} />
                         ))}
                     </Tabs>
-                    <BuildingSelect onChange={onBuildingChange} />
+                    <BuildingSelect onChange={onBuildingChange} variant="filled" />
                 </Paper>
 
                 <TileLayer

diff --git a/apps/antalmanac/src/components/inputs/building-select.tsx b/apps/antalmanac/src/components/inputs/building-select.tsx
@@ -21,6 +21,7 @@ const buildings: ExtendedBuilding[] = Object.entries(buildingCatalogue)
 export type BuildingSelectProps = {
     value?: string;
     onChange?: (building?: ExtendedBuilding | null) => unknown;
+    variant?: 'standard' | 'filled' | 'outlined' | undefined;
 };
 
 export function BuildingSelect(props: BuildingSelectProps) {
@@ -53,7 +54,7 @@ export function BuildingSelect(props: BuildingSelectProps) {
             isOptionEqualToValue={(option, value) => option.id === value?.id}
             getOptionLabel={(option) => option.name ?? ''}
             onChange={handleChange}
-            renderInput={(params) => <TextField {...params} label="Search for a place" variant="filled" />}
+            renderInput={(params) => <TextField {...params} label="Search for a place" variant={props.variant} />}
         />
     );
 }