Merge pull request #1609 from twishasaraiya/theme/dismissable-banner

Modify theme for dismissable banner

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>

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,
   },
 }));
 

packages/theme/src/themes.ts

@@ -41,6 +41,10 @@ export const lightTheme = createTheme({
     primary: {
       main: blue[500],
     },
+    banner: {
+      info: '#2E77D0',
+      error: '#E22134',
+    },
     border: '#E6E6E6',
     textContrast: '#000000',
     textVerySubtle: '#DDD',
@@ -90,6 +94,10 @@ export const darkTheme = createTheme({
     primary: {
       main: blue[500],
     },
+    banner: {
+      info: '#2E77D0',
+      error: '#E22134',
+    },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',
     textVerySubtle: '#DDD',

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;

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.