make the template cards conform to mui standard

.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.

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>
   );
 };

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();
   });

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"