From 44dd8c30873f5d82aa3b875bbdd6925b1570bcc4 Mon Sep 17 00:00:00 2001
From: aaryansinha <sinha.aar@northeastern.edu>
Date: Thu, 29 Aug 2024 11:29:28 -0400
Subject: [PATCH] Changes to Usercard - matching figma design except for start
 and end location yet

---
 public/Line 2.svg                     |  3 +++
 public/destination.svg                |  3 +++
 public/start.svg                      |  3 +++
 src/components/UserCards/UserCard.tsx | 27 +++++++++++++++------------
 4 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 public/Line 2.svg
 create mode 100644 public/destination.svg
 create mode 100644 public/start.svg

diff --git a/public/Line 2.svg b/public/Line 2.svg
new file mode 100644
index 00000000..67bfb7e7
--- /dev/null
+++ b/public/Line 2.svg	
@@ -0,0 +1,3 @@
+<svg width="66" height="15" viewBox="0 0 66 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666667 7.5C0.666667 10.4455 3.05448 12.8333 6 12.8333C8.94552 12.8333 11.3333 10.4455 11.3333 7.5C11.3333 4.55448 8.94552 2.16667 6 2.16667C3.05448 2.16667 0.666667 4.55448 0.666667 7.5ZM65.7071 8.20711C66.0976 7.81658 66.0976 7.18342 65.7071 6.79289L59.3431 0.428932C58.9526 0.0384078 58.3195 0.0384078 57.9289 0.428932C57.5384 0.819457 57.5384 1.45262 57.9289 1.84315L63.5858 7.5L57.9289 13.1569C57.5384 13.5474 57.5384 14.1805 57.9289 14.5711C58.3195 14.9616 58.9526 14.9616 59.3431 14.5711L65.7071 8.20711ZM6 8.5H65V6.5H6V8.5Z" fill="black"/>
+</svg>
diff --git a/public/destination.svg b/public/destination.svg
new file mode 100644
index 00000000..1fede4ca
--- /dev/null
+++ b/public/destination.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2881 0.68866C14.0729 0.68866 16.7436 1.77267 18.7127 3.70221C20.6818 5.63176 21.7881 8.24878 21.7881 10.9776C21.7881 15.3253 18.6704 20.0635 12.5158 25.2428C12.1736 25.5308 11.7372 25.689 11.2861 25.6887C10.8349 25.6883 10.3989 25.5293 10.0572 25.2406L9.65009 24.8945C3.76793 19.8503 0.788086 15.2282 0.788086 10.9776C0.788086 8.24878 1.89433 5.63176 3.86347 3.70221C5.8326 1.77267 8.50331 0.68866 11.2881 0.68866ZM11.2881 7.0203C10.217 7.0203 9.18982 7.43722 8.43246 8.17936C7.6751 8.92149 7.24962 9.92804 7.24962 10.9776C7.24962 12.0271 7.6751 13.0337 8.43246 13.7758C9.18982 14.5179 10.217 14.9348 11.2881 14.9348C12.3592 14.9348 13.3864 14.5179 14.1437 13.7758C14.9011 13.0337 15.3265 12.0271 15.3265 10.9776C15.3265 9.92804 14.9011 8.92149 14.1437 8.17936C13.3864 7.43722 12.3592 7.0203 11.2881 7.0203Z" fill="black"/>
+</svg>
diff --git a/public/start.svg b/public/start.svg
new file mode 100644
index 00000000..919b13f5
--- /dev/null
+++ b/public/start.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.438 20.022C16.7199 20.022 17.9492 19.5128 18.8557 18.6063C19.7621 17.6999 20.2713 16.4705 20.2713 15.1887C20.2713 13.9068 19.7621 12.6774 18.8557 11.771C17.9492 10.8646 16.7199 10.3553 15.438 10.3553C14.1561 10.3553 12.9267 10.8646 12.0203 11.771C11.1139 12.6774 10.6047 13.9068 10.6047 15.1887C10.6047 16.4705 11.1139 17.6999 12.0203 18.6063C12.9267 19.5128 14.1561 20.022 15.438 20.022ZM14.2297 5.59449V1.89699C14.2297 1.57652 14.357 1.26918 14.5836 1.04257C14.8102 0.815966 15.1175 0.68866 15.438 0.68866C15.7585 0.68866 16.0658 0.815966 16.2924 1.04257C16.519 1.26918 16.6463 1.57652 16.6463 1.89699V5.59449C18.7766 5.86277 20.7569 6.8326 22.2748 8.35102C23.7928 9.86944 24.7621 11.85 25.0297 13.9803H28.7297C29.0501 13.9803 29.3575 14.1076 29.5841 14.3342C29.8107 14.5608 29.938 14.8682 29.938 15.1887C29.938 15.5091 29.8107 15.8165 29.5841 16.0431C29.3575 16.2697 29.0501 16.397 28.7297 16.397H25.0297C24.762 18.5277 23.7923 20.5085 22.2739 22.027C20.7554 23.5454 18.7746 24.5151 16.6439 24.7828L16.6463 24.8553V28.4803C16.6463 28.8008 16.519 29.1081 16.2924 29.3347C16.0658 29.5614 15.7585 29.6887 15.438 29.6887C15.1175 29.6887 14.8102 29.5614 14.5836 29.3347C14.357 29.1081 14.2297 28.8008 14.2297 28.4803V24.7828C12.099 24.5151 10.1181 23.5454 8.59968 22.027C7.08121 20.5085 6.1116 18.5277 5.84382 16.397H2.14632C1.82585 16.397 1.51851 16.2697 1.2919 16.0431C1.06529 15.8165 0.937988 15.5091 0.937988 15.1887C0.937988 14.8682 1.06529 14.5608 1.2919 14.3342C1.51851 14.1076 1.82585 13.9803 2.14632 13.9803H5.84382C6.11259 11.8505 7.08265 9.87079 8.60103 8.35329C10.1194 6.83579 12.0997 5.86687 14.2297 5.59933M8.18799 15.1887C8.18799 17.1115 8.95183 18.9555 10.3115 20.3152C11.6711 21.6748 13.5152 22.4387 15.438 22.4387C17.3608 22.4387 19.2049 21.6748 20.5645 20.3152C21.9242 18.9555 22.688 17.1115 22.688 15.1887C22.688 13.2658 21.9242 11.4218 20.5645 10.0621C19.2049 8.7025 17.3608 7.93866 15.438 7.93866C13.5152 7.93866 11.6711 8.7025 10.3115 10.0621C8.95183 11.4218 8.18799 13.2658 8.18799 15.1887Z" fill="black"/>
+</svg>
diff --git a/src/components/UserCards/UserCard.tsx b/src/components/UserCards/UserCard.tsx
index 5536d66d..6f547033 100644
--- a/src/components/UserCards/UserCard.tsx
+++ b/src/components/UserCards/UserCard.tsx
@@ -114,15 +114,27 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
       </div>
       {/* second row */}
 
+
+      <div className="flex items-center w-full">
+        <p className="font-semibold w-[45%] text-left">{props.otherUser.startPOILocation}</p>
+        
+        <p className="font-semibold w-[45%] text-right">{props.otherUser.companyName}</p>
+      </div>
+
+      <div className="flex w-full items-center gap-4">
+        {DaysWorkingDisplay(props.otherUser.daysWorking)}
+      </div>
+
       {/* third row */}
 
       <div className="m-0 flex w-full justify-between align-middle">
         <div className="flex text-sm font-normal">
-          <p className="pr-1">Hours:</p>
+          <p className="pr-1">Start:</p>
           <p className="font-semibold">
             {dayjs.tz(props.otherUser.startTime, "UTC").format("h:mm")} am
           </p>
           <p className="px-2 font-semibold">|</p>
+          <p className="pr-1">End:</p>
           <p className="font-semibold">
             {dayjs.tz(props.otherUser.endTime, "UTC").format("h:mm")} pm
           </p>
@@ -130,18 +142,9 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
       </div>
 
 {/* fourth row */}
-      <div className="flex w-full items-center gap-4">
-        {DaysWorkingDisplay(props.otherUser.daysWorking)}
-      </div>
 
 
-      <div className="flex items-center w-full">
-        <p className="font-semibold w-[45%] text-left">{props.otherUser.startPOILocation}</p>
-        <div className="w-[10%] flex justify-center">
-          <ArrowForwardIcon fontSize="small" />
-        </div>
-        <p className="font-semibold w-[45%] text-right">{props.otherUser.companyName}</p>
-      </div>
+
 
 
       {/* request.message goes over here for displaying the request message */}
@@ -151,7 +154,7 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
  
       {props.otherUser.role === "DRIVER" && (
         <div className="flex flex-row text-sm">
-          <div className="mr-1">Open Seats: </div>
+          <div className="mr-1">Seats Available: </div>
           <div className="font-semibold">{props.otherUser.seatAvail}</div>
         </div>
       )}