From 168db0fe9c5a7fb45b05e00fb19694fa4565d77a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Mon, 4 May 2020 19:37:03 +0200
Subject: [PATCH] Rename Scaffolder -> Create (#712)

* Rename Scaffolder -> Create

* Use Typography
---
 packages/app/src/components/Root/Root.tsx     |  4 +--
 .../src/components/ScaffolderPage/index.tsx   | 26 ++++++++++++++++---
 plugins/scaffolder/src/plugin.ts              |  2 +-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 7ef3a5a22f..6854ce015b 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/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" />
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
index 5cfeb122ce..b05b86bd92 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
+++ b/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>
             );
           })}
diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts
index 3dfa5d0b89..31bdab2f84 100644
--- a/plugins/scaffolder/src/plugin.ts
+++ b/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);
   },
 });