Polishing the Create page (#1353)

* Polishing the Create page

* Review comments

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

@@ -20,23 +20,33 @@ import {
   Content,
   ContentHeader,
   Header,
+  SupportButton,
   Page,
   pageTheme,
 } from '@backstage/core';
-import { Typography, Link, Button } from '@material-ui/core';
+import { Button, Grid, Link, Typography } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 import TemplateCard from '../TemplateCard';
 
 // TODO(blam): Connect to backend
 const STATIC_DATA = [
+  {
+    id: 'springboot-template',
+    type: 'service',
+    name: 'Spring Boot Service',
+    tags: ['Recommended', 'Java'],
+    description:
+      'Standard Spring Boot (Java) microservice with recommended configuration.',
+    ownerId: 'spotify',
+  },
   {
     id: 'react-ssr-template',
-    type: 'web-infra',
+    type: 'website',
     name: 'SSR React Website',
-    tags: ['Experimental'],
+    tags: ['Recommended', 'React'],
     description:
       'Next.js application skeleton for creating isomorphic web applications.',
-    ownerId: 'something',
+    ownerId: 'spotify',
   },
 ];
 const ScaffolderPage: React.FC<{}> = () => {
@@ -46,7 +56,7 @@ const ScaffolderPage: React.FC<{}> = () => {
         pageTitleOverride="Create a new component"
         title={
           <>
-            Create a new component <Lifecycle alpha shorthand />{' '}
+            Create a new component <Lifecycle alpha shorthand />
           </>
         }
         subtitle="Create new software components using standard templates"
@@ -61,6 +71,11 @@ const ScaffolderPage: React.FC<{}> = () => {
           >
             Register existing component
           </Button>
+          <SupportButton>
+            Create new software components using standard templates. Different
+            templates create different kinds of components (services, websites,
+            documentation, ...).
+          </SupportButton>
         </ContentHeader>
         <Typography variant="body2" paragraph style={{ fontStyle: 'italic' }}>
           <strong>NOTE!</strong> This feature is WIP. You can follow progress{' '}
@@ -69,7 +84,7 @@ const ScaffolderPage: React.FC<{}> = () => {
           </Link>
           .
         </Typography>
-        <div style={{ display: 'flex' }}>
+        <Grid container>
           {STATIC_DATA.map(item => {
             return (
               <TemplateCard
@@ -81,7 +96,7 @@ const ScaffolderPage: React.FC<{}> = () => {
               />
             );
           })}
-        </div>
+        </Grid>
       </Content>
     </Page>
   );