Request ride workflow UI

README.md

@@ -26,12 +26,15 @@ If you have a disability that prevents you from walking around campus, getting a
 ### Current Contributors
 
 #### Technical Project Manager
+
 - Matthew Kim
 
 ### Designer
+
 - Ryan Qiu
 
 #### Software Developers
+
 - Anika Chandra
 - Emir Icyer
 
@@ -40,6 +43,7 @@ If you have a disability that prevents you from walking around campus, getting a
 ### Past Contributors
 
 #### Product Managers
+
 - Andrew Choi
 - Bryan Graeser
 - Kathy Lim
@@ -49,6 +53,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Stephy Chen
 
 #### Technical Project Managers
+
 - Christopher Hansen
 - Desmond Atikpui
 - Daniel Wei
@@ -59,6 +64,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Selena Liu
 
 #### Software Developers
+
 - Aaron Kang
 - Aiden Kim
 - Andrew Choi
@@ -90,6 +96,7 @@ If you have a disability that prevents you from walking around campus, getting a
 - Zack Ashen
 
 #### Designers
+
 - Aiden Kim
 - Chelsea Wang
 - Joanne Lee

frontend/package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "@carriage-web/shared": "workspace:*"
+    "@carriage-web/shared": "workspace:*",
+    "node-releases": "^2.0.36"
   },
   "scripts": {
     "dev": "vite",

frontend/src/components/Modal/Modal.tsx

@@ -37,6 +37,7 @@ type ModalProps = {
   isRider?: boolean;
   id?: string;
   arialabelledby?: string;
+  className?: string;
 };
 
 const Modal = ({
@@ -50,6 +51,7 @@ const Modal = ({
   isRider = true,
   arialabelledby,
   id = 'modal',
+  className,
 }: ModalProps) => {
   // Wrapping children in Array to match type for numPages
   const pages = paginate ? (children as React.ReactNodeArray) : [children];
@@ -74,7 +76,7 @@ const Modal = ({
                 clickOutsideDeactivates: true,
               }}
             >
-              <div className={styles.modal}>
+              <div className={`${styles.modal} ${className ?? ''}`.trim()}>
                 <div className={styles.topContainer}>
                   {isRider ? (
                     <h1 className={styles.title} id={id}>

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

@@ -225,9 +225,16 @@
 
 @media screen and (max-height: 600px), screen and (max-width: 768px) {
   .modal {
-    max-width: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 395px;
+    height: 100%;
     max-height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
+    border-radius: 0;
+    padding: 0;
   }
 
   .page {