Update default theme for headings

packages/core/src/theme/BackstageTheme.js

@@ -73,6 +73,29 @@ const extendedThemeConfig = {
   },
   typography: {
     fontFamily: '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif',
+    h5: {
+      fontWeight: 700,
+    },
+    h4: {
+      fontWeight: 700,
+      fontSize: 28,
+      marginBottom: 6,
+    },
+    h3: {
+      fontSize: 32,
+      fontWeight: 700,
+      marginBottom: 6,
+    },
+    h2: {
+      fontSize: 40,
+      fontWeight: 700,
+      marginBottom: 8,
+    },
+    h1: {
+      fontSize: 54,
+      fontWeight: 700,
+      marginBottom: 10,
+    },
   },
 };
 

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

@@ -60,9 +60,7 @@ const HomePage: FC<{}> = () => {
         <Content>
           <Grid container direction="row" spacing={3}>
             <Grid item xs={6}>
-              <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
-                Things you own
-              </Typography>
+              <Typography variant="h3">Things you own</Typography>
               <InfoCard maxWidth>
                 <SortableTable data={data} columns={columns} orderBy="id" />
               </InfoCard>

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

@@ -6,9 +6,7 @@ import { HorizontalScrollGrid, ProgressCard } from '@spotify-backstage/core';
 const SquadTechHealth: FC<{}> = () => {
   return (
     <>
-      <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
-        Team Metrics
-      </Typography>
+      <Typography variant="h3">Team Metrics</Typography>
       <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>
         <Grid item>
           <ProgressCard