From e3572643017ac9d00730d72f60128abd1b32ad23 Mon Sep 17 00:00:00 2001
From: Johnn Mis <v-jmis@expediagroup.com>
Date: Fri, 26 Feb 2021 09:57:20 -0600
Subject: [PATCH] Support and Choose buttons had wrong color contrast on dark
 mode

Signed-off-by: Johnn Mis <v-jmis@expediagroup.com>
---
 packages/core/src/components/SupportButton/SupportButton.tsx | 5 ++++-
 packages/theme/src/themes.ts                                 | 1 +
 .../scaffolder/src/components/TemplateCard/TemplateCard.tsx  | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index eea2b000ca..0afc2eea1f 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
     minWidth: 260,
     maxWidth: 400,
   },
+  primary: {
+    color: theme.palette.primary.light,
+  },
 }));
 
 const SupportIcon = ({ icon }: { icon: string | undefined }) => {
@@ -98,7 +101,7 @@ export const SupportButton = ({ children }: PropsWithChildren<Props>) => {
     <Fragment>
       <Button
         data-testid="support-button"
-        color="primary"
+        className={classes.primary}
         onClick={onClickHandler}
       >
         <HelpIcon className={classes.leftIcon} />
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index fd13343ca8..3823e94b31 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -104,6 +104,7 @@ export const darkTheme = createTheme({
     primary: {
       main: '#2E77D0',
     },
+    tonalOffset: 0.45,
     banner: {
       info: '#2E77D0',
       error: '#E22134',
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 25f89f20ab..44e1328d74 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -40,6 +40,9 @@ const useStyles = makeStyles({
     '-webkit-line-clamp': 10,
     '-webkit-box-orient': 'vertical',
   },
+  primary: {
+    color: ({ palette }: any) => palette.primary.light,
+  },
 });
 
 export type TemplateCardProps = {
@@ -85,7 +88,7 @@ export const TemplateCard = ({
         <Box className={classes.description}>{description}</Box>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={href}>
+        <Button className={classes.primary} to={href}>
           Choose
         </Button>
       </CardActions>