From 23c57bd1a3f71d7b4591f3f904e7bd9041b9c844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Mon, 8 Jun 2020 11:58:44 +0200
Subject: [PATCH] Minor tweaks to catalog UI (#1176)

* Minor tweaks to catalog UI

* Review feedback

* Use styles instead
---
 packages/core/src/layout/HeaderTabs/index.tsx          |  1 +
 packages/theme/src/baseTheme.ts                        |  1 +
 .../catalog/src/components/CatalogPage/CatalogPage.tsx | 10 +++++++---
 plugins/catalog/src/data/filters.ts                    |  3 ++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/layout/HeaderTabs/index.tsx b/packages/core/src/layout/HeaderTabs/index.tsx
index 158cd76913..340b39f862 100644
--- a/packages/core/src/layout/HeaderTabs/index.tsx
+++ b/packages/core/src/layout/HeaderTabs/index.tsx
@@ -24,6 +24,7 @@ const useStyles = makeStyles(theme => ({
   tabsWrapper: {
     gridArea: 'pageSubheader',
     backgroundColor: theme.palette.background.paper,
+    paddingLeft: theme.spacing(3),
   },
   defaultTab: {
     padding: theme.spacing(3, 3),
diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts
index bac67f4e47..955b182ae9 100644
--- a/packages/theme/src/baseTheme.ts
+++ b/packages/theme/src/baseTheme.ts
@@ -141,6 +141,7 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides {
         color: theme.palette.link,
         minHeight: 24,
         textTransform: 'initial',
+        letterSpacing: '0.07em',
         '&:hover': {
           color: darken(theme.palette.link, 0.3),
           background: lighten(theme.palette.link, 0.95),
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index aeaef3e202..da22e94fa8 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -51,6 +51,10 @@ const useStyles = makeStyles(theme => ({
     gridTemplateColumns: '250px 1fr',
     gridColumnGap: theme.spacing(2),
   },
+  emoji: {
+    fontSize: '125%',
+    marginRight: theme.spacing(2),
+  },
 }));
 
 import { catalogApiRef } from '../..';
@@ -134,14 +138,14 @@ const CatalogPage: FC<{}> = () => {
           variant="info"
           message={
             <Typography>
-              <span role="img" aria-label="wave" style={{ fontSize: '125%' }}>
+              <span role="img" aria-label="wave" className={styles.emoji}>
                 👋🏼
               </span>
               Welcome to Backstage, we are happy to have you. Start by checking
-              out our
+              out our{' '}
               <Link href="/welcome" color="textSecondary">
                 getting started
-              </Link>
+              </Link>{' '}
               page.
             </Typography>
           }
diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts
index 66eb55b478..1b0a2a407c 100644
--- a/plugins/catalog/src/data/filters.ts
+++ b/plugins/catalog/src/data/filters.ts
@@ -39,7 +39,8 @@ export const filterGroups: CatalogFilterGroup[] = [
     ],
   },
   {
-    name: 'Spotify',
+    // TODO: Replace with Company name, read from app config.
+    name: 'Company',
     items: [
       {
         id: 'all',