#400 code review changes

packages/core/src/layout/InfoCard/InfoCard.js

@@ -29,13 +29,17 @@ import BottomLink from './BottomLink';
 
 import textContent from 'react-addons-text-content';
 
+const styles = theme => ({
+  header: {
+    padding: theme.spacing(2, 2, 2, 2.5)
+  }
+});
+
 const BoldHeader = withStyles({
   title: { fontWeight: '700' },
   subheader: { paddingTop: '2px' },
-  root: {
-    padding: '16px 16px 16px 20px',
-  },
 })(CardHeader);
+
 const CardActionsTopRight = withStyles({
   root: {
     display: 'inline-block',
@@ -191,6 +195,7 @@ class InfoCard extends Component {
           {title && (
             <>
               <BoldHeader
+                className={classes.header}
                 title={title}
                 subheader={subheader}
                 style={{ display: 'inline-block', ...headerStyle }}
@@ -221,4 +226,4 @@ class InfoCard extends Component {
   }
 }
 
-export default InfoCard;
+export default withStyles(styles)(InfoCard);

plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -58,7 +58,7 @@ const HomePage: FC<{}> = () => {
         <Grid container direction="row" spacing={3}>
           <Grid item xs={6}>
             <Typography variant="h3">Things you own</Typography>
-            <InfoCard maxWidth>
+            <InfoCard>
               <TableContainer>
                 <Table size="small" aria-label="a dense table">
                   <TableHead>

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -53,7 +53,7 @@ const WelcomePage: FC<{}> = () => {
         </ContentHeader>
         <Grid container>
           <Grid item xs={12} md={6}>
-            <InfoCard maxWidth>
+            <InfoCard>
               <Typography variant="body1" gutterBottom>
                 You now have a running instance of Backstage!
                 <span role="img" aria-label="confetti">