From 6c4a76c595863bb501b6e13b352a46f9167c5d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Fri, 12 Feb 2021 14:24:52 +0100
Subject: [PATCH] make the template cards conform to mui standard

---
 .changeset/chilly-cars-shout.md               |  5 ++++
 .../components/TemplateCard/TemplateCard.tsx  | 23 ++++++++-----------
 .../TemplatePage/TemplatePage.test.tsx        |  6 ++---
 .../components/TemplatePage/TemplatePage.tsx  |  4 ++--
 4 files changed, 19 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/chilly-cars-shout.md

diff --git a/.changeset/chilly-cars-shout.md b/.changeset/chilly-cars-shout.md
new file mode 100644
index 0000000000..60871b07a3
--- /dev/null
+++ b/.changeset/chilly-cars-shout.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Make the `TemplateCard` conform to what material-ui recommends in their examples. This fixes the extra padding around the buttons.
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 732b5f3e44..ef17335b26 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -17,6 +17,8 @@ import { Button } from '@backstage/core';
 import { BackstageTheme, pageTheme } from '@backstage/theme';
 import {
   Card,
+  CardActions,
+  CardContent,
   Chip,
   makeStyles,
   Typography,
@@ -34,18 +36,11 @@ const useStyles = makeStyles(theme => ({
       props.backgroundImage,
     backgroundPosition: 0,
   },
-  content: {
-    padding: theme.spacing(2),
-  },
   description: {
     height: 175,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
-  footer: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
-  },
 }));
 
 export type TemplateCardProps = {
@@ -76,19 +71,19 @@ export const TemplateCard = ({
         <Typography variant="subtitle2">{type}</Typography>
         <Typography variant="h6">{title}</Typography>
       </div>
-      <div className={classes.content}>
+      <CardContent>
         {tags?.map(tag => (
           <Chip label={tag} key={tag} />
         ))}
         <Typography variant="body2" paragraph className={classes.description}>
           {description}
         </Typography>
-        <div className={classes.footer}>
-          <Button color="primary" to={href}>
-            Choose
-          </Button>
-        </div>
-      </div>
+      </CardContent>
+      <CardActions>
+        <Button color="primary" to={href}>
+          Choose
+        </Button>
+      </CardActions>
     </Card>
   );
 };
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
index f3f97be877..09df6dba1a 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
@@ -99,7 +99,7 @@ describe('TemplatePage', () => {
       </ApiProvider>,
     );
 
-    expect(rendered.queryByText('Create a new component')).toBeInTheDocument();
+    expect(rendered.queryByText('Create a New Component')).toBeInTheDocument();
     expect(rendered.queryByText('React SSR Template')).toBeInTheDocument();
     // await act(async () => await mutate('templates/test'));
   });
@@ -116,7 +116,7 @@ describe('TemplatePage', () => {
       </ApiProvider>,
     );
 
-    expect(rendered.queryByText('Create a new component')).toBeInTheDocument();
+    expect(rendered.queryByText('Create a New Component')).toBeInTheDocument();
     expect(rendered.queryByTestId('loading-progress')).toBeInTheDocument();
     // Need to cleanup the promise or will timeout
     act(() => {
@@ -141,7 +141,7 @@ describe('TemplatePage', () => {
     );
 
     expect(
-      rendered.queryByText('Create a new component'),
+      rendered.queryByText('Create a New Component'),
     ).not.toBeInTheDocument();
     expect(rendered.queryByText('This is root')).toBeInTheDocument();
   });
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index e1422d4ec1..d779f8b42c 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -149,10 +149,10 @@ export const TemplatePage = () => {
   return (
     <Page themeId="home">
       <Header
-        pageTitleOverride="Create a new component"
+        pageTitleOverride="Create a New Component"
         title={
           <>
-            Create a new component <Lifecycle alpha shorthand />
+            Create a New Component <Lifecycle alpha shorthand />
           </>
         }
         subtitle="Create new software components using standard templates"