From b6c2e8173bb2c75ff46680c97ed7891a0a65290b Mon Sep 17 00:00:00 2001
From: Twisha Saraiya <twisha.saraiya@quantiphi.com>
Date: Wed, 15 Jul 2020 12:27:45 +0530
Subject: [PATCH] add banner to theme palette

---
 .../DismissableBanner.stories.tsx             |  2 +-
 .../DismissableBanner/DismissableBanner.tsx   |  9 ++++---
 packages/theme/src/themes.ts                  | 27 +++++++++----------
 packages/theme/src/types.ts                   |  4 +++
 .../components/CatalogPage/WelcomeBanner.tsx  |  2 +-
 5 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
index 4a404a840f..62760f72fb 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
@@ -89,7 +89,7 @@ export const WithLink = () => (
         message={
           <Typography>
             This is a dismissable banner with a link:{' '}
-            <Link href="http://example.com" color="textSecondary">
+            <Link href="http://example.com" color="textPrimary">
               example.com
             </Link>
           </Typography>
diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index eebb884806..747ed06b37 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -18,13 +18,14 @@ import React, { FC, ReactNode, useState, useEffect } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-api';
 import { useObservable } from 'react-use';
 import classNames from 'classnames';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import Snackbar from '@material-ui/core/Snackbar';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import IconButton from '@material-ui/core/IconButton';
 import Close from '@material-ui/icons/Close';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((theme: BackstageTheme) => ({
   root: {
     position: 'relative',
     padding: theme.spacing(0),
@@ -46,10 +47,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
   },
   info: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.banner.info,
   },
   error: {
-    backgroundColor: theme.palette.error.dark,
+    backgroundColor: theme.palette.banner.error,
   },
 }));
 
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 5423cee3e6..dd1c6e9cba 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -15,7 +15,7 @@
  */
 
 import { createTheme } from './baseTheme';
-import { yellow } from '@material-ui/core/colors';
+import { blue, yellow } from '@material-ui/core/colors';
 
 export const lightTheme = createTheme({
   palette: {
@@ -39,14 +39,11 @@ export const lightTheme = createTheme({
       },
     },
     primary: {
-      main: '#2E77D0',
+      main: blue[500],
     },
-    error: {
-      main: '#E22134',
-      dark: '#E22134',
-    },
-    text: {
-      secondary: '#000000',
+    banner: {
+      info: '#2E77D0',
+      error: '#E22134',
     },
     border: '#E6E6E6',
     textContrast: '#000000',
@@ -95,14 +92,14 @@ export const darkTheme = createTheme({
       },
     },
     primary: {
-      main: '#2E77D0',
+      main: blue[500],
     },
-    error: {
-      main: '#E22134',
-      dark: '#E22134',
-    },
-    text: {
-      secondary: '#000000',
+    banner: {
+      info: '2E77D0',
+      error: 'E22134',
+      link: {
+        default: '#000000',
+      },
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index fdb9e09869..557af23cd0 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -58,6 +58,10 @@ type PaletteAdditions = {
     icon: string;
     background: string;
   };
+  banner: {
+    info: string;
+    error: string;
+  };
 };
 
 export type BackstagePalette = Palette & PaletteAdditions;
diff --git a/plugins/catalog/src/components/CatalogPage/WelcomeBanner.tsx b/plugins/catalog/src/components/CatalogPage/WelcomeBanner.tsx
index c7a280d106..677b1f7ec5 100644
--- a/plugins/catalog/src/components/CatalogPage/WelcomeBanner.tsx
+++ b/plugins/catalog/src/components/CatalogPage/WelcomeBanner.tsx
@@ -42,7 +42,7 @@ export const WelcomeBanner = () => {
             🎉
           </span>
           Welcome to Backstage! Take a look around and check out our{' '}
-          <Link href="/welcome" color="textSecondary">
+          <Link href="/welcome" color="textPrimary">
             getting started
           </Link>{' '}
           page.