style: update styling of organization cards (#30)

--------- Co-authored-by: Elara Liu <[email protected]>
392-f24 · Dec 6, 2024 · eda1489 · eda1489
1 parent d5c1b56
commit eda1489
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 32 deletions.
diff --git 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
@@ -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>
   );