From b19bca49f040882e412dfc24f196974de2c381b3 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Thu, 23 Jan 2025 12:10:08 -0800
Subject: [PATCH 01/12] Init Commit + Notes + Example Input

---
 .../components/manageProjects/eventForm.jsx   | 49 +++++++++++++------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/client/src/components/manageProjects/eventForm.jsx b/client/src/components/manageProjects/eventForm.jsx
index f075575dd..a7bb40616 100644
--- a/client/src/components/manageProjects/eventForm.jsx
+++ b/client/src/components/manageProjects/eventForm.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { createClockHours } from '../../utils/createClockHours';
+import { TextField } from '@mui/material';
 import '../../sass/ManageProjects.scss';
 
 const EventForm = ({
@@ -14,20 +15,36 @@ const EventForm = ({
   return (
     <div className="event-form-box">
       {title && <h3 className="event-form-title">{title}</h3>}
-      <label className="event-form-label" htmlFor="name">
-        Event Name:
-        <input
-          id="name"
-          placeholder="Meeting name..."
-          name="name"
-          value={formValues.name}
-          onChange={handleInputChange}
-          maxLength={30}
-        />
-        {formErrors?.name &&
-          <div className="event-form-error">{formErrors.name}</div>
-        }
-      </label>
+
+      <TextField
+        required
+        variant="standard"
+        autoComplete="off"
+        helperText={formErrors?.name ? formErrors?.name : ''}
+        error={formErrors?.name}
+        id="name"
+        label="Event Name:"
+        placeholder="Meeting name..."
+        /**
+         * Global styles are overriding Material UI components and leading to odd padding and widths
+         * Resetting styles on component is not a good workaround because it resets MUI CSS
+         * Need to refactor to reusable input component so customized MUI component lives in one place
+         * Need to refactor global css to apply only for the components it's meant for
+         */
+
+        // Negate Global style for event-form-box until all components are refactored
+        // InputProps={{
+        //   inputProps: {
+        //     style: {
+        //       all: 'unset', // Unsets custom/global styles
+        //     },
+        //   },
+        // }}
+        sx={{
+          label: { fontFamily: 'aliseoregular', fontSize: '1rem' },
+        }}
+      />
+
       <div className="event-form-row">
         <label className="event-form-label" htmlFor="eventType">
           Event Type:
@@ -116,11 +133,11 @@ const EventForm = ({
           value={formValues.videoConferenceLink}
           onChange={handleInputChange}
         />
-        {formErrors?.videoConferenceLink &&
+        {formErrors?.videoConferenceLink && (
           <div className="event-form-error">
             {formErrors.videoConferenceLink}
           </div>
-        }
+        )}
       </label>
 
       {children}

From a752351e7e749d5fb93511172ac8042d43036b35 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Tue, 28 Jan 2025 18:39:43 -0800
Subject: [PATCH 02/12] Clean up + CSS Refactor + Full MUI Event Form

---
 .../manageProjects/createNewEvent.jsx         |   3 +-
 .../components/manageProjects/eventForm.jsx   | 148 ------------------
 .../manageProjects/eventForm/EventForm.scss   |  27 ++++
 .../manageProjects/eventForm/eventForm.jsx    | 136 ++++++++++++++++
 .../manageProjects/eventForm/index.ts         |   1 +
 client/src/sass/CheckIn.scss                  |  59 +++----
 client/src/sass/ManageProjects.scss           |  68 --------
 7 files changed, 197 insertions(+), 245 deletions(-)
 delete mode 100644 client/src/components/manageProjects/eventForm.jsx
 create mode 100644 client/src/components/manageProjects/eventForm/EventForm.scss
 create mode 100644 client/src/components/manageProjects/eventForm/eventForm.jsx
 create mode 100644 client/src/components/manageProjects/eventForm/index.ts

diff --git a/client/src/components/manageProjects/createNewEvent.jsx b/client/src/components/manageProjects/createNewEvent.jsx
index a74c8526d..3ae80103b 100644
--- a/client/src/components/manageProjects/createNewEvent.jsx
+++ b/client/src/components/manageProjects/createNewEvent.jsx
@@ -5,7 +5,7 @@ import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
 import { addDurationToTime } from './utilities/addDurationToTime';
 import { timeConvertFromForm } from './utilities/timeConvertFromForm';
 import validateEventForm from './utilities/validateEventForm';
-import EventForm from './eventForm';
+import EventForm from './eventForm/eventForm';
 
 const CreateNewEvent = ({
   projectToEdit,
@@ -30,6 +30,7 @@ const CreateNewEvent = ({
   // Handle form input changes
   const handleInputChange = (event) => {
     setFormValues({ ...formValues, [event.target.name]: event.target.value });
+    console.log(event.target.value);
   };
 
   const handleEventCreate = () => {
diff --git a/client/src/components/manageProjects/eventForm.jsx b/client/src/components/manageProjects/eventForm.jsx
deleted file mode 100644
index a7bb40616..000000000
--- a/client/src/components/manageProjects/eventForm.jsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from 'react';
-import { createClockHours } from '../../utils/createClockHours';
-import { TextField } from '@mui/material';
-import '../../sass/ManageProjects.scss';
-
-const EventForm = ({
-  title,
-  formValues,
-  formErrors,
-  handleInputChange,
-  children,
-}) => {
-  // This creates the clock hours for the form
-  const clockHours = createClockHours();
-  return (
-    <div className="event-form-box">
-      {title && <h3 className="event-form-title">{title}</h3>}
-
-      <TextField
-        required
-        variant="standard"
-        autoComplete="off"
-        helperText={formErrors?.name ? formErrors?.name : ''}
-        error={formErrors?.name}
-        id="name"
-        label="Event Name:"
-        placeholder="Meeting name..."
-        /**
-         * Global styles are overriding Material UI components and leading to odd padding and widths
-         * Resetting styles on component is not a good workaround because it resets MUI CSS
-         * Need to refactor to reusable input component so customized MUI component lives in one place
-         * Need to refactor global css to apply only for the components it's meant for
-         */
-
-        // Negate Global style for event-form-box until all components are refactored
-        // InputProps={{
-        //   inputProps: {
-        //     style: {
-        //       all: 'unset', // Unsets custom/global styles
-        //     },
-        //   },
-        // }}
-        sx={{
-          label: { fontFamily: 'aliseoregular', fontSize: '1rem' },
-        }}
-      />
-
-      <div className="event-form-row">
-        <label className="event-form-label" htmlFor="eventType">
-          Event Type:
-          <select
-            id="eventType"
-            value={formValues.eventType}
-            onChange={handleInputChange}
-            name="eventType"
-          >
-            <option value="Team Meeting">Team Meeting</option>
-            <option value="Onboarding">Onboarding</option>
-          </select>
-        </label>
-        <label className="event-form-label" htmlFor="day">
-          Day of the Week:
-          <select
-            id="day"
-            value={formValues.day}
-            onChange={handleInputChange}
-            name="day"
-          >
-            <option value="0">Sunday</option>
-            <option value="1">Monday</option>
-            <option value="2">Tuesday</option>
-            <option value="3">Wednesday</option>
-            <option value="4">Thursday</option>
-            <option value="5">Friday</option>
-            <option value="6">Saturday</option>
-          </select>
-        </label>
-      </div>
-      <div className="event-form-row">
-        <label className="event-form-label" htmlFor="startTime">
-          Start Time:
-          <select
-            id="startTime"
-            value={formValues.startTime}
-            onChange={handleInputChange}
-            name="startTime"
-          >
-            {clockHours.map((value) => {
-              return (
-                <option key={value} value={value}>
-                  {value}
-                </option>
-              );
-            })}
-          </select>
-        </label>
-        <label className="event-form-label" htmlFor="duration">
-          Duration:
-          <select
-            id="duration"
-            value={formValues.duration}
-            onChange={handleInputChange}
-            name="duration"
-          >
-            <option value=".5">.5</option>
-            <option value="1">1</option>
-            <option value="1.5">1.5</option>
-            <option value="2">2</option>
-            <option value="2.5">2.5</option>
-            <option value="3">3</option>
-            <option value="3.5">3.5</option>
-            <option value="4">4</option>
-          </select>
-        </label>
-      </div>
-      <label className="event-form-label" htmlFor="description">
-        Description:
-        <input
-          id="description"
-          placeholder="Meeting description..."
-          name="description"
-          value={formValues.description}
-          onChange={handleInputChange}
-          maxLength={60}
-        />
-      </label>
-      <label className="event-form-label" htmlFor="videoConferenceLink">
-        Event Link:
-        <input
-          id="videoConferenceLink"
-          placeholder="Enter meeting url..."
-          name="videoConferenceLink"
-          value={formValues.videoConferenceLink}
-          onChange={handleInputChange}
-        />
-        {formErrors?.videoConferenceLink && (
-          <div className="event-form-error">
-            {formErrors.videoConferenceLink}
-          </div>
-        )}
-      </label>
-
-      {children}
-    </div>
-  );
-};
-
-export default EventForm;
diff --git a/client/src/components/manageProjects/eventForm/EventForm.scss b/client/src/components/manageProjects/eventForm/EventForm.scss
new file mode 100644
index 000000000..a1f220281
--- /dev/null
+++ b/client/src/components/manageProjects/eventForm/EventForm.scss
@@ -0,0 +1,27 @@
+.event-form-box {
+  min-width: 100%;
+  min-height: 540px;
+  padding: 10px;
+  position: relative;
+  border: solid black 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: white;
+}
+
+.event-form-title {
+  font-size: 20px;
+}
+
+.event-form-row {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+
+.event-form-error {
+  color: red;
+  margin-bottom: 10px;
+}
+
diff --git a/client/src/components/manageProjects/eventForm/eventForm.jsx b/client/src/components/manageProjects/eventForm/eventForm.jsx
new file mode 100644
index 000000000..0d88c999a
--- /dev/null
+++ b/client/src/components/manageProjects/eventForm/eventForm.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { createClockHours } from '../../../utils/createClockHours';
+import {
+  TextField,
+  MenuItem,
+  Select,
+  InputLabel,
+  FormControl,
+  Box,
+} from '@mui/material';
+import './EventForm.scss';
+
+const EventForm = ({
+  title,
+  formValues,
+  formErrors,
+  handleInputChange,
+  children,
+}) => {
+  // This creates the clock hours for the form
+  const clockHours = createClockHours();
+
+  return (
+    <div className="event-form-box">
+      {title && <h3 className="event-form-title">{title}</h3>}
+      <TextField
+        required
+        helperText={formErrors?.name ? formErrors?.name : ''}
+        error={formErrors?.name}
+        id="name"
+        label="Event Name:"
+        placeholder="Meeting name..."
+      />
+      <div className="event-form-row">
+        <FormControl fullWidth>
+          <InputLabel id="event-type-label">Event Type</InputLabel>
+          <Select
+            labelId="event-type-label"
+            name="eventType"
+            value={formValues.eventType}
+            label="Event Type"
+            onChange={handleInputChange}
+          >
+            <MenuItem value="Team Meeting">Team Meeting</MenuItem>
+            <MenuItem value="Onboarding">Onboarding</MenuItem>
+          </Select>
+        </FormControl>
+        <FormControl fullWidth>
+          <InputLabel id="day-input-label">Day of the Week</InputLabel>
+          <Select
+            labelId="day-input-label"
+            id="day-input"
+            name="day"
+            value={formValues.day}
+            label="Day of the Week"
+            onChange={handleInputChange}
+          >
+            <MenuItem value="0">Sunday</MenuItem>
+            <MenuItem value="1">Monday</MenuItem>
+            <MenuItem value="2">Tuesday</MenuItem>
+            <MenuItem value="3">Wednesday</MenuItem>
+            <MenuItem value="4">Thursday</MenuItem>
+            <MenuItem value="5">Friday</MenuItem>
+            <MenuItem value="6">Saturday</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+      <div className="event-form-row">
+        <FormControl fullWidth>
+          <InputLabel id="start-time-label">Start Time</InputLabel>
+          <Select
+            labelId="start-time-label"
+            name="startTime"
+            value={formValues.startTime}
+            label="Start Time"
+            onChange={handleInputChange}
+          >
+            {clockHours.map((value) => {
+              return (
+                <MenuItem key={value} value={value}>
+                  {value}
+                </MenuItem>
+              );
+            })}
+          </Select>
+        </FormControl>
+        <FormControl fullWidth>
+          <InputLabel id="duration-label">Duration</InputLabel>
+          <Select
+            labelId="duration-label"
+            id="duration"
+            name="duration"
+            value={formValues.duration}
+            label="Duration"
+            onChange={handleInputChange}
+          >
+            <MenuItem value=".5">.5</MenuItem>
+            <MenuItem value="1">1</MenuItem>
+            <MenuItem value="1.5">1.5</MenuItem>
+            <MenuItem value="2">2</MenuItem>
+            <MenuItem value="2.5">2.5</MenuItem>
+            <MenuItem value="3">3</MenuItem>
+            <MenuItem value="3.5">3.5</MenuItem>
+            <MenuItem value="4">4</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+      <div className="event-form-row">
+        <TextField
+          id="Description"
+          label="Description"
+          variant="outlined"
+          name="description"
+          fullWidth
+          value={formValues.description}
+          onChange={handleInputChange}
+        />
+      </div>
+      <div className="event-form-row">
+        <TextField
+          id="Meeting URL"
+          label="Meeting URL"
+          variant="outlined"
+          name="videoConferenceLink"
+          fullWidth
+          value={formValues.videoConferenceLink}
+          onChange={handleInputChange}
+        />
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default EventForm;
diff --git a/client/src/components/manageProjects/eventForm/index.ts b/client/src/components/manageProjects/eventForm/index.ts
new file mode 100644
index 000000000..278568617
--- /dev/null
+++ b/client/src/components/manageProjects/eventForm/index.ts
@@ -0,0 +1 @@
+export { default } from './eventForm';
diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 694f1bd70..b4cca11be 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -62,34 +62,37 @@ label {
     font-weight: bold;
 }
 
-input[type=text], input[type=email] {
-    -webkit-appearance: none;
-    max-width: 310px;
-    width: 310px;
-    height: 36px;
-    outline: none;
-    background-color: inherit;
-    border-top: none;
-    border-right: none;
-    border-bottom: 3px solid black;
-    border-left: none;
-    border-radius: 2px;
-    font-size: 24px;
-    padding: 0 4px;
-    margin: 4px 0px;
-    color: rgb(250, 17, 79);
-    font-weight: bold;
-    transition: all .3s ease-in-out;
-
-    &::placeholder {
-        color: rgb(250, 17, 79);
-        font-weight: 200;
-    }
-
-    &:focus {
-        border-color: rgb(250, 17, 79);
-    }
-}
+// Following styles apply to all text fields including Material UI component <TextField>
+// Global styles help with UI consistency but can lead to style conflicts
+
+// input[type=text], input[type=email] {
+//     -webkit-appearance: none;
+//     max-width: 310px;
+//     width: 310px;
+//     height: 36px;
+//     outline: none;
+//     background-color: inherit;
+//     border-top: none;
+//     border-right: none;
+//     border-bottom: 3px solid black;
+//     border-left: none;
+//     border-radius: 2px;
+//     font-size: 24px;
+//     padding: 0 4px;
+//     margin: 4px 0px;
+//     color: rgb(250, 17, 79);
+//     font-weight: bold;
+//     transition: all .3s ease-in-out;
+
+//     &::placeholder {
+//         color: rgb(250, 17, 79);
+//         font-weight: 200;
+//     }
+
+//     &:focus {
+//         border-color: rgb(250, 17, 79);
+//     }
+// }
 
 input[type=radio] {
     transform: scale(1.8);
diff --git a/client/src/sass/ManageProjects.scss b/client/src/sass/ManageProjects.scss
index 46899a9dc..ebe3914d9 100644
--- a/client/src/sass/ManageProjects.scss
+++ b/client/src/sass/ManageProjects.scss
@@ -218,74 +218,6 @@ div.editable-field {
   background-color: white;
 }
 
-// create new event form on createNewEvent.js
-.event-form-box {
-  min-width: 100%;
-  min-height: 540px;
-  padding: 10px;
-  position: relative;
-  border: solid black 2px;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-}
-
-.event-form-box .event-form-title {
-  font-size: 20px;
-  margin-bottom: 16px;
-}
-
-.event-form-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.event-form-label {
-  display: block;
-  margin-top: 4px;
-  select {
-    display: block;
-  }
-}
-
-.event-form-error {
-  color: red;
-  margin-bottom: 10px;
-}
-
-.event-form-box input,
-textarea {
-  display: block;
-  width: 100%;
-  padding: 2px 0 15px 10px;
-  margin: 5px 0;
-  border: 1px;
-  border-radius: 5px;
-  font-size: 20px;
-  color: black;
-}
-
-.event-form-box select {
-  color: black;
-  width: 140px;
-  padding: 6px;
-  font-size: 16px;
-  font-weight: bold;
-  border: 1px solid black;
-  border-radius: 0px;
-  margin: 12px;
-}
-
-.event-form-box textarea {
-  height: 25px;
-}
-
-.event-form-box label {
-  font-size: 15px;
-  width: 100%;
-  display: block;
-}
-
 .button-box {
   margin-top: 10px;
 }

From cee3a81481c31d3a830919c52df1006d29d5dd4d Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Tue, 28 Jan 2025 21:28:41 -0800
Subject: [PATCH 03/12] Fix text size bug

---
 .../manageProjects/eventForm/EventForm.scss   |   8 +-
 client/src/sass/CheckIn.scss                  | 278 +++++++++---------
 2 files changed, 145 insertions(+), 141 deletions(-)

diff --git a/client/src/components/manageProjects/eventForm/EventForm.scss b/client/src/components/manageProjects/eventForm/EventForm.scss
index a1f220281..38bfee744 100644
--- a/client/src/components/manageProjects/eventForm/EventForm.scss
+++ b/client/src/components/manageProjects/eventForm/EventForm.scss
@@ -8,6 +8,13 @@
   flex-direction: column;
   gap: 20px;
   background-color: white;
+
+  // Resets the label text size
+  // A global variable was interacting with MUI styles and overflowing the label
+  .MuiInputLabel-root {
+    font-size: inherit;
+  }
+
 }
 
 .event-form-title {
@@ -24,4 +31,3 @@
   color: red;
   margin-bottom: 10px;
 }
-
diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index b4cca11be..1151b23e5 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -1,165 +1,163 @@
 .check-in-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
 }
 
 .check-in-headers {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    text-align: left;
-    width: 300px;
-    max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  width: 300px;
+  max-width: 300px;
 }
 
 .check-in-form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 30vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 30vh;
 }
 
 .form-check-in {
-    width: 300px;
-    max-width: 300px;
+  width: 300px;
+  max-width: 300px;
 }
 
 .form-row {
-    max-width: 300px;
-    width: 300px;
-    margin: 6px 0px;
-
-    p {
-        text-align: left;
-        font-weight: bold;
-        letter-spacing: .05em;
-    }
+  max-width: 300px;
+  width: 300px;
+  margin: 6px 0px;
+
+  p {
+    text-align: left;
+    font-weight: bold;
+    letter-spacing: 0.05em;
+  }
 }
 
 .last-row {
-    margin-top: 24px; 
+  margin-top: 24px;
 }
 
 .form-input-text {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    label {
-        font-size: 14px;
-        font-weight: 100px;
-    }
+  label {
+    font-size: 14px;
+    font-weight: 100px;
+  }
 }
 
 label {
-    max-width: 300px;
-    width: 300px;
-    text-align: left;
-    font-size: 20px;
-    font-weight: bold;
+  max-width: 300px;
+  width: 300px;
+  text-align: left;
+  font-size: 20px;
+  font-weight: bold;
 }
 
 // Following styles apply to all text fields including Material UI component <TextField>
 // Global styles help with UI consistency but can lead to style conflicts
 
-// input[type=text], input[type=email] {
-//     -webkit-appearance: none;
-//     max-width: 310px;
-//     width: 310px;
-//     height: 36px;
-//     outline: none;
-//     background-color: inherit;
-//     border-top: none;
-//     border-right: none;
-//     border-bottom: 3px solid black;
-//     border-left: none;
-//     border-radius: 2px;
-//     font-size: 24px;
-//     padding: 0 4px;
-//     margin: 4px 0px;
-//     color: rgb(250, 17, 79);
-//     font-weight: bold;
-//     transition: all .3s ease-in-out;
-
-//     &::placeholder {
-//         color: rgb(250, 17, 79);
-//         font-weight: 200;
-//     }
-
-//     &:focus {
-//         border-color: rgb(250, 17, 79);
-//     }
-// }
-
-input[type=radio] {
-    transform: scale(1.8);
-    margin-right: 24px;
-    margin-top: 8px;
-
-    &:checked {
-        background-color: black;
-        color: black;
-    }
+input[type='text'],
+input[type='email'] {
+  -webkit-appearance: none;
+  // max-width: 310px;
+  // width: 310px;
+  // height: 36px;
+  outline: none;
+  background-color: inherit;
+  border-top: none;
+  border-right: none;
+  border-bottom: 3px solid black;
+  border-left: none;
+  border-radius: 2px;
+  font-size: 24px;
+  // padding: 0 4px;
+  margin: 4px 0px;
+  color: rgb(250, 17, 79);
+  font-weight: bold;
+  transition: all 0.3s ease-in-out;
+
+  &::placeholder {
+    color: rgb(250, 17, 79);
+    font-weight: 200;
+  }
 
-    &:checked:after {
-        background-color: black;
-        color: black;
-    }
+  &:focus {
+    border-color: rgb(250, 17, 79);
+  }
 }
 
-.form-input-radio {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    margin: 4px;
+input[type='radio'] {
+  transform: scale(1.8);
+  margin-right: 24px;
+  margin-top: 8px;
+
+  &:checked {
+    background-color: black;
+    color: black;
+  }
+
+  &:checked:after {
+    background-color: black;
+    color: black;
+  }
+}
 
+.form-input-radio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin: 4px;
 }
 
 .radio-buttons {
-    display: flex;
-    justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 .first-time-select {
-    margin: 8px;
+  margin: 8px;
 }
 
-
 .form-input-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 300px;
-    height: 40px;
-    margin-top: 20px;
-    margin-bottom: 36px;
-    button {
-        border: 3px solid black;
-        border-radius: 4px;
-        font-weight: bold;
-        font-size: 18px;
-        font-weight: bold;
-        transition: all .3s ease-in-out;
-
-        &:hover {
-            background-color: black;
-            color: white;
-        }
-        &:disabled {
-            color: #bbb;
-            border-color: #bbb;
-            pointer-events: none;
-        }
-        
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 300px;
+  height: 40px;
+  margin-top: 20px;
+  margin-bottom: 36px;
+  button {
+    border: 3px solid black;
+    border-radius: 4px;
+    font-weight: bold;
+    font-size: 18px;
+    font-weight: bold;
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      background-color: black;
+      color: white;
+    }
+    &:disabled {
+      color: #bbb;
+      border-color: #bbb;
+      pointer-events: none;
     }
+  }
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
+input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
@@ -175,33 +173,33 @@ select:-webkit-autofill:focus {
 }
 
 select {
-    width: 140px;
-    padding: 6px;
-    font-size: 16px;
-    font-weight: bold;
-    color: rgb(250, 17, 79);
-    background-color: inherit;
-    border: 3px solid black;
-    border-radius: 0px;
-    margin: 12px;
-
-    &:focus {
-        border: 3px solid rgb(250, 17, 79);
-        outline: none;
-    }
+  width: 140px;
+  padding: 6px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgb(250, 17, 79);
+  background-color: inherit;
+  border: 3px solid black;
+  border-radius: 0px;
+  margin: 12px;
+
+  &:focus {
+    border: 3px solid rgb(250, 17, 79);
+    outline: none;
+  }
 }
 
 .select-reason {
-    display: flex;
-    justify-content: space-around;
-    margin: 8px;
+  display: flex;
+  justify-content: space-around;
+  margin: 8px;
 
-    select {
-        min-width: 280px;
-    }
+  select {
+    min-width: 280px;
+  }
 }
 
 .block {
-    pointer-events: none;
-    opacity: .4;
-}
\ No newline at end of file
+  pointer-events: none;
+  opacity: 0.4;
+}

From 7c6b846aa9e441c44deac94115542ce4bb63c11a Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 29 Jan 2025 21:39:35 -0800
Subject: [PATCH 04/12] Final Version + Clean Up

---
 .../manageProjects/createNewEvent.jsx         |  5 +-
 .../manageProjects/editableMeeting.jsx        |  1 +
 .../manageProjects/eventForm/EventForm.scss   |  8 ++-
 .../manageProjects/eventForm/eventForm.jsx    | 72 ++++++++++++-------
 client/src/pages/ManageProjects.jsx           |  2 +
 5 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/client/src/components/manageProjects/createNewEvent.jsx b/client/src/components/manageProjects/createNewEvent.jsx
index 3ae80103b..2b704e61a 100644
--- a/client/src/components/manageProjects/createNewEvent.jsx
+++ b/client/src/components/manageProjects/createNewEvent.jsx
@@ -19,10 +19,11 @@ const CreateNewEvent = ({
     eventType: 'Team Meeting',
     description: '',
     videoConferenceLink: '',
-    day: '0',
+    day: new Date().getDay().toString(), // sets initial date value to user's current day in their local time
     startTime: '7:00pm',
     duration: '1',
   };
+
   const [formValues, setFormValues] = useState(initialFormValues);
   const [formErrors, setFormErrors] = useState({});
   const { showSnackbar } = useSnackbar();
@@ -30,7 +31,6 @@ const CreateNewEvent = ({
   // Handle form input changes
   const handleInputChange = (event) => {
     setFormValues({ ...formValues, [event.target.name]: event.target.value });
-    console.log(event.target.value);
   };
 
   const handleEventCreate = () => {
@@ -83,6 +83,7 @@ const CreateNewEvent = ({
     }
     setFormErrors(errors);
   };
+
   return (
     <div>
       <button
diff --git a/client/src/components/manageProjects/editableMeeting.jsx b/client/src/components/manageProjects/editableMeeting.jsx
index 9e7f8bd64..316929a6c 100644
--- a/client/src/components/manageProjects/editableMeeting.jsx
+++ b/client/src/components/manageProjects/editableMeeting.jsx
@@ -48,6 +48,7 @@ const EditableMeeting = ({
       handleInputChange={handleInputChange}
       formValues={formValues}
       formErrors={formErrors}
+      title="Edit Recurring Event"
     >
       <div>
         <button
diff --git a/client/src/components/manageProjects/eventForm/EventForm.scss b/client/src/components/manageProjects/eventForm/EventForm.scss
index 38bfee744..0afe8f0a0 100644
--- a/client/src/components/manageProjects/eventForm/EventForm.scss
+++ b/client/src/components/manageProjects/eventForm/EventForm.scss
@@ -9,12 +9,18 @@
   gap: 20px;
   background-color: white;
 
-  // Resets the label text size
+  // Resets the label text size on Text Fields
   // A global variable was interacting with MUI styles and overflowing the label
   .MuiInputLabel-root {
     font-size: inherit;
   }
 
+  // Forces horizontal padding inside Text Fields
+  .MuiInputBase-input {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+
 }
 
 .event-form-title {
diff --git a/client/src/components/manageProjects/eventForm/eventForm.jsx b/client/src/components/manageProjects/eventForm/eventForm.jsx
index 0d88c999a..147c69d10 100644
--- a/client/src/components/manageProjects/eventForm/eventForm.jsx
+++ b/client/src/components/manageProjects/eventForm/eventForm.jsx
@@ -4,9 +4,11 @@ import {
   TextField,
   MenuItem,
   Select,
-  InputLabel,
   FormControl,
   Box,
+  Input,
+  InputLabel,
+  FormHelperText,
 } from '@mui/material';
 import './EventForm.scss';
 
@@ -23,14 +25,19 @@ const EventForm = ({
   return (
     <div className="event-form-box">
       {title && <h3 className="event-form-title">{title}</h3>}
-      <TextField
-        required
-        helperText={formErrors?.name ? formErrors?.name : ''}
-        error={formErrors?.name}
-        id="name"
-        label="Event Name:"
-        placeholder="Meeting name..."
-      />
+      <FormControl fullWidth>
+        <TextField
+          required
+          helperText={formErrors?.name ? formErrors?.name : ''}
+          error={formErrors?.name}
+          id="name"
+          name="name"
+          value={formValues.name}
+          label="Event Name:"
+          placeholder="Meeting name..."
+          onChange={handleInputChange}
+        />
+      </FormControl>
       <div className="event-form-row">
         <FormControl fullWidth>
           <InputLabel id="event-type-label">Event Type</InputLabel>
@@ -106,26 +113,37 @@ const EventForm = ({
         </FormControl>
       </div>
       <div className="event-form-row">
-        <TextField
-          id="Description"
-          label="Description"
-          variant="outlined"
-          name="description"
-          fullWidth
-          value={formValues.description}
-          onChange={handleInputChange}
-        />
+        <FormControl fullWidth>
+          <TextField
+            id="Description"
+            label="Description"
+            variant="outlined"
+            name="description"
+            fullWidth
+            value={formValues.description}
+            onChange={handleInputChange}
+          />
+        </FormControl>
       </div>
       <div className="event-form-row">
-        <TextField
-          id="Meeting URL"
-          label="Meeting URL"
-          variant="outlined"
-          name="videoConferenceLink"
-          fullWidth
-          value={formValues.videoConferenceLink}
-          onChange={handleInputChange}
-        />
+        <FormControl fullWidth>
+          <TextField
+            required
+            helperText={
+              formErrors?.videoConferenceLink
+                ? formErrors?.videoConferenceLink
+                : ''
+            }
+            error={formErrors?.videoConferenceLink}
+            id="Meeting URL"
+            label="Meeting URL"
+            variant="outlined"
+            name="videoConferenceLink"
+            fullWidth
+            value={formValues.videoConferenceLink}
+            onChange={handleInputChange}
+          />
+        </FormControl>
       </div>
 
       {children}
diff --git a/client/src/pages/ManageProjects.jsx b/client/src/pages/ManageProjects.jsx
index ba15399f6..8ff889110 100644
--- a/client/src/pages/ManageProjects.jsx
+++ b/client/src/pages/ManageProjects.jsx
@@ -46,6 +46,7 @@ const ManageProjects = () => {
   }, [EventsApiService]);
 
   const fetchRecurringEvents = useCallback(async () => {
+    console.log('fetchRecurringEvents');
     setEventsLoading(true);
     const eventsRes = await recurringEventsApiService.fetchRecurringEvents();
     setRecurringEvents(eventsRes);
@@ -67,6 +68,7 @@ const ManageProjects = () => {
 
   const createNewRecurringEvent = useCallback(
     async (eventToCreate) => {
+      console.log('createNewRecurringEvent in Manage Projects');
       await recurringEventsApiService.createNewRecurringEvent(eventToCreate);
       fetchRecurringEvents();
     },

From 90e5cb11852f16e3ab96574bfa2a357c74604fa9 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 29 Jan 2025 21:44:42 -0800
Subject: [PATCH 05/12] Remove console log and added inline comments

---
 client/src/pages/ManageProjects.jsx | 1 -
 client/src/sass/CheckIn.scss        | 2 ++
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/ManageProjects.jsx b/client/src/pages/ManageProjects.jsx
index 8ff889110..f6eab7bf9 100644
--- a/client/src/pages/ManageProjects.jsx
+++ b/client/src/pages/ManageProjects.jsx
@@ -68,7 +68,6 @@ const ManageProjects = () => {
 
   const createNewRecurringEvent = useCallback(
     async (eventToCreate) => {
-      console.log('createNewRecurringEvent in Manage Projects');
       await recurringEventsApiService.createNewRecurringEvent(eventToCreate);
       fetchRecurringEvents();
     },
diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 1151b23e5..3db31a85e 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -64,6 +64,8 @@ label {
 
 // Following styles apply to all text fields including Material UI component <TextField>
 // Global styles help with UI consistency but can lead to style conflicts
+// Commented out styles that conflict with MUI component styling
+// See PR #1844
 
 input[type='text'],
 input[type='email'] {

From 865fe9ae00e09a9e386137a7f3804d3bdd4cc1db Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 29 Jan 2025 22:03:22 -0800
Subject: [PATCH 06/12] Remove console log

---
 client/src/pages/ManageProjects.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/pages/ManageProjects.jsx b/client/src/pages/ManageProjects.jsx
index f6eab7bf9..ba15399f6 100644
--- a/client/src/pages/ManageProjects.jsx
+++ b/client/src/pages/ManageProjects.jsx
@@ -46,7 +46,6 @@ const ManageProjects = () => {
   }, [EventsApiService]);
 
   const fetchRecurringEvents = useCallback(async () => {
-    console.log('fetchRecurringEvents');
     setEventsLoading(true);
     const eventsRes = await recurringEventsApiService.fetchRecurringEvents();
     setRecurringEvents(eventsRes);

From 0ece68392387aec56e817c669c7ea39a13dea28c Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 29 Jan 2025 22:04:26 -0800
Subject: [PATCH 07/12] Undo unnecessary css changes

---
 client/src/sass/CheckIn.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 3db31a85e..5eb78ea38 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -36,7 +36,7 @@
   p {
     text-align: left;
     font-weight: bold;
-    letter-spacing: 0.05em;
+    letter-spacing: .05em;
   }
 }
 
@@ -97,7 +97,7 @@ input[type='email'] {
   }
 }
 
-input[type='radio'] {
+input[type=radio] {
   transform: scale(1.8);
   margin-right: 24px;
   margin-top: 8px;
@@ -144,7 +144,7 @@ input[type='radio'] {
     font-weight: bold;
     font-size: 18px;
     font-weight: bold;
-    transition: all 0.3s ease-in-out;
+    transition: all .3s ease-in-out;
 
     &:hover {
       background-color: black;
@@ -203,5 +203,5 @@ select {
 
 .block {
   pointer-events: none;
-  opacity: 0.4;
+  opacity: .4;
 }

From 7fc4389eb6e2b4e2e2f0ffc9ffd3f7fe36c5aec3 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 29 Jan 2025 22:04:48 -0800
Subject: [PATCH 08/12] remove 0

---
 client/src/sass/CheckIn.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/sass/CheckIn.scss b/client/src/sass/CheckIn.scss
index 5eb78ea38..9317b3e86 100644
--- a/client/src/sass/CheckIn.scss
+++ b/client/src/sass/CheckIn.scss
@@ -85,7 +85,7 @@ input[type='email'] {
   margin: 4px 0px;
   color: rgb(250, 17, 79);
   font-weight: bold;
-  transition: all 0.3s ease-in-out;
+  transition: all .3s ease-in-out;
 
   &::placeholder {
     color: rgb(250, 17, 79);

From 11742fd9306685df377e6f51f1d9ae077a98d3f5 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Thu, 30 Jan 2025 09:03:40 -0800
Subject: [PATCH 09/12] Remove double import

---
 client/src/components/manageProjects/createNewEvent.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/manageProjects/createNewEvent.jsx b/client/src/components/manageProjects/createNewEvent.jsx
index 2b704e61a..c6e2ceb64 100644
--- a/client/src/components/manageProjects/createNewEvent.jsx
+++ b/client/src/components/manageProjects/createNewEvent.jsx
@@ -5,7 +5,7 @@ import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
 import { addDurationToTime } from './utilities/addDurationToTime';
 import { timeConvertFromForm } from './utilities/timeConvertFromForm';
 import validateEventForm from './utilities/validateEventForm';
-import EventForm from './eventForm/eventForm';
+import EventForm from './eventForm';
 
 const CreateNewEvent = ({
   projectToEdit,

From cc8994019d4ac6ae05f6c6349a65a58caa2a968e Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Wed, 5 Feb 2025 20:13:31 -0800
Subject: [PATCH 10/12] Feedback: div to Box and reset Date initiation in form,
 also removed unused imports

---
 .../manageProjects/createNewEvent.jsx         |  2 +-
 .../manageProjects/eventForm/eventForm.jsx    | 24 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/src/components/manageProjects/createNewEvent.jsx b/client/src/components/manageProjects/createNewEvent.jsx
index c6e2ceb64..c4aed38dc 100644
--- a/client/src/components/manageProjects/createNewEvent.jsx
+++ b/client/src/components/manageProjects/createNewEvent.jsx
@@ -19,7 +19,7 @@ const CreateNewEvent = ({
     eventType: 'Team Meeting',
     description: '',
     videoConferenceLink: '',
-    day: new Date().getDay().toString(), // sets initial date value to user's current day in their local time
+    day: '0',
     startTime: '7:00pm',
     duration: '1',
   };
diff --git a/client/src/components/manageProjects/eventForm/eventForm.jsx b/client/src/components/manageProjects/eventForm/eventForm.jsx
index 147c69d10..f25ed8557 100644
--- a/client/src/components/manageProjects/eventForm/eventForm.jsx
+++ b/client/src/components/manageProjects/eventForm/eventForm.jsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import { createClockHours } from '../../../utils/createClockHours';
 import {
+  Box,
   TextField,
   MenuItem,
   Select,
   FormControl,
-  Box,
-  Input,
   InputLabel,
-  FormHelperText,
 } from '@mui/material';
 import './EventForm.scss';
 
@@ -23,7 +21,7 @@ const EventForm = ({
   const clockHours = createClockHours();
 
   return (
-    <div className="event-form-box">
+    <Box className="event-form-box">
       {title && <h3 className="event-form-title">{title}</h3>}
       <FormControl fullWidth>
         <TextField
@@ -38,7 +36,7 @@ const EventForm = ({
           onChange={handleInputChange}
         />
       </FormControl>
-      <div className="event-form-row">
+      <Box className="event-form-row">
         <FormControl fullWidth>
           <InputLabel id="event-type-label">Event Type</InputLabel>
           <Select
@@ -71,8 +69,8 @@ const EventForm = ({
             <MenuItem value="6">Saturday</MenuItem>
           </Select>
         </FormControl>
-      </div>
-      <div className="event-form-row">
+      </Box>
+      <Box className="event-form-row">
         <FormControl fullWidth>
           <InputLabel id="start-time-label">Start Time</InputLabel>
           <Select
@@ -111,8 +109,8 @@ const EventForm = ({
             <MenuItem value="4">4</MenuItem>
           </Select>
         </FormControl>
-      </div>
-      <div className="event-form-row">
+      </Box>
+      <Box className="event-form-row">
         <FormControl fullWidth>
           <TextField
             id="Description"
@@ -124,8 +122,8 @@ const EventForm = ({
             onChange={handleInputChange}
           />
         </FormControl>
-      </div>
-      <div className="event-form-row">
+      </Box>
+      <Box className="event-form-row">
         <FormControl fullWidth>
           <TextField
             required
@@ -144,10 +142,10 @@ const EventForm = ({
             onChange={handleInputChange}
           />
         </FormControl>
-      </div>
+      </Box>
 
       {children}
-    </div>
+    </Box>
   );
 };
 

From e009ae8764976489d924ff49538d34c9f8929bf5 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Thu, 6 Feb 2025 13:07:57 -0800
Subject: [PATCH 11/12] remove whitespace changes

---
 client/src/components/manageProjects/createNewEvent.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/manageProjects/createNewEvent.jsx b/client/src/components/manageProjects/createNewEvent.jsx
index c4aed38dc..a74c8526d 100644
--- a/client/src/components/manageProjects/createNewEvent.jsx
+++ b/client/src/components/manageProjects/createNewEvent.jsx
@@ -23,7 +23,6 @@ const CreateNewEvent = ({
     startTime: '7:00pm',
     duration: '1',
   };
-
   const [formValues, setFormValues] = useState(initialFormValues);
   const [formErrors, setFormErrors] = useState({});
   const { showSnackbar } = useSnackbar();
@@ -83,7 +82,6 @@ const CreateNewEvent = ({
     }
     setFormErrors(errors);
   };
-
   return (
     <div>
       <button

From ee5c537ff79885df38aa04cd163ae54f319d6e46 Mon Sep 17 00:00:00 2001
From: sasszz <luchevreuil@gmail.com>
Date: Thu, 6 Feb 2025 13:18:32 -0800
Subject: [PATCH 12/12] Undo changes to CSS organization

---
 .../{eventForm => }/eventForm.jsx             |  4 +-
 .../manageProjects/eventForm/EventForm.scss   | 39 ----------------
 .../manageProjects/eventForm/index.ts         |  1 -
 client/src/sass/ManageProjects.scss           | 44 ++++++++++++++++++-
 4 files changed, 45 insertions(+), 43 deletions(-)
 rename client/src/components/manageProjects/{eventForm => }/eventForm.jsx (97%)
 delete mode 100644 client/src/components/manageProjects/eventForm/EventForm.scss
 delete mode 100644 client/src/components/manageProjects/eventForm/index.ts

diff --git a/client/src/components/manageProjects/eventForm/eventForm.jsx b/client/src/components/manageProjects/eventForm.jsx
similarity index 97%
rename from client/src/components/manageProjects/eventForm/eventForm.jsx
rename to client/src/components/manageProjects/eventForm.jsx
index f25ed8557..7666fc669 100644
--- a/client/src/components/manageProjects/eventForm/eventForm.jsx
+++ b/client/src/components/manageProjects/eventForm.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createClockHours } from '../../../utils/createClockHours';
+import { createClockHours } from '../../utils/createClockHours';
 import {
   Box,
   TextField,
@@ -8,7 +8,7 @@ import {
   FormControl,
   InputLabel,
 } from '@mui/material';
-import './EventForm.scss';
+import '../../sass/ManageProjects.scss';
 
 const EventForm = ({
   title,
diff --git a/client/src/components/manageProjects/eventForm/EventForm.scss b/client/src/components/manageProjects/eventForm/EventForm.scss
deleted file mode 100644
index 0afe8f0a0..000000000
--- a/client/src/components/manageProjects/eventForm/EventForm.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.event-form-box {
-  min-width: 100%;
-  min-height: 540px;
-  padding: 10px;
-  position: relative;
-  border: solid black 2px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  background-color: white;
-
-  // Resets the label text size on Text Fields
-  // A global variable was interacting with MUI styles and overflowing the label
-  .MuiInputLabel-root {
-    font-size: inherit;
-  }
-
-  // Forces horizontal padding inside Text Fields
-  .MuiInputBase-input {
-    padding-left: 15px !important;
-    padding-right: 15px !important;
-  }
-
-}
-
-.event-form-title {
-  font-size: 20px;
-}
-
-.event-form-row {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-}
-
-.event-form-error {
-  color: red;
-  margin-bottom: 10px;
-}
diff --git a/client/src/components/manageProjects/eventForm/index.ts b/client/src/components/manageProjects/eventForm/index.ts
deleted file mode 100644
index 278568617..000000000
--- a/client/src/components/manageProjects/eventForm/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './eventForm';
diff --git a/client/src/sass/ManageProjects.scss b/client/src/sass/ManageProjects.scss
index ebe3914d9..94480193b 100644
--- a/client/src/sass/ManageProjects.scss
+++ b/client/src/sass/ManageProjects.scss
@@ -218,6 +218,48 @@ div.editable-field {
   background-color: white;
 }
 
+.event-form-box {
+  min-width: 100%;
+  min-height: 540px;
+  padding: 10px;
+  position: relative;
+  border: solid black 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: white;
+
+  // Temporary solution until Globally applied CSS is refactored/removed
+
+  // Resets the label text size on EventForm.tsx Text Fields
+  // A global variable was interacting with MUI styles and overflowing the label on <TextField> in EventForm.tsx
+  .MuiInputLabel-root {
+    font-size: inherit;
+  }
+
+  // Forces horizontal padding inside EventForm.tsx Text Fields
+  // A global variable was interacting with MUI styles and affecting padding inside <TextField> in EventForm.tsx
+  .MuiInputBase-input {
+    padding-left: 15px !important;
+    padding-right: 15px !important;
+  }
+}
+
+.event-form-title {
+  font-size: 20px;
+}
+
+.event-form-row {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+
+.event-form-error {
+  color: red;
+  margin-bottom: 10px;
+}
+
 .button-box {
   margin-top: 10px;
 }
@@ -244,7 +286,7 @@ div.editable-field {
 }
 
 .event-list-details {
- display: flex;
+  display: flex;
 }
 
 .edit-icon {