From c24c8ecfcb2d1e367cb74ea45956f745fc6ec1f8 Mon Sep 17 00:00:00 2001
From: Garry O'Donnell <garry.o'donnell@diamond.ac.uk>
Date: Tue, 30 May 2023 10:42:44 +0000
Subject: [PATCH] Make entire homepage card clickable

---
 .../app/src/components/home/HomePage.tsx      | 73 +++++++++++--------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/backstage/packages/app/src/components/home/HomePage.tsx b/backstage/packages/app/src/components/home/HomePage.tsx
index 1fc633db..531968dc 100644
--- a/backstage/packages/app/src/components/home/HomePage.tsx
+++ b/backstage/packages/app/src/components/home/HomePage.tsx
@@ -3,6 +3,7 @@ import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import {
   Button,
   Card,
+  CardActionArea,
   CardActions,
   CardContent,
   Grid,
@@ -15,52 +16,62 @@ import { useNavigate } from 'react-router-dom';
 
 const SoftwareCatalogCard = () => {
   const navigate = useNavigate();
-  const handleOnClick = () => navigate('/catalog');
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
 
   return (
-    <Card style={{ height: '100%' }}>
-      <CardContent>
-        <Typography variant="h5">
-          <CategoryIcon /> Software Catalog
-        </Typography>
-        <Typography variant="body2">
-          A central location to discover software components developed at{' '}
-          {orgName}.
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="medium" color="primary" onClick={handleOnClick}>
-          Visit
-        </Button>
-      </CardActions>
+    <Card>
+      <CardActionArea onClick={() => navigate('/catalog')}>
+        <CardContent>
+          <Typography variant="h5">
+            <CategoryIcon /> Software Catalog
+          </Typography>
+          <Typography variant="body2">
+            A central location to discover software components developed at{' '}
+            {orgName}.
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button
+            size="medium"
+            color="primary"
+            onClick={() => navigate('/catalog')}
+          >
+            Visit
+          </Button>
+        </CardActions>
+      </CardActionArea>
     </Card>
   );
 };
 
 const DeveloperGuideCard = () => {
   const navigate = useNavigate();
-  const handleOnClick = () => navigate('/guide');
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
 
   return (
     <Card style={{ height: '100%' }}>
-      <CardContent>
-        <Typography variant="h5">
-          <LibraryBooksIcon /> Developer Guide
-        </Typography>
-        <Typography variant="body2">
-          Extensive documentation on developing software at {orgName}. Including
-          Tutorials, How-Tos, Explanations & References.
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="medium" color="primary" onClick={handleOnClick}>
-          Visit
-        </Button>
-      </CardActions>
+      <CardActionArea onClick={() => navigate('/guide')}>
+        <CardContent>
+          <Typography variant="h5">
+            <LibraryBooksIcon /> Developer Guide
+          </Typography>
+          <Typography variant="body2">
+            Extensive documentation on developing software at {orgName}.
+            Including Tutorials, How-Tos, Explanations & References.
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button
+            size="medium"
+            color="primary"
+            onClick={() => navigate('/guide')}
+          >
+            Visit
+          </Button>
+        </CardActions>
+      </CardActionArea>
     </Card>
   );
 };