Changed the styling of the Add/Edit student Modal to reflect figma de…

…sign

frontend/src/components/Modal/RiderModalInfo.tsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import { Button, Input, Label } from '../FormElements/FormElements';
 import styles from './ridermodal.module.css';
 import { ObjectType, Accessibility, Rider } from '../../types/index';
+import { rightArrow } from '../../icons/other';
 
 type ModalFormProps = {
   onSubmit: (data: ObjectType) => void;
@@ -20,8 +21,7 @@ const RiderModalInfo = ({
 }: ModalFormProps) => {
   const { register, formState, handleSubmit, getValues } = useForm({
     defaultValues: {
-      firstName: rider?.firstName ?? '',
-      lastName: rider?.lastName ?? '',
+      name: (rider?.firstName ?? '') + (rider?.lastName ?? ''),
       netid: rider?.email.split('@')[0] ?? '',
       phoneNumber: rider?.phoneNumber ?? '',
       needs: rider?.accessibility ?? '', // if no needs, default is undefined
@@ -32,8 +32,7 @@ const RiderModalInfo = ({
   });
   const { errors } = formState;
   const beforeSubmit = ({
-    firstName,
-    lastName,
+    name,
     netid,
     phoneNumber,
     needs,
@@ -43,6 +42,10 @@ const RiderModalInfo = ({
   }: ObjectType) => {
     const email = netid ? `${netid}@cornell.edu` : undefined;
     const accessibility = needs;
+    const nameParts = name.trim().split(/\s+/);
+    const firstName =
+      nameParts.length > 1 ? nameParts.slice(0, -1).join(' ') : nameParts[0];
+    const lastName = nameParts.length > 1 ? nameParts.slice(-1)[0] : '';
     onSubmit({
       firstName,
       lastName,
@@ -68,34 +71,18 @@ const RiderModalInfo = ({
     <form onSubmit={handleSubmit(beforeSubmit)} className={styles.form}>
       <div className={cn(styles.inputContainer, styles.rideTime)}>
         <div className={cn(styles.gridR1, styles.gridCSmall1)}>
-          <Label className={styles.label} htmlFor="firstName">
-            First Name:{' '}
+          <Label className={styles.label} htmlFor="name">
+            Name:{' '}
           </Label>
           <Input
-            id="firstName"
-            name="firstName"
+            id="name"
+            name="name"
             type="text"
             ref={register({ required: true })}
             aria-required="true"
             className={styles.firstRow}
           />
-          {errors.firstName && (
-            <p className={styles.error}>First name cannot be empty</p>
-          )}
-          <Label className={styles.label} htmlFor="lastName">
-            Last Name:{' '}
-          </Label>
-          <Input
-            id="lastName"
-            name="lastName"
-            type="text"
-            ref={register({ required: true })}
-            className={styles.firstRow}
-            aria-required="true"
-          />
-          {errors.lastName && (
-            <p className={styles.error}>Last name cannot be empty</p>
-          )}
+          {errors.name && <p className={styles.error}>Name cannot be empty</p>}
         </div>
         <div className={cn(styles.gridR1, styles.gridCSmall2)}>
           <Label className={styles.label} htmlFor="netid">
@@ -173,12 +160,11 @@ const RiderModalInfo = ({
           )}
         </div>
         <div className={cn(styles.gridR3, styles.gridCAll)}>
-          <p>Duration</p>
-          <div className={styles.lastRow}>
+          <Label className={styles.label} htmlFor="duration">
+            Duration:{' '}
+          </Label>
+          <div className={styles.lastRow} id="duration">
             <div>
-              <Label className={styles.label} htmlFor="joinDate">
-                Join Date:{' '}
-              </Label>
               <Input
                 id="joinDate"
                 type="date"
@@ -192,11 +178,12 @@ const RiderModalInfo = ({
                 <p className={styles.error}>Please enter a join date</p>
               )}
             </div>
-            <p className={styles.to}>to</p>
+            <span>
+              &nbsp;
+              <img src={rightArrow} />
+              &nbsp;
+            </span>
             <div>
-              <Label className={styles.label} htmlFor="endDate">
-                End Date:{' '}
-              </Label>
               <Input
                 id="endDate"
                 type="date"

frontend/src/components/Modal/ridermodal.module.css

@@ -9,31 +9,43 @@
   margin-bottom: 1.5rem;
 }
 
+.inputContainer input[type='text'],
+.inputContainer input[type='tel'],
+.inputContainer input[type='date'],
+.inputContainer select {
+  border: 1px solid #808080;
+  width: 100%;
+  border-radius: 6px;
+  height: 1.75rem; /* Adjust height as needed */
+  font-size: 1rem; /* Adjust font size as needed */
+  /* Add any other relevant styling here */
+}
+
 .rideTime {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  column-gap: 1rem;
-  row-gap: 1rem;
+  column-gap: 2rem;
+  row-gap: 2rem;
 }
 
 .gridCSmall1 {
-  grid-column: 1 / span 2;
+  grid-column: 1 / 5;
 }
 
 .gridCSmall2 {
-  grid-column: 3 / span 2;
+  grid-column: 5 / 7;
 }
 
 .gridCSmall3 {
-  grid-column: 5 / span 2;
+  grid-column: 7 / 11;
 }
 
 .gridCBig1 {
-  grid-column: 1 / span 3;
+  grid-column: 1 / 5;
 }
 .gridCBig2 {
-  grid-column: 4 / span 3;
+  grid-column: 5 / 11;
 }
 .gridCAll {
   grid-column: 1 / span 6;
@@ -72,10 +84,11 @@
 
 .riderDate {
   font-size: 1rem !important;
+  color: #808080;
 }
 
 .firstRow {
-  max-width: 90%;
+  max-width: 100%;
 }
 
 .lastRow {
@@ -109,6 +122,11 @@
   cursor: pointer;
 }
 
+.label{
+  font-size: smaller;
+  color: #808080;
+}
+
 @media screen and (max-width: 1092px) {
   .form {
     display: block;

frontend/src/icons/other/index.ts

@@ -17,3 +17,4 @@ export { default as chevronLeft } from './chevron-left.svg';
 export { default as block } from './blocked.svg';
 export { default as red_trash } from './red-trash.svg';
 export { default as search_icon } from './search.svg';
+export { default as rightArrow } from './rightArrow.svg';