updated the resources to make the icons consistent, added styling (#117)

Author: michelle-hadfield-nava

frontend/src/components/ResourcesList.test.tsx

@@ -1,7 +1,7 @@
 import { axe } from "jest-axe";
 import { render, screen } from "tests/react-utils";
 import { Resource } from "@/types/resources";
-import ResourcesList from "./ResourcesList";
+import ResourcesList, { getCardBorderClass } from "./ResourcesList";
 
 const mockResource: Resource = {
   name: "Test Resource",
@@ -131,6 +131,129 @@ describe("ResourcesList", () => {
     expect(screen.queryByText("External")).not.toBeInTheDocument();
   });
 
+  describe("Card border styling", () => {
+    it("applies blue border class for goodwill referral type", () => {
+      const resource: Resource = {
+        name: "Goodwill Center",
+        referral_type: "goodwill",
+      };
+
+      render(
+        <ResourcesList
+          resources={[resource]}
+          handleRemoveResource={mockHandleRemoveResource}
+        />,
+      );
+
+      const expectedClasses = getCardBorderClass("goodwill");
+      const card = screen.getByTestId("resource-card-goodwill-0");
+      expect(card).toBeInTheDocument();
+      expectedClasses.split(" ").forEach((className) => {
+        expect(card).toHaveClass(className);
+      });
+    });
+
+    it("applies gray border class for government referral type", () => {
+      const resource: Resource = {
+        name: "Government Service",
+        referral_type: "government",
+      };
+
+      render(
+        <ResourcesList
+          resources={[resource]}
+          handleRemoveResource={mockHandleRemoveResource}
+        />,
+      );
+
+      const expectedClasses = getCardBorderClass("government");
+      const card = screen.getByTestId("resource-card-government-0");
+      expect(card).toBeInTheDocument();
+      expectedClasses.split(" ").forEach((className) => {
+        expect(card).toHaveClass(className);
+      });
+    });
+
+    it("applies green border class for external referral type", () => {
+      const resource: Resource = {
+        name: "Community Center",
+        referral_type: "external",
+      };
+
+      render(
+        <ResourcesList
+          resources={[resource]}
+          handleRemoveResource={mockHandleRemoveResource}
+        />,
+      );
+
+      const expectedClasses = getCardBorderClass("external");
+      const card = screen.getByTestId("resource-card-external-0");
+      expect(card).toBeInTheDocument();
+      expectedClasses.split(" ").forEach((className) => {
+        expect(card).toHaveClass(className);
+      });
+    });
+
+    it("does not apply border classes when referral type is undefined", () => {
+      const resource: Resource = {
+        name: "Generic Resource",
+        description: "No type specified",
+      };
+
+      render(
+        <ResourcesList
+          resources={[resource]}
+          handleRemoveResource={mockHandleRemoveResource}
+        />,
+      );
+
+      const expectedClasses = getCardBorderClass(undefined);
+      expect(expectedClasses).toBe("");
+
+      const card = screen.getByTestId("resource-card-0");
+      expect(card).toBeInTheDocument();
+
+      // Verify no colored border classes are applied
+      expect(card).not.toHaveClass("border-t-blue-600");
+      expect(card).not.toHaveClass("border-t-gray-600");
+      expect(card).not.toHaveClass("border-t-green-600");
+    });
+
+    it("applies correct border classes to multiple resources with different types", () => {
+      const resources: Resource[] = [
+        { name: "Goodwill Center", referral_type: "goodwill" },
+        { name: "Government Service", referral_type: "government" },
+        { name: "Community Center", referral_type: "external" },
+      ];
+
+      render(
+        <ResourcesList
+          resources={resources}
+          handleRemoveResource={mockHandleRemoveResource}
+        />,
+      );
+
+      const goodwillClasses = getCardBorderClass("goodwill");
+      const governmentClasses = getCardBorderClass("government");
+      const externalClasses = getCardBorderClass("external");
+
+      const goodwillCard = screen.getByTestId("resource-card-goodwill-0");
+      const govCard = screen.getByTestId("resource-card-government-1");
+      const externalCard = screen.getByTestId("resource-card-external-2");
+
+      goodwillClasses.split(" ").forEach((className) => {
+        expect(goodwillCard).toHaveClass(className);
+      });
+      governmentClasses.split(" ").forEach((className) => {
+        expect(govCard).toHaveClass(className);
+      });
+      externalClasses.split(" ").forEach((className) => {
+        expect(externalCard).toHaveClass(className);
+      });
+    });
+  });
+
   it("renders website link with proper attributes", () => {
     render(
       <ResourcesList

frontend/src/components/ResourcesList.tsx

@@ -2,7 +2,7 @@ import { Resource } from "@/types/resources";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Link from "next/link";
 import React from "react";
-import { HandHeart, Landmark, X } from "lucide-react";
+import { Building, Users, X } from "lucide-react";
 
 const referralTypeIndicator = (referralType: string | undefined) => {
   switch (referralType) {
@@ -27,7 +27,7 @@ const referralTypeIndicator = (referralType: string | undefined) => {
           data-testid="government_referral"
           className="inline-flex items-center gap-1.5 bg-transparent text-gray-800 ml-4 mt-3 px-2.5 py-1 max-w-[15rem] text-sm font-bold"
         >
-          <Landmark className="h-4 w-4 shrink-0" />
+          <Building className="h-4 w-4 shrink-0" />
           <span className="truncate">Government</span>
         </span>
       );
@@ -38,7 +38,7 @@ const referralTypeIndicator = (referralType: string | undefined) => {
           data-testid="external_referral"
           className="inline-flex items-center gap-1.5 bg-transparent text-green-800 ml-4 mt-3 px-2.5 py-1 max-w-[15rem] text-sm font-bold"
         >
-          <HandHeart className="h-4 w-4 shrink-0" />
+          <Users className="h-4 w-4 shrink-0" />
           <span className="truncate">External</span>
         </span>
       );
@@ -49,6 +49,19 @@ const referralTypeIndicator = (referralType: string | undefined) => {
   }
 };
 
+export const getCardBorderClass = (referralType: string | undefined) => {
+  switch (referralType) {
+    case "goodwill":
+      return "border-t-4 border-t-blue-600 rounded-t-lg";
+    case "government":
+      return "border-t-4 border-t-gray-600 rounded-t-lg";
+    case "external":
+      return "border-t-4 border-t-green-600 rounded-t-lg";
+    default:
+      return "";
+  }
+};
+
 const normalizeUrl = (url: string) => {
   const trimmed = url.trim();
   if (/^(https?:)?\/\//i.test(trimmed) || /^(mailto:|tel:)/i.test(trimmed)) {
@@ -75,7 +88,8 @@ const ResourcesList = ({
       {resources.map((r, i) => (
         <Card
           key={i}
-          className="relative bg-white shadow-sm mb-5 min-w-[16rem]"
+          className={`relative bg-white shadow-sm mb-5 min-w-[16rem] ${getCardBorderClass(r.referral_type)}`}
+          data-testid={`resource-card${r.referral_type ? `-${r.referral_type}` : ""}-${i}`}
         >
           {referralTypeIndicator(r.referral_type)}
           {/* Remove button */}