From 3caa1f24ebb447f81af8e117144e1398d6739aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sun, 9 Feb 2020 17:17:08 +0100
Subject: [PATCH 1/4] Made logo link to home

---
 .../app/src/components/SideBar/SideBar.tsx        | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/packages/app/src/components/SideBar/SideBar.tsx b/frontend/packages/app/src/components/SideBar/SideBar.tsx
index 0f2468939b..20855ff2cf 100644
--- a/frontend/packages/app/src/components/SideBar/SideBar.tsx
+++ b/frontend/packages/app/src/components/SideBar/SideBar.tsx
@@ -92,7 +92,6 @@ const SidebarItem: FC<SidebarItemProps> = ({
 const useSidebarLogoStyles = makeStyles({
   root: {
     height: drawerWidthClosed,
-    color: '#fff',
     display: 'flex',
     flexFlow: 'row nowrap',
     alignItems: 'center',
@@ -103,14 +102,12 @@ const useSidebarLogoStyles = makeStyles({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  logo: {
-    fontSize: 32,
-  },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
     marginLeft: 22,
     whiteSpace: 'nowrap',
+    color: '#fff',
   },
   titleDot: {
     color: '#1DB954',
@@ -123,10 +120,12 @@ const SidebarLogo: FC<{}> = () => {
 
   return (
     <div className={classes.root}>
-      <Typography variant="h6" color="inherit" className={classes.title}>
-        {open ? 'Backstage' : 'B'}
-        <span className={classes.titleDot}>.</span>
-      </Typography>
+      <Link href="/" underline="none">
+        <Typography variant="h6" color="inherit" className={classes.title}>
+          {open ? 'Backstage' : 'B'}
+          <span className={classes.titleDot}>.</span>
+        </Typography>
+      </Link>
     </div>
   );
 };

From 09afb37f44e8289ec06186194a6f386f19cc6ce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sun, 9 Feb 2020 17:46:39 +0100
Subject: [PATCH 2/4] Add greetings message to home

---
 frontend/package.json                         |  3 ++-
 .../time/locales/goodAfternoon.locales.json   |  0
 .../time/locales/goodEvening.locales.json     |  0
 .../time/locales/goodMorning.locales.json     |  3 +--
 .../apis => core/src/api}/time/timeUtil.js    |  2 +-
 .../src/api}/time/timeUtil.test.js            |  0
 frontend/packages/core/src/index.ts           |  1 +
 .../src/components/HomePage/HomePage.tsx      | 24 ++++++++++++-------
 frontend/yarn.lock                            |  5 ++++
 9 files changed, 25 insertions(+), 13 deletions(-)
 rename frontend/packages/{shared/apis => core/src/api}/time/locales/goodAfternoon.locales.json (100%)
 rename frontend/packages/{shared/apis => core/src/api}/time/locales/goodEvening.locales.json (100%)
 rename frontend/packages/{shared/apis => core/src/api}/time/locales/goodMorning.locales.json (98%)
 rename frontend/packages/{shared/apis => core/src/api}/time/timeUtil.js (94%)
 rename frontend/packages/{shared/apis => core/src/api}/time/timeUtil.test.js (100%)

diff --git a/frontend/package.json b/frontend/package.json
index 2ac9ef11ed..ac4b2d6506 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "@types/classnames": "^2.2.9"
+    "@types/classnames": "^2.2.9",
+    "moment": "^2.24.0"
   }
 }
diff --git a/frontend/packages/shared/apis/time/locales/goodAfternoon.locales.json b/frontend/packages/core/src/api/time/locales/goodAfternoon.locales.json
similarity index 100%
rename from frontend/packages/shared/apis/time/locales/goodAfternoon.locales.json
rename to frontend/packages/core/src/api/time/locales/goodAfternoon.locales.json
diff --git a/frontend/packages/shared/apis/time/locales/goodEvening.locales.json b/frontend/packages/core/src/api/time/locales/goodEvening.locales.json
similarity index 100%
rename from frontend/packages/shared/apis/time/locales/goodEvening.locales.json
rename to frontend/packages/core/src/api/time/locales/goodEvening.locales.json
diff --git a/frontend/packages/shared/apis/time/locales/goodMorning.locales.json b/frontend/packages/core/src/api/time/locales/goodMorning.locales.json
similarity index 98%
rename from frontend/packages/shared/apis/time/locales/goodMorning.locales.json
rename to frontend/packages/core/src/api/time/locales/goodMorning.locales.json
index 7863f3f0d6..bf728664c0 100644
--- a/frontend/packages/shared/apis/time/locales/goodMorning.locales.json
+++ b/frontend/packages/core/src/api/time/locales/goodMorning.locales.json
@@ -8,7 +8,7 @@
   "Bengali": "shuprobhat",
   "Bulgarian": "Dobro utro",
   "Catalan": "Bon dia",
-  "Chinese": "zǎoān",
+  "Chinese": "早安",
   "Croatian": "Dobro jutro",
   "Czech": "Dobré ráno",
   "Danish": "God morgen",
@@ -56,7 +56,6 @@
   "Uzbek": "Hayirli tong",
   "Vietnamese": "Chào buổi sáng",
   "Welsh": "Bore da",
-  "Chinese": "早安",
   "Latvian": "Labrīt",
   "Valyrian": "Sȳz ñāqes"
 }
diff --git a/frontend/packages/shared/apis/time/timeUtil.js b/frontend/packages/core/src/api/time/timeUtil.js
similarity index 94%
rename from frontend/packages/shared/apis/time/timeUtil.js
rename to frontend/packages/core/src/api/time/timeUtil.js
index da6cfccd4e..5500979b8c 100644
--- a/frontend/packages/shared/apis/time/timeUtil.js
+++ b/frontend/packages/core/src/api/time/timeUtil.js
@@ -44,7 +44,7 @@ export function getTimeBasedGreeting() {
     if (hour < 17) return 'goodAfternoon';
     if (hour < 23) return 'goodEvening';
   };
-  const greetings = require(`shared/apis/time/locales/${timeOfDay(hour)}.locales.json`);
+  const greetings = require(`./locales/${timeOfDay(hour)}.locales.json`);
   const greetingsKey = random(Object.keys(greetings));
   return {
     language: greetingsKey,
diff --git a/frontend/packages/shared/apis/time/timeUtil.test.js b/frontend/packages/core/src/api/time/timeUtil.test.js
similarity index 100%
rename from frontend/packages/shared/apis/time/timeUtil.test.js
rename to frontend/packages/core/src/api/time/timeUtil.test.js
diff --git a/frontend/packages/core/src/index.ts b/frontend/packages/core/src/index.ts
index 32467adfc3..80fcfbb077 100644
--- a/frontend/packages/core/src/index.ts
+++ b/frontend/packages/core/src/index.ts
@@ -1,3 +1,4 @@
+export { getTimeBasedGreeting } from './api/time/timeUtil';
 export * from './api';
 export {
   default as EntityLink,
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 a1634811b6..4329fba8f0 100644
--- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
+++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
@@ -1,11 +1,5 @@
 import React, { FC } from 'react';
-import {
-  Typography,
-  makeStyles,
-  Theme,
-  Grid,
-  LinearProgress,
-} from '@material-ui/core';
+import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
 import HomePageTimer from '../HomepageTimer';
 import {
   EntityLink,
@@ -14,6 +8,8 @@ import {
   Header,
   Page,
   theme,
+  Progress,
+  getTimeBasedGreeting,
 } from '@backstage/core';
 import SquadTechHealth from './SquadTechHealth';
 import { useAsync } from 'react-use';
@@ -70,7 +66,7 @@ const HomePage: FC<{}> = () => {
   ];
 
   if (status.loading) {
-    return <LinearProgress />;
+    return <Progress />;
   }
 
   const data = STATIC_DATA.concat(status?.value ?? []).map(({ id, kind }) => {
@@ -85,10 +81,20 @@ const HomePage: FC<{}> = () => {
     };
   });
 
+  const greeting = getTimeBasedGreeting();
+  const profile = { givenName: 'Suzy' };
+
   return (
     <Page theme={theme.home}>
       <div className={classes.mainContentArea}>
-        <Header title="This is Backstage!">
+        <Header
+          title={
+            profile
+              ? `${greeting.greeting}, ${profile.givenName}`
+              : greeting.greeting
+          }
+          tooltip={greeting.language}
+        >
           <HomePageTimer />
         </Header>
         <div className={classes.pageBody}>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 81188e6a16..b3c7d0d45b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11062,6 +11062,11 @@ modify-values@^1.0.0:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"

From ecc2016779f5971040685d8c60d6cb3c14451ecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sun, 9 Feb 2020 17:48:03 +0100
Subject: [PATCH 3/4] Subtitle in Header

---
 .../plugins/home-page/src/components/HomePage/HomePage.tsx       | 1 +
 1 file changed, 1 insertion(+)

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 4329fba8f0..b9638c7b67 100644
--- a/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
+++ b/frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx
@@ -94,6 +94,7 @@ const HomePage: FC<{}> = () => {
               : greeting.greeting
           }
           tooltip={greeting.language}
+          subtitle="Welcome to Backstage"
         >
           <HomePageTimer />
         </Header>

From b3bb002ffed3c2aa69e2d3001fb4d08c628d0bdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sun, 9 Feb 2020 20:04:47 +0100
Subject: [PATCH 4/4] Styling of main sidebar

---
 .../app/src/components/SideBar/SideBar.tsx      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/app/src/components/SideBar/SideBar.tsx b/frontend/packages/app/src/components/SideBar/SideBar.tsx
index 20855ff2cf..028de88e16 100644
--- a/frontend/packages/app/src/components/SideBar/SideBar.tsx
+++ b/frontend/packages/app/src/components/SideBar/SideBar.tsx
@@ -4,6 +4,7 @@ import {
   makeStyles,
   SvgIcon,
   Typography,
+  Theme,
   Link,
   styled,
 } from '@material-ui/core';
@@ -19,7 +20,7 @@ const drawerWidthOpen = 220;
 
 const Context = createContext<boolean>(false);
 
-const useSidebarItemStyles = makeStyles({
+const useSidebarItemStyles = makeStyles<Theme>(theme => ({
   root: {
     color: '#b5b5b5',
     display: 'flex',
@@ -35,15 +36,21 @@ const useSidebarItemStyles = makeStyles({
   open: {
     width: drawerWidthOpen,
   },
+  label: {
+    fontWeight: 'bolder',
+    whiteSpace: 'nowrap',
+    lineHeight: 1.0,
+    marginLeft: theme.spacing(1),
+  },
   iconContainer: {
     height: '100%',
     width: drawerWidthClosed,
-    marginRight: -16,
+    marginRight: -theme.spacing(2),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
   },
-});
+}));
 
 type SidebarItemProps = {
   icon: typeof SvgIcon;
@@ -84,7 +91,9 @@ const SidebarItem: FC<SidebarItemProps> = ({
       <div className={classes.iconContainer}>
         <Icon fontSize="small" />
       </div>
-      <Typography variant="subtitle2">{text}</Typography>
+      <Typography variant="subtitle1" className={classes.label}>
+        {text}
+      </Typography>
     </Link>
   );
 };