Merge pull request #102 from spotify/alund/home-click

Made logo link to home + welcome message

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"
   }
 }

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>
   );
 };
@@ -92,7 +101,6 @@ const SidebarItem: FC<SidebarItemProps> = ({
 const useSidebarLogoStyles = makeStyles({
   root: {
     height: drawerWidthClosed,
-    color: '#fff',
     display: 'flex',
     flexFlow: 'row nowrap',
     alignItems: 'center',
@@ -103,14 +111,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 +129,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>
   );
 };

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"
 }

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,

frontend/packages/core/src/index.ts

@@ -1,3 +1,4 @@
+export { getTimeBasedGreeting } from './api/time/timeUtil';
 export * from './api';
 export {
   default as EntityLink,

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,21 @@ 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}
+          subtitle="Welcome to Backstage"
+        >
           <HomePageTimer />
         </Header>
         <div className={classes.pageBody}>

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"