From 2fcde2b728a0fc207bc19204add3aed87f5dd8fa Mon Sep 17 00:00:00 2001
From: Hannah Zulueta <hannahjoy.zulueta@gmail.com>
Date: Mon, 20 Jan 2025 20:20:17 -0800
Subject: [PATCH] Add more info link

---
 .../StakeholderPreview/StakeholderPreview.jsx | 31 +++++++++++++------
 client/src/theme/palette.tsx                  |  1 +
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx b/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx
index 01af4436d..2ec11838c 100644
--- a/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx
+++ b/client/src/components/FoodSeeker/SearchResults/StakeholderPreview/StakeholderPreview.jsx
@@ -3,8 +3,9 @@ import {
   Button,
   Chip,
   Divider,
+  Link,
   Stack,
-  Typography
+  Typography,
 } from "@mui/material";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import {
@@ -47,7 +48,7 @@ import {
   useSearchCoordinates,
   useUserCoordinates,
 } from "../../../../appReducer";
-import { success } from "../../../../theme/palette";
+import { linkText, success } from "../../../../theme/palette";
 
 const isLastOccurrenceInMonth = (tenantTimeZone) => {
   const currentDate = new Date();
@@ -198,12 +199,13 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               component="h2"
               align="left"
               fontWeight="bold"
-              sx={{
-                textDecoration: "underline",
-              }}
-              onClick={() => handleSelectOrganization(stakeholder)}
             >
-              {stakeholder.name}
+              <Link
+                sx={{ color: "inherit" }}
+                onClick={() => handleSelectOrganization(stakeholder)}
+              >
+                {stakeholder.name}
+              </Link>
             </Typography>
             <Stack
               direction="row"
@@ -345,7 +347,7 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
                   </Typography>
 
                   <Typography
-                    color="#4A80F5"
+                    color={linkText}
                     align="right"
                     sx={{
                       "&:hover": { textDecoration: "underline" },
@@ -463,7 +465,18 @@ const StakeholderPreview = ({ stakeholder, onSelect, isDesktop }) => {
               ""
             )}
           </Stack>
-
+          <Stack alignItems="flex-end">
+            <Link
+              onClick={() => handleSelectOrganization(stakeholder)}
+              sx={{
+                color: linkText,
+                cursor: "pointer",
+                border: "none",
+              }}
+            >
+              more info...
+            </Link>
+          </Stack>
           <Stack
             direction="row"
             justifyContent="start"
diff --git a/client/src/theme/palette.tsx b/client/src/theme/palette.tsx
index 5510b4572..1a3d9816f 100644
--- a/client/src/theme/palette.tsx
+++ b/client/src/theme/palette.tsx
@@ -14,6 +14,7 @@ export const linkHovered = "#004BA0";
 export const darkGray = "#4D4D4D";
 export const disabledText = "#999999";
 export const tooltipHover = "rgba(51, 102, 153, 0.2)";
+export const linkText = "#4A80F5";
 
 //Icon and List Colors
 export const foodPantry = "#0A7572";