From 99caec566fe77cf2311a820c3c507d384861e95b Mon Sep 17 00:00:00 2001
From: JD Welch <jdwelch@spotify.com>
Date: Mon, 3 Feb 2020 16:24:08 +0100
Subject: [PATCH 1/2] saffold of page frame, nav, header

---
 frontend/packages/app/public/index.html |   2 +-
 frontend/packages/app/src/App.tsx       | 105 ++++++++++++++++++++++--
 2 files changed, 101 insertions(+), 6 deletions(-)
diff --git a/frontend/packages/app/public/index.html b/frontend/packages/app/public/index.html
index 54a800cd82..f128e5119a 100644
--- a/frontend/packages/app/public/index.html
+++ b/frontend/packages/app/public/index.html
@@ -53,7 +53,7 @@
     />
     <title>Backstage</title>
   </head>
-  <body>
+  <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index 1dcf4c0125..1eb03c6c39 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -1,13 +1,108 @@
 import React, { FC } from 'react';
 import helloWorld, { MyComponent } from '@backstage/plugin-hello-world';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'grid',
+    // FIXME: Don't used a fixed width here
+    gridTemplateColumns: '224px auto',
+    gridTemplateRows: 'auto 1fr',
+    width: '100%',
+    height: '100vh',
+  },
+  mainContentArea: {
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  sideBar: {
+    background: '#181818',
+    color: 'white',
+    height: '100vh',
+    paddingLeft: '1rem',
+    paddingTop: '1rem',
+  },
+  pageHeader: {
+    // FIXME: Make part of PageHeader component
+    background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
+    height: '120px',
+    paddingTop: '1rem',
+    paddingLeft: '1rem',
+    color: 'white',
+  },
+  pageBody: {
+    paddingLeft: '1rem',
+    paddingTop: '1rem',
+  },
+  avatarButton: {
+    padding: '1rem',
+  },
+}));
 
 const App: FC<{}> = () => {
+  const classes = useStyles();
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>This is Backstage with plugin {helloWorld?.id ?? 'wat'}</p>
-        <MyComponent />
-      </header>
+    <div className={classes.root}>
+      {/* TODO: SideBar component */}
+      {/* Based on NewSideBar from Backstage */}
+      <div className={classes.sideBar}>
+        <Link href="#" variant="body1">
+          [Co-brand Logo]
+        </Link>
+        <List component="nav">
+          <ListItem button>
+            <ListItemText primary="Home" />
+          </ListItem>
+          <ListItem button>
+            <ListItemText primary="Services" />
+          </ListItem>
+          <ListItem button>
+            <ListItemText primary="Libraries" />
+          </ListItem>
+          <ListItem button>
+            <ListItemText primary="Websites" />
+          </ListItem>
+          <ListItem button>
+            <ListItemText primary="+ Create..." />
+          </ListItem>
+        </List>
+        <Grid
+          container
+          direction="row"
+          justify="flex-start"
+          alignItems="center"
+          spacing={2}
+        >
+          <Grid item>
+            <Avatar>A</Avatar>
+          </Grid>
+          <Typography variant="caption">$userName</Typography>
+        </Grid>
+      </div>
+      <div className={classes.mainContentArea}>
+        {/* TODO: PageHeader component */}
+        <header className={classes.pageHeader}>
+          <Typography variant="h2">This is Backstage!</Typography>
+          <Typography variant="caption">
+            Backstage is an open platform for building developer portals
+          </Typography>
+        </header>
+        <div className={classes.pageBody}>
+          <Typography variant="body1">
+            {' '}
+            …with plugin {helloWorld?.id ?? 'wat'}:
+          </Typography>
+          <MyComponent />
+        </div>
+      </div>
     </div>
   );
 };

From 9aad7c9fc4801d9eb4f1bd0118909fa45cd076af Mon Sep 17 00:00:00 2001
From: JD Welch <jdwelch@spotify.com>
Date: Mon, 3 Feb 2020 16:54:48 +0100
Subject: [PATCH 2/2] change fixed units to use theme.spacing()

---
 frontend/packages/app/src/App.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx
index 1eb03c6c39..028ea42185 100644
--- a/frontend/packages/app/src/App.tsx
+++ b/frontend/packages/app/src/App.tsx
@@ -26,23 +26,23 @@ const useStyles = makeStyles(theme => ({
     background: '#181818',
     color: 'white',
     height: '100vh',
-    paddingLeft: '1rem',
-    paddingTop: '1rem',
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(2),
   },
   pageHeader: {
     // FIXME: Make part of PageHeader component
     background: 'linear-gradient(262.63deg, #19D15A 4.2%, #1CAB5B 72.01%)',
     height: '120px',
-    paddingTop: '1rem',
-    paddingLeft: '1rem',
+    paddingTop: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
     color: 'white',
   },
   pageBody: {
-    paddingLeft: '1rem',
-    paddingTop: '1rem',
+    paddingLeft: theme.spacing(2),
+    paddingTop: theme.spacing(2),
   },
   avatarButton: {
-    padding: '1rem',
+    padding: theme.spacing(2),
   },
 }));
 
