From 7bcd6814de61838be0ef1cc5d588637d961411af Mon Sep 17 00:00:00 2001
From: Joel Lau <joel.lau@protonmail.com>
Date: Sat, 12 Sep 2020 15:16:50 +0800
Subject: [PATCH] applied theme's background image to template cards (#2436)

---
 .../src/components/TemplateCard/TemplateCard.tsx           | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index d98b1a11e9..470fef1148 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -23,8 +23,8 @@ const useStyles = makeStyles(theme => ({
   header: {
     color: theme.palette.common.white,
     padding: theme.spacing(2, 2, 6),
-    backgroundImage: (props: { gradientStart: string; gradientStop: string }) =>
-      `linear-gradient(-137deg, ${props.gradientStart} 0%, ${props.gradientStop} 100%)`,
+    backgroundImage: (props: { backgroundImage: string }) =>
+      props.backgroundImage,
   },
   content: {
     padding: theme.spacing(2),
@@ -56,8 +56,7 @@ export const TemplateCard = ({
   name,
 }: TemplateCardProps) => {
   const theme = pageTheme[type] ?? pageTheme.other;
-  const [gradientStart, gradientStop] = theme.colors;
-  const classes = useStyles({ gradientStart, gradientStop });
+  const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(templateRoute.path, { templateName: name });
 
   return (