Rename Scaffolder -> Create (#712)

* Rename Scaffolder -> Create

* Use Typography

packages/app/src/components/Root/Root.tsx

@@ -20,7 +20,7 @@ import { Link, makeStyles, Typography } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExploreIcon from '@material-ui/icons/Explore';
 import AccountCircle from '@material-ui/icons/AccountCircle';
-import CreateComponentIcon from '@material-ui/icons/Create';
+import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import {
   Sidebar,
@@ -83,7 +83,7 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarDivider />
       <SidebarItem icon={HomeIcon} to="/" text="Home" />
       <SidebarItem icon={ExploreIcon} to="/explore" text="Explore" />
-      <SidebarItem icon={CreateComponentIcon} to="/scaffolder" text="Create" />
+      <SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />
       <SidebarDivider />
       <SidebarItem icon={AccountTreeIcon} to="/inventory" text="Inventory" />
       <SidebarItem icon={AccountCircle} to="/login" text="Login" />

plugins/scaffolder/src/components/ScaffolderPage/index.tsx

@@ -15,7 +15,16 @@
  */
 
 import React from 'react';
-import { Content, InfoCard, Header, Page, pageTheme } from '@backstage/core';
+import {
+  AlphaLabel,
+  Content,
+  ContentHeader,
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+} from '@backstage/core';
+import { Typography } from '@material-ui/core';
 
 // TODO(blam): Connect to backend
 const STATIC_DATA = [
@@ -30,16 +39,25 @@ const STATIC_DATA = [
 const ScaffolderPage: React.FC<{}> = () => {
   return (
     <Page theme={pageTheme.home}>
-      <Header title="Create a new component" subtitle="All your stuff" />
+      <Header
+        title={
+          <>
+            Create a new component <AlphaLabel isShorthand />{' '}
+          </>
+        }
+        subtitle="Create new software components using standard templates"
+      />
       <Content>
+        <ContentHeader title="Available templates" />
         <div style={{ display: 'flex' }}>
-          {STATIC_DATA.map((item) => {
+          {STATIC_DATA.map((item, ix) => {
             return (
               <InfoCard
                 title={item.name}
                 deepLink={{ title: 'Create', link: '#' }}
+                key={ix}
               >
-                <p>{item.description}</p>
+                <Typography paragraph>{item.description}</Typography>
               </InfoCard>
             );
           })}

plugins/scaffolder/src/plugin.ts

@@ -20,6 +20,6 @@ import ScaffolderPage from './components/ScaffolderPage';
 export const plugin = createPlugin({
   id: 'scaffolder',
   register({ router }) {
-    router.registerRoute('/scaffolder', ScaffolderPage);
+    router.registerRoute('/create', ScaffolderPage);
   },
 });