Misc fixes

apps/web/src/app/_components/filters/dropdown-filter.tsx

@@ -318,7 +318,7 @@ export default function DropdownFilter({
             }))}
             value={selectedOptions}
             onChange={(selected) => onSelectionChange?.(selected)}
-            placeholder={`Search by ${title === "Industry" ? "industry" : "city or state"}`}
+            placeholder={`Search by ${title === "Industry" ? "industry" : title === "Benefits" ? "benefits" : "city or state"}`}
           />
         </div>
       );

apps/web/src/app/_components/form/form-section.tsx

@@ -1,8 +1,6 @@
-import { FormCard } from "~/app/_components/form/form-card";
-
 /**
  * FormSection component creates a section within a FormCard with a specified title.
  */
 export function FormSection({ children }: { children: React.ReactNode }) {
-  return <FormCard>{children}</FormCard>;
+  return <div className="flex flex-col rounded-lg w-full">{children}</div>;
 }

apps/web/src/app/_components/header/header-layout.tsx

@@ -28,7 +28,7 @@ export default async function HeaderLayout({
       <div className="fixed top-0 z-50 w-full bg-white">
         <Header auth={button} />
       </div>
-      <article className="flex h-fit flex-col items-center justify-start pt-[9.5dvh]">
+      <article className="flex h-fit flex-col items-center justify-start pt-[8dvh]">
         {children}
       </article>
     </div>

apps/web/src/app/_components/reviews/review-card.tsx

@@ -7,13 +7,9 @@ import { cn } from "@cooper/ui";
 import { Card, CardContent } from "@cooper/ui/card";
 
 import { api } from "~/trpc/react";
-import { locationName } from "~/utils/locationHelpers";
-import {
-  abbreviatedWorkTerm,
-  prettyWorkEnviornment,
-} from "~/utils/stringHelpers";
+import { prettyLocationName } from "~/utils/locationHelpers";
+import { prettyWorkEnviornment } from "~/utils/stringHelpers";
 import { DeleteReviewDialog } from "./delete-review-dialogue";
-import { ReviewCardStars } from "./review-card-stars";
 
 interface ReviewCardProps {
   className?: string;
@@ -27,72 +23,74 @@ export function ReviewCard({ reviewObj, className }: ReviewCardProps) {
   // Check if the current user is the author of the review
   const isAuthor = currentProfile?.id === reviewObj.profileId;
 
+  const { data: location } = api.location.getById.useQuery({
+    id: reviewObj.locationId ?? "",
+  });
+
   return (
     <Card
       className={cn(
-        "mx-auto min-h-40 w-[100%] border-[0.75px] border-cooper-gray-400 bg-cooper-gray-100",
+        "mx-auto w-[100%] border-[0.75px] border-cooper-gray-150 bg-[#FEFEFE]",
         className,
       )}
     >
       <div className="flex w-full flex-wrap">
-        <div className="h-40 w-full sm:w-[35%]">
-          <CardContent className="flex h-full flex-col justify-between pr-0">
-            <div>
-              <div className="pt-2">
-                <ReviewCardStars numStars={reviewObj.overallRating} />
+        <div className="w-full sm:w-[17%]">
+          <CardContent className="flex h-full pr-0">
+            <div className="flex md:flex-col flex-row justify-between w-full">
+              <div className="flex flex-row gap-2 items-center">
+                <div className="md:text-4xl text-2xl text-[#151515]">
+                  {reviewObj.overallRating.toFixed(1)}
+                </div>
+                <Image
+                  src="/svg/star.svg"
+                  alt="Star icon"
+                  width={28}
+                  height={28}
+                  className="w-5 h-5 md:w-7 md:h-7"
+                />
               </div>
-              <div className="align-center flex flex-col pt-2 text-cooper-gray-600 text-sm">
+              <div className="align-center flex flex-col pt-2 text-cooper-gray-350 text-sm">
                 <span
-                  className={`${locationName(reviewObj) ? "visibility: visible" : "visibility: hidden"}`}
+                  className={`${location && prettyLocationName(location) ? "visibility: visible" : "visibility: hidden"}`}
                 >
-                  {locationName(reviewObj)} •
+                  {prettyLocationName(location)}
                 </span>
                 <span>
-                  {abbreviatedWorkTerm(reviewObj.workTerm)} {reviewObj.workYear}
+                  {reviewObj.workTerm.charAt(0).toUpperCase() +
+                    reviewObj.workTerm.slice(1).toLowerCase()}{" "}
+                  {reviewObj.workYear}
                 </span>
               </div>
             </div>
-            <div className="flex flex-col">
-              <div className="text-sm">
-                {reviewObj.createdAt.toLocaleDateString("en-US", {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                })}
-              </div>
-            </div>
           </CardContent>
         </div>
-        <div className="w-full sm:w-[65%]">
-          <CardContent className="flex h-full flex-col justify-between gap-4 pl-4 sm:pl-0">
-            <div className="flex flex-row justify-between">
+        <div className="w-full sm:w-[83%]">
+          <CardContent className="flex h-full flex-col justify-between gap-4 md:pl-4 sm:pl-0 md:pt-0 pt-5">
+            <div className=" flex-row justify-between hidden md:flex">
               <div className="pt-1">{reviewObj.textReview}</div>
               {isAuthor && <DeleteReviewDialog reviewId={reviewObj.id} />}
             </div>
             <div className="flex justify-between text-sm">
               <div className="flex md:gap-10 gap-6 bg-[#f4f4f4] p-3 md:pl-4 pr-4 rounded-lg">
                 <div className="flex md:flex-row flex-col gap-2">
-                  <span className="text-cooper-gray-600">Job type</span> Co-op
+                  <span className="text-cooper-gray-350">Job type</span> Co-op
                 </div>
                 <div className="flex md:flex-row flex-col gap-2">
-                  <span className="text-cooper-gray-600">Work model</span>
+                  <span className="text-cooper-gray-350">Work model</span>
                   {prettyWorkEnviornment(
                     reviewObj.workEnvironment as WorkEnvironmentType,
                   )}
                 </div>
                 <div className="flex md:flex-row flex-col gap-2">
-                  <span className="text-cooper-gray-600">Pay</span> $
+                  <span className="text-cooper-gray-350">Pay</span> $
                   {reviewObj.hourlyPay}/hr
                 </div>
               </div>
-
-              <Image
-                src="/svg/reviewReport.svg"
-                alt="Star icon"
-                width={16}
-                height={15}
-                className="cursor-pointer"
-              />
+            </div>
+            <div className="flex flex-row justify-between visible md:hidden">
+              <div className="pt-1">{reviewObj.textReview}</div>
+              {isAuthor && <DeleteReviewDialog reviewId={reviewObj.id} />}
             </div>
           </CardContent>
         </div>

apps/web/src/utils/locationHelpers.ts

@@ -15,12 +15,12 @@ export const locationName = (reviewObj: ReviewType) => {
   }
 };
 
-export const prettyLocationName = (location: LocationType) => {
-  return (
-    location.city +
-    (location.state ? `, ${abbreviatedStateName(location.state)}` : "") +
-    (location.state ? "" : `, ${location.country}`)
-  );
+export const prettyLocationName = (location: LocationType | undefined) => {
+  return location
+    ? location.city +
+        (location.state ? `, ${abbreviatedStateName(location.state)}` : "") +
+        (location.state ? "" : `, ${location.country}`)
+    : "N/A";
 };
 
 export const abbreviatedStateName = (state: string) => {