Restyled modal

Fixed spacing and layout of event modal
icssc · Nov 20, 2024 · 71be348 · 71be348
1 parent ea3f291
commit 71be348
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 31 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';
@@ -167,38 +166,50 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                     </IconButton>
                 </Tooltip>
             )}
-            <Dialog open={open} onClose={handleClose} maxWidth={'lg'}>
+            <Dialog open={open} onClose={handleClose} maxWidth={'xs'}>
+                <DialogTitle id="form-dialog-title" style={{ marginBottom: -10 }}>
+                    Add a Custom Event
+                </DialogTitle>
                 <DialogContent>
-                    <FormControl>
-                        <InputLabel htmlFor="EventNameInput">Event Name</InputLabel>
-                        <Input required={true} value={title} onChange={handleEventNameChange} />
+                    <FormControl fullWidth>
+                        <TextField
+                            id="outlined-basic"
+                            label="Event Name"
+                            variant="outlined"
+                            required={true}
+                            value={title}
+                            onChange={handleEventNameChange}
+                            style={{ marginTop: 10, width: '100%' }}
+                        />
                     </FormControl>
-                    <form noValidate style={{ display: 'flex', gap: 5, marginTop: 5 }}>
+                    <form noValidate style={{ display: 'flex', gap: 0, marginTop: 10 }}>
                         <TextField
                             onChange={handleStartTimeChange}
                             label="Start Time"
                             type="time"
                             defaultValue={start}
+                            fullWidth
                             InputLabelProps={{
                                 shrink: true,
                             }}
                             inputProps={{
                                 step: 300,
                             }}
-                            style={{ marginRight: 5, marginTop: 5 }}
+                            style={{ marginRight: 5, marginTop: 10 }}
                         />
                         <TextField
                             onChange={handleEndTimeChange}
                             label="End Time"
                             type="time"
                             defaultValue={end}
+                            fullWidth
                             InputLabelProps={{
                                 shrink: true,
                             }}
                             inputProps={{
                                 step: 300,
                             }}
-                            style={{ marginRight: 5, marginTop: 5 }}
+                            style={{ marginTop: 10 }}
                         />
                     </form>
                     <DaySelector onSelectDay={handleDayChange} days={props.customEvent?.days} />
@@ -211,7 +222,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                     />
                 </DialogContent>
 
-                <DialogActions>
+                <DialogActions style={{ padding: '0px 16px 16px' }}>
                     <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/DaySelector.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/DaySelector.tsx
@@ -30,8 +30,11 @@ const DaySelector = ({ days = [false, false, false, false, false, false, false],
             sx={{
                 display: 'flex',
                 flexDirection: 'row',
-                justifyContent: 'center',
-                padding: 5,
+                justifyContent: 'space-evenly',
+                marginTop: 10,
+                marginBottom: 10,
+                marginLeft: -5,
+                marginRight: -5,
             }}
         >
             {normal_days.map((day, index) => (
@@ -45,8 +48,9 @@ const DaySelector = ({ days = [false, false, false, false, false, false, false],
                     color={isDark ? 'default' : 'primary'}
                     style={{
                         margin: 5,
+                        width: 40,
                         maxWidth: 40,
-                        minWidth: 40,
+                        minWidth: 20,
                         aspectRatio: 1,
                     }}
                 >

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,8 @@
 import Checkbox from '@material-ui/core/Checkbox';
+import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormGroup from '@material-ui/core/FormGroup';
+import FormLabel from '@material-ui/core/FormLabel';
 import type { RepeatingCustomEvent } from '@packages/antalmanac-types';
 import { PureComponent } from 'react';
 
@@ -39,24 +41,29 @@ class ScheduleSelector extends PureComponent<ScheduleSelectorProps, ScheduleSele
 
     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={{ marginTop: 10 }}>
+                <FormLabel component="legend" style={{ marginTop: 10 }}>
+                    Select schedules
+                </FormLabel>
+                <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>
         );
     }
 }