Fix default page layout

Fixes https://github.com/spotify/backstage/issues/127

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -1,11 +1,6 @@
 import React, { FC } from 'react';
 import { Typography, Grid, makeStyles, Theme } from '@material-ui/core';
-import {
-  InfoCard,
-  Header,
-  Page,
-  theme as pageTheme,
-} from '@spotify-backstage/core';
+import { InfoCard, Header, Page, pageTheme } from '@spotify-backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const useStyles = makeStyles<Theme>(theme => ({

packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Header, useEntity, useEntityConfig, theme } from '../..';
+import { Header, useEntity, useEntityConfig, pageTheme } from '../..';
 import { EntityPageHeaderProps } from '../../api/entityView/types';
 import { Theme } from '../../layout/Page/Page';
 
@@ -9,7 +9,7 @@ const DefaultEntityPageHeader: FC<EntityPageHeaderProps> = () => {
 
   // TODO(rugvip): provide theme through entity config
   return (
-    <Theme.Provider value={theme.service}>
+    <Theme.Provider value={pageTheme.service}>
       <Header title={`${config.title} - ${id}`} />
     </Theme.Provider>
   );

packages/core/src/index.ts

@@ -4,7 +4,7 @@ export {
   RelativeEntityLink,
 } from './components/EntityLink';
 export { default as Page } from './layout/Page';
-export { gradients, theme } from './layout/Page';
+export { gradients, pageTheme, PageTheme } from './layout/Page';
 export { default as Content } from './layout/Content/Content';
 export { default as ContentHeader } from './layout/ContentHeader/ContentHeader';
 export { default as Header } from './layout/Header/Header';

packages/core/src/layout/Content/Content.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react';
-import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { Theme } from '@material-ui/core';
+import { Theme, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -11,38 +9,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingBottom: theme.spacing(3),
     ...theme.mixins.gutters({}),
   },
-  centered: {
-    maxWidth: 1600,
-    justifySelf: 'center',
-  },
-  centerWrapper: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  centerContent: {
-    width: '100%',
-    maxWidth: 1600,
-  },
 }));
 
-type Props = {
-  centered?: boolean;
-  className?: string;
-};
-
-const Content: FC<Props> = ({ centered = false, className = '', children, ...props }) => {
+const Content: FC<{}> = ({ children, ...props }) => {
   const classes = useStyles();
-
-  if (centered) {
-    return (
-      <article {...props} className={classNames(classes.root, className, classes.centerWrapper)}>
-        <div className={classes.centerContent}>{children}</div>
-      </article>
-    );
-  }
-
   return (
-    <article {...props} className={classNames(classes.root, className)}>
+    <article {...props} className={classes.root}>
       {children}
     </article>
   );

packages/core/src/layout/Header/Burst.js

@@ -17,11 +17,11 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
     'background-repeat': 'no-repeat',
     'background-size': 'cover',
-    opacity:0.1,
-  }
+    opacity: 0.1,
+  },
 }));
 
-const Burst = ({theme}) => {
+const Burst = ({ theme }) => {
   const classes = useStyles();
 
   return (
@@ -29,6 +29,6 @@ const Burst = ({theme}) => {
       <div className={classes.burstShape} style={theme.burstShape} />
     </div>
   );
-}
+};
 
 export default Burst;

packages/core/src/layout/Page/Page.tsx

@@ -1,20 +1,31 @@
-import React, { Component } from 'react';
-import { theme } from './PageThemeProvider';
+import React, { FC } from 'react';
+import { PageTheme, pageTheme } from './PageThemeProvider';
+import { makeStyles } from '@material-ui/core';
 
-type Theme = typeof theme['service'];
+export const Theme = React.createContext<PageTheme>(pageTheme.service);
 
-export const Theme = React.createContext<Theme>(theme.service);
+const useStyles = makeStyles(() => ({
+  root: {
+    display: 'grid',
+    gridTemplateAreas:
+      "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
+    gridTemplateRows: 'auto auto 1fr',
+    gridTemplateColumns: 'auto 1fr auto',
+    minHeight: '100%',
+  },
+}));
 
-class Page extends Component<{ theme: Theme }> {
-  static defaultProps = {
-    theme: theme.home,
-  };
+type Props = {
+  theme?: PageTheme;
+};
 
-  render() {
-    const { theme, children } = this.props;
-
-    return <Theme.Provider value={theme}>{children}</Theme.Provider>;
-  }
-}
+const Page: FC<Props> = ({ theme = pageTheme.home, children }) => {
+  const classes = useStyles();
+  return (
+    <Theme.Provider value={theme}>
+      <div className={classes.root}>{children}</div>
+    </Theme.Provider>
+  );
+};
 
 export default Page;

packages/core/src/layout/Page/PageThemeProvider.ts

@@ -19,7 +19,13 @@ export const gradients = {
   sky: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)',
 };
 
-export const theme = {
+export type PageTheme = {
+  activeNavLinkColor: string;
+  gradient: string;
+  burstShape: any;
+};
+
+export const pageTheme: Record<string, PageTheme> = {
   service: {
     activeNavLinkColor: '#1D7F6E',
     gradient: gradients.tealGreen,

packages/core/src/layout/Page/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Page';
-export { gradients, theme } from './PageThemeProvider';
+export { gradients, pageTheme, PageTheme } from './PageThemeProvider';

plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
 import HomePageTimer from '../HomepageTimer';
 import {
   Content,
@@ -8,7 +8,7 @@ import {
   SortableTable,
   Header,
   Page,
-  theme,
+  pageTheme,
 } from '@spotify-backstage/core';
 import SquadTechHealth from './SquadTechHealth';
 
@@ -17,18 +17,7 @@ const STATIC_DATA = [
   { id: 'backstage-microsite', kind: 'website' },
 ];
 
-const useStyles = makeStyles<Theme>(theme => ({
-  mainContentArea: {
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  },
-  avatarButton: {
-    padding: theme.spacing(2),
-  },
-}));
-
 const HomePage: FC<{}> = () => {
-  const classes = useStyles();
   const columns = [
     { id: 'entity', label: 'ID' },
     { id: 'kind', label: 'Kind' },
@@ -49,30 +38,28 @@ const HomePage: FC<{}> = () => {
   const profile = { givenName: 'Suzy' };
 
   return (
-    <Page theme={theme.home}>
-      <div className={classes.mainContentArea}>
-        <Header
-          title={profile ? `Hello, ${profile.givenName}` : 'Hello'}
-          subtitle="Welcome to Backstage"
-        >
-          <HomePageTimer />
-        </Header>
-        <Content>
-          <Grid container direction="row" spacing={3}>
-            <Grid item xs={6}>
-              <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
-                Things you own
-              </Typography>
-              <InfoCard maxWidth>
-                <SortableTable data={data} columns={columns} orderBy="id" />
-              </InfoCard>
-            </Grid>
-            <Grid item xs={6}>
-              <SquadTechHealth />
-            </Grid>
+    <Page theme={pageTheme.home}>
+      <Header
+        title={profile ? `Hello, ${profile.givenName}` : 'Hello'}
+        subtitle="Welcome to Backstage"
+      >
+        <HomePageTimer />
+      </Header>
+      <Content>
+        <Grid container direction="row" spacing={3}>
+          <Grid item xs={6}>
+            <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+              Things you own
+            </Typography>
+            <InfoCard maxWidth>
+              <SortableTable data={data} columns={columns} orderBy="id" />
+            </InfoCard>
           </Grid>
-        </Content>
-      </div>
+          <Grid item xs={6}>
+            <SquadTechHealth />
+          </Grid>
+        </Grid>
+      </Content>
     </Page>
   );
 };