From 106f938440e6c2deb7e37539e4dd4a2cecafc349 Mon Sep 17 00:00:00 2001 From: Twisha Saraiya Date: Mon, 13 Jul 2020 20:33:54 +0530 Subject: [PATCH 1/4] modify dismissable banner theme --- packages/theme/src/themes.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index c6bff73ef4..5423cee3e6 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -15,7 +15,7 @@ */ import { createTheme } from './baseTheme'; -import { blue, yellow } from '@material-ui/core/colors'; +import { yellow } from '@material-ui/core/colors'; export const lightTheme = createTheme({ palette: { @@ -39,7 +39,14 @@ export const lightTheme = createTheme({ }, }, primary: { - main: blue[500], + main: '#2E77D0', + }, + error: { + main: '#E22134', + dark: '#E22134', + }, + text: { + secondary: '#000000', }, border: '#E6E6E6', textContrast: '#000000', @@ -88,7 +95,14 @@ export const darkTheme = createTheme({ }, }, primary: { - main: blue[500], + main: '#2E77D0', + }, + error: { + main: '#E22134', + dark: '#E22134', + }, + text: { + secondary: '#000000', }, border: '#E6E6E6', textContrast: '#FFFFFF', From b6c2e8173bb2c75ff46680c97ed7891a0a65290b Mon Sep 17 00:00:00 2001 From: Twisha Saraiya Date: Wed, 15 Jul 2020 12:27:45 +0530 Subject: [PATCH 2/4] 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={ This is a dismissable banner with a link:{' '} - + example.com 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 = () => { 🎉 Welcome to Backstage! Take a look around and check out our{' '} - + getting started {' '} page. From a0c0e7240d566e788dcf7dc1deb851b46ec0bb1c Mon Sep 17 00:00:00 2001 From: Twisha Saraiya Date: Wed, 15 Jul 2020 12:38:59 +0530 Subject: [PATCH 3/4] remove unnecessary link property from theme --- packages/theme/src/themes.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index dd1c6e9cba..d4e4b70b6f 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -97,9 +97,6 @@ export const darkTheme = createTheme({ banner: { info: '2E77D0', error: 'E22134', - link: { - default: '#000000', - }, }, border: '#E6E6E6', textContrast: '#FFFFFF', From b78cd43099a7081474d4c0121750d0a6e7b42254 Mon Sep 17 00:00:00 2001 From: Twisha Saraiya Date: Mon, 20 Jul 2020 22:03:02 +0530 Subject: [PATCH 4/4] fix banner color code for dark theme --- packages/theme/src/themes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index d4e4b70b6f..e5ebd419a3 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -95,8 +95,8 @@ export const darkTheme = createTheme({ main: blue[500], }, banner: { - info: '2E77D0', - error: 'E22134', + info: '#2E77D0', + error: '#E22134', }, border: '#E6E6E6', textContrast: '#FFFFFF',