Changed days icons to circles, added arrow to signal between start an…

…d end location, changes hours view. All changes on UserCard.tsx
sandboxnu · Aug 22, 2024 · 86fbbeb · 86fbbeb
1 parent 608d968
commit 86fbbeb
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@headlessui/react": "^1.6.5",
     "@hookform/resolvers": "^2.9.1",
     "@mapbox/polyline": "^1.2.0",
+    "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.10.11",
     "@mui/x-date-pickers": "^5.0.7",
     "@next-auth/prisma-adapter": "^1.0.3",
@@ -71,8 +72,8 @@
     "@tailwindcss/forms": "^0.5.2",
     "@types/geojson": "^7946.0.8",
     "@types/lodash": "^4.14.182",
-    "@types/mapbox__polyline": "^1.0.2",
     "@types/mapbox-gl": "^2.7.3",
+    "@types/mapbox__polyline": "^1.0.2",
     "@types/node": "18.0.0",
     "@types/random-seed": "^0.3.3",
     "@types/react": "18.0.14",

diff --git a/src/components/UserCards/UserCard.tsx b/src/components/UserCards/UserCard.tsx
@@ -10,6 +10,7 @@ import { UserContext } from "../../utils/userContext";
 import Spinner from "../Spinner";
 import { classNames } from "../../utils/classNames";
 import { User } from "@prisma/client";
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
 interface UserCardProps {
   otherUser: EnhancedPublicUser;
@@ -60,21 +61,21 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
       let backgroundColor = "";
       let dayIndex = Math.floor(i / 2);
       if (daysWorking[i] == "1") {
-        backgroundColor = " bg-good-green";
+        backgroundColor = " bg-red-500";
       }
       boxes.push(
         <div
           key={i}
           className={
-            "font-heavy pl-auto h-6 w-6 border border-l-0 border-black pt-0.5 text-center text-sm" +
+            "font-heavy flex h-6 w-6 items-center justify-center rounded-full border border-black text-sm" +
             backgroundColor
           }
         >
           {days[dayIndex]}
         </div>
       );
     }
-    return <div className="flex h-min border-l border-black">{boxes}</div>;
+    return <div className="flex gap-2">{boxes}</div>;
   };
 
   if (!user) {
@@ -88,6 +89,8 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
     >
       <div className="flex justify-between">
         {/* top row */}
+
+        {/* Profile picture goes here */}
         <div className="flex">
           <div className="text-lg">
             {user.role === "VIEWER" ? (
@@ -97,7 +100,7 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
             ) : (
               <p className="font-semibold">{props.otherUser.preferredName}</p>
             )}
-            <p className="font-light">{props.otherUser.companyName}</p>
+
           </div>
         </div>
         <Rating
@@ -110,25 +113,42 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
 
       </div>
       {/* second row */}
-      <p className="font-semibold">{props.otherUser.startPOILocation}</p>
+
       {/* third row */}
-      <div className="flex w-full items-center gap-4">
-        {DaysWorkingDisplay(props.otherUser.daysWorking)}
-      </div>
-      {/* fourth row */}
+
       <div className="m-0 flex w-full justify-between align-middle">
         <div className="flex text-sm font-normal">
-          <p className="pr-1">Start:</p>
+          <p className="pr-1">Hours:</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="px-2 font-semibold">|</p>
           <p className="font-semibold">
             {dayjs.tz(props.otherUser.endTime, "UTC").format("h:mm")} pm
           </p>
         </div>
       </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="w-[45%] text-left">{props.otherUser.startPOILocation}</p>
+        <div className="w-[10%] flex justify-center">
+          <ArrowForwardIcon fontSize="small" />
+        </div>
+        <p className="w-[45%] text-right">{props.otherUser.companyName}</p>
+      </div>
+
+
+      {/* request.message goes over here for displaying the request message */}
+      {/* fifth row */}
+
+      {/* Need to move time from here to above days */}
+
       {props.otherUser.role === "DRIVER" && (
         <div className="flex flex-row text-sm">
           <div className="mr-1">Open Seats: </div>
@@ -152,4 +172,4 @@ export const UserCard = (props: UserCardProps): JSX.Element => {
       </div>
     </div>
   );
-};
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1103,6 +1103,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.9":
+  version "7.25.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.4.tgz#6ef37d678428306e7d75f054d5b1bdb8cf8aa8ee"
+  integrity sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz"
@@ -1741,6 +1748,13 @@
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.4.tgz"
   integrity sha512-yFrMWcrlI0TqRN5jpb6Ma9iI7sGTHpytdzzL33oskFHNQ8UgrtPas33Y1K7sWAMwCrr1qbWDrOHLAQG4tAzuSw==
 
+"@mui/icons-material@^5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a"
+  integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
 "@mui/material@^5.10.11":
   version "5.13.6"
   resolved "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz"
@@ -6981,6 +6995,11 @@ regenerator-runtime@^0.13.11:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regexp.prototype.flags@^1.4.3:
   version "1.5.0"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz"