From bc327dc428b0a5aa783209a370255bb0e964439a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Tue, 2 Mar 2021 13:39:29 +0100
Subject: [PATCH] More compliant, more dense template cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/late-tables-provide.md                     |  5 +++++
 .../src/components/TemplateCard/TemplateCard.tsx      | 11 ++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/late-tables-provide.md

diff --git a/.changeset/late-tables-provide.md b/.changeset/late-tables-provide.md
new file mode 100644
index 0000000000..125d3bc3ac
--- /dev/null
+++ b/.changeset/late-tables-provide.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Tweak the template cards to be even more compliant with MUI examples, and a little bit more dense.
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index abff0538ab..26d5c79cc7 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -19,6 +19,7 @@ import {
   Card,
   CardActions,
   CardContent,
+  CardMedia,
   Chip,
   makeStyles,
   Typography,
@@ -31,7 +32,7 @@ import { rootRouteRef } from '../../routes';
 const useStyles = makeStyles(theme => ({
   header: {
     color: theme.palette.common.white,
-    padding: theme.spacing(2, 2, 6),
+    padding: theme.spacing(2, 2, 3),
     backgroundImage: (props: { backgroundImage: string }) =>
       props.backgroundImage,
     backgroundPosition: 0,
@@ -79,15 +80,15 @@ export const TemplateCard = ({
 
   return (
     <Card className={classes.card}>
-      <div className={classes.header}>
+      <CardMedia className={classes.header}>
         <Typography variant="subtitle2">{type}</Typography>
         <Typography variant="h6">{title}</Typography>
-      </div>
+      </CardMedia>
       <CardContent className={classes.cardContent}>
         {tags?.map(tag => (
-          <Chip label={tag} key={tag} />
+          <Chip size="small" label={tag} key={tag} />
         ))}
-        <Typography variant="body2" paragraph className={classes.description}>
+        <Typography variant="body2" className={classes.description}>
           {description}
         </Typography>
       </CardContent>