From e6c0b80b346a1f581a33d5e9472e579715c44faf Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 7 Feb 2020 14:56:57 +0100
Subject: [PATCH] front/plugins/home-page: nicer

---
 .../src/components/HomePage/HomePage.tsx      | 23 +++++++++++--------
 .../components/HomePage/SquadTechHealth.tsx   |  4 +++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
index db3d9fba5f..bac73580ea 100644
--- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
+++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
@@ -10,6 +10,7 @@ import {
   theme,
 } from '@backstage/core';
 import SquadTechHealth from './SquadTechHealth';
+import { inventoryV1 } from '@backstage/protobuf-definitions';
 
 const useStyles = makeStyles<Theme>(theme => ({
   mainContentArea: {
@@ -17,7 +18,7 @@ const useStyles = makeStyles<Theme>(theme => ({
     overflowY: 'auto',
   },
   pageBody: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(3),
   },
   avatarButton: {
     padding: theme.spacing(2),
@@ -27,7 +28,7 @@ const useStyles = makeStyles<Theme>(theme => ({
 const HomePage: FC<{}> = () => {
   const classes = useStyles();
   const columns = [
-    { id: 'id', label: 'ID' },
+    { id: 'entity', label: 'ID' },
     { id: 'kind', label: 'Kind' },
   ];
 
@@ -36,7 +37,8 @@ const HomePage: FC<{}> = () => {
     { id: 'backstage-microsite', kind: 'website' },
   ].map(({ id, kind }) => {
     return {
-      id: (
+      id,
+      entity: (
         <EntityLink kind={kind} id={id}>
           <Typography color="primary">{id}</Typography>
         </EntityLink>
@@ -52,15 +54,18 @@ const HomePage: FC<{}> = () => {
           <HomePageTimer />
         </Header>
         <div className={classes.pageBody}>
-          <Grid container direction="column" spacing={6}>
-            <Grid item xs={12}>
-              <SquadTechHealth />
-            </Grid>
-            <Grid item xs={4}>
-              <InfoCard title="Stuff you own" maxWidth>
+          <Grid container direction="row" spacing={3}>
+            <Grid item xs={6}>
+              <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+                Things you own
+              </Typography>
+              <InfoCard maxWidth>
                 <SortableTable data={data} columns={columns} orderBy="id" />
               </InfoCard>
             </Grid>
+            <Grid item xs={6}>
+              <SquadTechHealth />
+            </Grid>
           </Grid>
         </div>
       </div>
diff --git a/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx b/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx
index 5eeaeafc7f..f20279668e 100644
--- a/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx
+++ b/frontend/packages/plugins/home-page/src/components/HomePage/SquadTechHealth.tsx
@@ -6,7 +6,9 @@ import { HorizontalScrollGrid, ProgressCard } from '@backstage/core';
 const SquadTechHealth: FC<{}> = () => {
   return (
     <>
-      <Typography variant="h3">Team Metrics</Typography>
+      <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+        Team Metrics
+      </Typography>
       <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>
         <Grid item>
           <ProgressCard