Merge pull request #1677 from spotify/shmidt-i/improve-scaffolder-fe-design

Scaffolder: add color bg to template cards, use correct header colors

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

@@ -26,7 +26,7 @@ export type PageTheme = {
 
 export const gradients: Record<string, Gradient> = {
   darkGrey: {
-    colors: ['#181818', '#404040'],
+    colors: ['#171717', '#383838'],
     waveColor: '#757575',
     opacity: ['1.0', '0.0'],
   },

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

@@ -64,7 +64,7 @@ export const ScaffolderPage: React.FC<{}> = () => {
   }, [error, errorApi]);
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page theme={pageTheme.other}>
       <Header
         pageTitleOverride="Create a new component"
         title={

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Button } from '@backstage/core';
+import { Button, pageTheme } from '@backstage/core';
 import { Card, Chip, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
@@ -23,8 +23,8 @@ const useStyles = makeStyles(theme => ({
   header: {
     color: theme.palette.common.white,
     padding: theme.spacing(2, 2, 6),
-    backgroundImage:
-      'linear-gradient(-137deg, rgb(25, 230, 140) 0%, rgb(29, 127, 110) 100%)',
+    backgroundImage: (props: { gradientStart: string; gradientStop: string }) =>
+      `linear-gradient(-137deg, ${props.gradientStart} 0%, ${props.gradientStop} 100%)`,
   },
   content: {
     padding: theme.spacing(2),
@@ -55,7 +55,9 @@ export const TemplateCard = ({
   type,
   name,
 }: TemplateCardProps) => {
-  const classes = useStyles();
+  const theme = pageTheme[type] ?? pageTheme.other;
+  const [gradientStart, gradientStop] = theme.gradient.colors;
+  const classes = useStyles({ gradientStart, gradientStop });
   const href = generatePath(templateRoute.path, { templateName: name });
 
   return (
@@ -72,7 +74,7 @@ export const TemplateCard = ({
           {description}
         </Typography>
         <div className={classes.footer}>
-          <Button color="primary" variant="contained" to={href}>
+          <Button color="primary" to={href}>
             Choose
           </Button>
         </div>

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -22,6 +22,7 @@ import {
   Lifecycle,
   Page,
   useApi,
+  pageTheme,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
@@ -135,7 +136,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page>
+    <Page theme={pageTheme.other}>
       <Header
         pageTitleOverride="Create a new component"
         title={