From eda148942e577081a59682cd2a4e388bc185b643 Mon Sep 17 00:00:00 2001
From: chip <49256163+chipanyanwu@users.noreply.github.com>
Date: Fri, 6 Dec 2024 11:08:34 -0600
Subject: [PATCH] style: update styling of organization cards (#30)

---------

Co-authored-by: Elara Liu <40444637+ZL-Asica@users.noreply.github.com>
---
 .../Home/DonorDashboard/OrganizationCard.tsx  | 65 +++++++++++++------
 src/components/Saved/SavedCard.tsx            | 39 +++++++----
 2 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/components/Home/DonorDashboard/OrganizationCard.tsx b/src/components/Home/DonorDashboard/OrganizationCard.tsx
index f232186..abee206 100644
--- a/src/components/Home/DonorDashboard/OrganizationCard.tsx
+++ b/src/components/Home/DonorDashboard/OrganizationCard.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Card,
   CardContent,
   CardActions,
@@ -7,6 +8,7 @@ import {
   Collapse,
   Typography,
   Divider,
+  Link,
 } from '@mui/material';
 import { ExpandMore, ExpandLess } from '@mui/icons-material';
 import { lighten, useTheme } from '@mui/material/styles';
@@ -82,16 +84,30 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
     [theme]
   );
 
-  // Extracted component for header actions
-  const HeaderActions = () =>
-    user && (
-      <Button
-        color={isSaved ? 'secondary' : 'primary'}
-        onClick={() => handleAction('save')}
-      >
-        {isSaved ? 'Unsave' : 'Save'}
-      </Button>
-    );
+  const HeaderActions = () => (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        mt: 1,
+      }}
+    >
+      {user && (
+        <Button
+          size='small'
+          sx={{
+            width: 'fit-content',
+            backgroundColor: 'primary.light',
+          }}
+          color={isSaved ? 'secondary' : 'primary'}
+          onClick={() => handleAction('save')}
+        >
+          {isSaved ? 'Unsaved' : 'Save'}
+        </Button>
+      )}
+    </Box>
+  );
 
   // Extracted component for needs section
   const NeedsSection = () =>
@@ -127,7 +143,26 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
       <Card sx={cardStyles}>
         <CardHeader
           title={organization.name}
-          subheader={organization.location}
+          subheader={
+            <>
+              {organization.location}
+              <br />
+              <Link
+                href={organization.website}
+                target='_blank'
+                rel='noopener noreferrer'
+                variant='button'
+                sx={{
+                  mt: -1,
+                  textDecoration: 'none',
+                  width: 'fit-content',
+                  textTransform: 'none',
+                }}
+              >
+                Visit Website
+              </Link>
+            </>
+          }
           action={<HeaderActions />}
         />
         <CardContent>
@@ -137,14 +172,6 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
           >
             {organization.description}
           </Typography>
-          <Button
-            size='small'
-            href={organization.website}
-            target='_blank'
-            sx={{ mt: 1 }}
-          >
-            Visit Website
-          </Button>
         </CardContent>
         <CardActions>
           {hasNeeds && (
diff --git a/src/components/Saved/SavedCard.tsx b/src/components/Saved/SavedCard.tsx
index 8e107f5..06c9a50 100644
--- a/src/components/Saved/SavedCard.tsx
+++ b/src/components/Saved/SavedCard.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Card,
   CardContent,
   CardHeader,
@@ -25,13 +26,32 @@ const SavedOrganizationCard: React.FC<{
         title={organization.name}
         subheader={organization.location}
         action={
-          <Button
-            variant='text'
-            color='error'
-            onClick={onRemove}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-end',
+              gap: '0.25rem',
+              mt: 1,
+            }}
           >
-            Remove
-          </Button>
+            <Button
+              size='small'
+              variant='text'
+              color='error'
+              onClick={onRemove}
+            >
+              Unsaved
+            </Button>
+            <Button
+              size='small'
+              sx={{ width: 'fit-content' }}
+              href={organization.website}
+              target='_blank'
+            >
+              Visit Website
+            </Button>
+          </Box>
         }
       />
       <CardContent>
@@ -41,13 +61,6 @@ const SavedOrganizationCard: React.FC<{
         >
           {organization.description}
         </Typography>
-        <Button
-          size='small'
-          href={organization.website}
-          target='_blank'
-        >
-          Visit Website
-        </Button>
       </CardContent>
     </Card>
   );