From 283fe92d4b6f9c44dad7049818cd5459dad41b61 Mon Sep 17 00:00:00 2001
From: AshP18 <ashp0704@gmail.com>
Date: Wed, 2 Oct 2024 10:37:04 -0400
Subject: [PATCH 1/2] Added list of riders with scroll

---
 src/components/EventModal.tsx            | 33 ++++++++++++++---------
 src/styles/components/ride-feed-card.css | 34 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/EventModal.tsx b/src/components/EventModal.tsx
index 0c62c80..959a8f0 100644
--- a/src/components/EventModal.tsx
+++ b/src/components/EventModal.tsx
@@ -181,19 +181,28 @@ const EventModal: React.FC<EventModalProps> = ({ event, setEvent }) => {
                     <p>{event.description}</p>
                   </div>
                   <div>
-                    <h5>
-                      Riders &nbsp; ({event.participants.length ?? 0})
-                    </h5>
+                      Riders:
                     <div>
-                      {event.participants ? (
-                        event.participants.map((username: any, index: number) => (
-                          <div key={index}>
-                            <span>{username}</span>
-                          </div>
-                        ))
-                      ) : (
-                        <></>
-                      )}
+                      <div className='ride-card-users-container'>
+                        {event.participants ? (
+                          event.participants.map((username: any, index: number) => (
+                            <div key={index}>
+                              <h5>
+                                <div className='ride-card-users'>
+                                  <span className='image'>
+                                    {username.slice(0,1).toLocaleUpperCase()}
+                                  </span>
+                                  <span className='name'>
+                                    <b>{username}</b>
+                                  </span>
+                                </div>
+                              </h5>
+                            </div>
+                          ))
+                        ) : (
+                          <></>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/styles/components/ride-feed-card.css b/src/styles/components/ride-feed-card.css
index 523e96a..41f6f9c 100644
--- a/src/styles/components/ride-feed-card.css
+++ b/src/styles/components/ride-feed-card.css
@@ -176,6 +176,40 @@
     border: 0.5px solid rgba(209, 215, 221, 1);
 }
 
+.ride-card-users-container {
+    width: 100%;
+    height: 170px;
+    overflow-y: auto;
+    border: 1px solid #c2c2c2;
+}
+
+.ride-card-users {
+    justify-content: flex-start;
+    display: flex;
+    align-items: center;
+    overflow-y: auto;
+}
+
+.ride-card-users > .image {
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    border: 2px solid var(--dark-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: white;
+    position: relative;
+}
+
+.ride-card-users > .name {
+    padding-left: 10px;
+    text-align: left;
+    font-size: 17px;
+}
+
 .ride-card-modal-values {
     padding: 12px;
 }

From b58460d0858f4cc640d51a71c31cd30019b2e8d7 Mon Sep 17 00:00:00 2001
From: AshP18 <ashp0704@gmail.com>
Date: Thu, 3 Oct 2024 14:23:59 -0400
Subject: [PATCH 2/2] Alphabetical rider order and updated visual appearance

---
 src/components/EventModal.tsx            | 6 +++---
 src/styles/components/ride-feed-card.css | 8 +++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/EventModal.tsx b/src/components/EventModal.tsx
index 959a8f0..43e9960 100644
--- a/src/components/EventModal.tsx
+++ b/src/components/EventModal.tsx
@@ -185,9 +185,10 @@ const EventModal: React.FC<EventModalProps> = ({ event, setEvent }) => {
                     <div>
                       <div className='ride-card-users-container'>
                         {event.participants ? (
-                          event.participants.map((username: any, index: number) => (
+                          [...event.participants]
+                          .sort((a: string, b: string) => a.localeCompare(b))
+                          .map((username: any, index: number) => (
                             <div key={index}>
-                              <h5>
                                 <div className='ride-card-users'>
                                   <span className='image'>
                                     {username.slice(0,1).toLocaleUpperCase()}
@@ -196,7 +197,6 @@ const EventModal: React.FC<EventModalProps> = ({ event, setEvent }) => {
                                     <b>{username}</b>
                                   </span>
                                 </div>
-                              </h5>
                             </div>
                           ))
                         ) : (
diff --git a/src/styles/components/ride-feed-card.css b/src/styles/components/ride-feed-card.css
index 41f6f9c..7c2cfb4 100644
--- a/src/styles/components/ride-feed-card.css
+++ b/src/styles/components/ride-feed-card.css
@@ -177,17 +177,23 @@
 }
 
 .ride-card-users-container {
+    padding-top: 12px;
     width: 100%;
     height: 170px;
     overflow-y: auto;
-    border: 1px solid #c2c2c2;
 }
 
 .ride-card-users {
+    padding-top: 8px;
+    padding-left: 8px;
+    padding-bottom: 8px;
     justify-content: flex-start;
     display: flex;
     align-items: center;
     overflow-y: auto;
+    border: 1px solid var(--dark-color);
+    border-radius: 12px;
+    margin-bottom: 4px;
 }
 
 .ride-card-users > .image {