style: adjust style

392-f24 · Dec 6, 2024 · 2da5e9b · 2da5e9b
1 parent 3f86797
commit 2da5e9b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/components/Home/DonorDashboard/OrganizationCard.tsx b/src/components/Home/DonorDashboard/OrganizationCard.tsx
@@ -8,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';
@@ -83,35 +84,28 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
     [theme]
   );
 
-  // Extracted component for header actions
   const HeaderActions = () => (
     <Box
       sx={{
         display: 'flex',
-        flexDirection: { xs: 'column', sm: 'column', md: 'column', lg: 'row' },
+        flexDirection: 'column',
         alignItems: 'flex-end',
-        gap: '0.25rem',
         mt: 1,
       }}
     >
       {user && (
         <Button
           size='small'
-          sx={{ width: 'fit-content' }}
+          sx={{
+            width: 'fit-content',
+            backgroundColor: 'primary.light',
+          }}
           color={isSaved ? 'secondary' : 'primary'}
           onClick={() => handleAction('save')}
         >
-          {isSaved ? 'Unsave' : 'Save'}
+          {isSaved ? 'Unsaved' : 'Save'}
         </Button>
       )}
-      <Button
-        size='small'
-        sx={{ width: 'fit-content' }}
-        href={organization.website}
-        target='_blank'
-      >
-        Visit Website
-      </Button>
     </Box>
   );
 
@@ -149,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>

diff --git a/src/components/Saved/SavedCard.tsx b/src/components/Saved/SavedCard.tsx
@@ -29,12 +29,7 @@ const SavedOrganizationCard: React.FC<{
           <Box
             sx={{
               display: 'flex',
-              flexDirection: {
-                xs: 'column',
-                sm: 'column',
-                md: 'column',
-                lg: 'row',
-              },
+              flexDirection: 'column',
               alignItems: 'flex-end',
               gap: '0.25rem',
               mt: 1,
@@ -46,7 +41,7 @@ const SavedOrganizationCard: React.FC<{
               color='error'
               onClick={onRemove}
             >
-              Remove
+              Unsaved
             </Button>
             <Button
               size='small'