move view website button next to save button

392-f24 · Dec 6, 2024 · db92a74 · db92a74
1 parent 6037b31
commit db92a74
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 27 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,
@@ -83,15 +84,36 @@ const OrganizationCard = ({ organization }: OrganizationCardProps) => {
   );
 
   // Extracted component for header actions
-  const HeaderActions = () =>
-    user && (
+  const HeaderActions = () => (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'column', md: 'column', lg: 'row' },
+        alignItems: 'flex-end',
+        gap: '0.25rem',
+        mt: 1,
+      }}
+    >
+      {user && (
+        <Button
+          size='small'
+          sx={{ width: 'fit-content' }}
+          color={isSaved ? 'secondary' : 'primary'}
+          onClick={() => handleAction('save')}
+        >
+          {isSaved ? 'Unsave' : 'Save'}
+        </Button>
+      )}
       <Button
-        color={isSaved ? 'secondary' : 'primary'}
-        onClick={() => handleAction('save')}
+        size='small'
+        sx={{ width: 'fit-content' }}
+        href={organization.website}
+        target='_blank'
       >
-        {isSaved ? 'Unsave' : 'Save'}
+        Visit Website
       </Button>
-    );
+    </Box>
+  );
 
   // Extracted component for needs section
   const NeedsSection = () =>
@@ -137,14 +159,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,37 @@ const SavedOrganizationCard: React.FC<{
         title={organization.name}
         subheader={organization.location}
         action={
-          <Button
-            variant='text'
-            color='error'
-            onClick={onRemove}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'column',
+                lg: 'row',
+              },
+              alignItems: 'flex-end',
+              gap: '0.25rem',
+              mt: 1,
+            }}
           >
-            Remove
-          </Button>
+            <Button
+              size='small'
+              variant='text'
+              color='error'
+              onClick={onRemove}
+            >
+              Remove
+            </Button>
+            <Button
+              size='small'
+              sx={{ width: 'fit-content' }}
+              href={organization.website}
+              target='_blank'
+            >
+              Visit Website
+            </Button>
+          </Box>
         }
       />
       <CardContent>
@@ -41,13 +66,6 @@ const SavedOrganizationCard: React.FC<{
         >
           {organization.description}
         </Typography>
-        <Button
-          size='small'
-          href={organization.website}
-          target='_blank'
-        >
-          Visit Website
-        </Button>
       </CardContent>
     </Card>
   );