From 920f496a7f52a5d8c94378d5653f9b118348a05e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Mon, 8 Jun 2020 20:45:26 +0200
Subject: [PATCH] Use service theme (#1197)

* Use service theme

* Theme spacing

* breadcrumbs
---
 packages/core/src/layout/Header/Header.tsx        | 15 +++++----------
 .../components/ComponentPage/ComponentPage.tsx    |  5 +++--
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx
index ce50a2680f..cc2c8d1182 100644
--- a/packages/core/src/layout/Header/Header.tsx
+++ b/packages/core/src/layout/Header/Header.tsx
@@ -61,9 +61,9 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   type: {
     textTransform: 'uppercase',
-    fontSize: 9,
+    fontSize: 11,
     opacity: 0.8,
-    marginBottom: 10,
+    marginBottom: theme.spacing(1),
     color: theme.palette.bursts.fontColor,
   },
 }));
@@ -104,16 +104,11 @@ const TypeFragment: FC<TypeFragmentProps> = ({ type, typeLink, classes }) => {
   }
 
   if (!typeLink) {
-    return (
-      // </Link>
-      <Typography className={classes.type}>{type}</Typography>
-    );
+    // TODO: Add breadcrumbs.
+    return <Typography className={classes.type}>{type}</Typography>;
   }
 
-  return (
-    // <Link to={typeLink}>
-    <Typography className={classes.type}>{type}</Typography>
-  );
+  return <Typography className={classes.type}>{type}</Typography>;
 };
 
 const TitleFragment: FC<TitleFragmentProps> = ({
diff --git a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
index b9c89604b0..f26c21b6ca 100644
--- a/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
+++ b/plugins/catalog/src/components/ComponentPage/ComponentPage.tsx
@@ -115,8 +115,9 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
   ];
 
   return (
-    <Page theme={pageTheme.home}>
-      <Header title={component?.name || 'Catalog'}>
+    // TODO: Switch theme and type props based on component type (website, library, ...)
+    <Page theme={pageTheme.service}>
+      <Header title={component?.name || 'Catalog'} type="Service">
         <ComponentContextMenu onUnregisterComponent={showRemovalDialog} />
       </Header>
       <HeaderTabs tabs={tabs} />