From fc06371c6b0d0716ad85019d07c7a2fb524eac65 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Fri, 17 Jul 2020 11:05:26 +0200
Subject: [PATCH 1/2] feat(scaffolder): add color bg to template cards, use
 correct header colors

---
 packages/core/src/layout/Page/PageThemeProvider.ts   |  2 +-
 .../src/components/ScaffolderPage/ScaffolderPage.tsx |  2 +-
 .../src/components/TemplateCard/TemplateCard.tsx     | 12 +++++++-----
 .../src/components/TemplatePage/TemplatePage.tsx     |  3 ++-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/core/src/layout/Page/PageThemeProvider.ts
index 3df2a61aa8..36430021bb 100644
--- a/packages/core/src/layout/Page/PageThemeProvider.ts
+++ b/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'],
   },
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index a0957a6544..14823dd396 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/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={
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 2f36e12511..466c10336a 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/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>
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 5c949e55d9..05cc249e41 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/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={

From 8f30306195b31c92f7149d1e7c6b1ef099268c50 Mon Sep 17 00:00:00 2001
From: Ivan Shmidt <bahoc47@gmail.com>
Date: Fri, 17 Jul 2020 11:14:06 +0200
Subject: [PATCH 2/2] fix linting

---
 plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 466c10336a..7d38c6f223 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -55,7 +55,7 @@ export const TemplateCard = ({
   type,
   name,
 }: TemplateCardProps) => {
-  const theme = pageTheme[type] ?? pageTheme['other'];
+  const theme = pageTheme[type] ?? pageTheme.other;
   const [gradientStart, gradientStop] = theme.gradient.colors;
   const classes = useStyles({ gradientStart, gradientStop });
   const href = generatePath(templateRoute.path, { templateName: name });