From aa966c05d7b4915a99782304b272b41a61a03660 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Fri, 16 Jul 2021 15:37:21 +0200
Subject: [PATCH] Adjust header styles

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Header/Header.tsx              | 12 +++++++---
 .../src/layout/HeaderLabel/HeaderLabel.tsx    | 24 +++++++++++--------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 41729f682b..1af1e2cc2f 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -22,13 +22,14 @@ import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';
 import { Breadcrumbs } from '../Breadcrumbs';
 
+const minHeaderHeight = 118;
+
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
     gridArea: 'pageHeader',
     padding: theme.spacing(3),
     height: 'fit-content',
-    // Where does this number come from? :/
-    minHeight: 118,
+    minHeight: minHeaderHeight,
     width: '100%',
     boxShadow: '0 0 8px 3px rgba(20, 20, 20, 0.3)',
     position: 'relative',
@@ -215,7 +216,12 @@ export const Header = ({
           />
           <SubtitleFragment classes={classes} subtitle={subtitle} />
         </div>
-        <Grid container className={classes.rightItemsBox} spacing={4}>
+        <Grid
+          component="div"
+          container
+          className={classes.rightItemsBox}
+          spacing={4}
+        >
           {children}
         </Grid>
       </header>
diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index 8c3df0ba72..f9d8b4d345 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -23,19 +23,15 @@ const useStyles = makeStyles(theme => ({
     display: 'inline-block',
   },
   label: {
-    color: '#FFFFFF',
+    color: theme.palette.common.white,
     fontWeight: 'bold',
-    lineHeight: '16px',
     letterSpacing: 0,
-    fontSize: 14,
-    height: '16px',
-    marginBottom: 4,
+    fontSize: theme.typography.fontSize,
+    marginBottom: theme.spacing(1),
   },
   value: {
     color: 'rgba(255, 255, 255, 0.8)',
-    lineHeight: '16px',
-    fontSize: 14,
-    height: '16px',
+    fontSize: theme.typography.fontSize,
   },
 }));
 
@@ -65,8 +61,16 @@ export const HeaderLabel = ({ label, value, url }: HeaderLabelProps) => {
   return (
     <Grid item>
       <span className={classes.root}>
-        <Typography className={classes.label}>{label}</Typography>
-        {url ? <Link href={url}>{content}</Link> : content}
+        <Typography component="span" className={classes.label}>
+          {label}
+        </Typography>
+        {url ? (
+          <Link component="span" href={url}>
+            {content}
+          </Link>
+        ) : (
+          content
+        )}
       </span>
     </Grid>
   );