From a6178e4aff9d0f2a1fc6852f24180e8259218113 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Mon, 21 Sep 2020 14:14:19 +0200
Subject: [PATCH 1/5] fix banner position and color

---
 .../DismissableBanner.stories.tsx             | 12 ++++++
 .../DismissableBanner/DismissableBanner.tsx   | 37 ++++++++++++++++---
 packages/theme/src/themes.ts                  |  4 ++
 packages/theme/src/types.ts                   |  2 +
 4 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
index 62760f72fb..148e7b6803 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
@@ -100,3 +100,15 @@ export const WithLink = () => (
     </ApiProvider>
   </div>
 );
+export const Fixed = () => (
+  <div style={containerStyle}>
+    <ApiProvider apis={apis}>
+      <DismissableBanner
+        message="This is a dismissable banner with a fixed position fixed at the bottom of the page"
+        variant="info"
+        id="fixed_dismissable"
+        fixed
+      />
+    </ApiProvider>
+  </div>
+);
diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index 747ed06b37..2496d26d71 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -27,12 +27,19 @@ import Close from '@material-ui/icons/Close';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   root: {
-    position: 'relative',
+    // position: 'relative',
     padding: theme.spacing(0),
-    marginBottom: theme.spacing(6),
-    marginTop: -theme.spacing(3),
+    marginBottom: theme.spacing(0),
+    marginTop: theme.spacing(0),
     display: 'flex',
     flexFlow: 'row nowrap',
+    // zIndex: 'unset'
+  },
+  // showing on top
+  topPosition: {
+    position: 'relative',
+    marginBottom: theme.spacing(6),
+    marginTop: -theme.spacing(3),
     zIndex: 'unset',
   },
   icon: {
@@ -45,6 +52,10 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   message: {
     display: 'flex',
     alignItems: 'center',
+    color: theme.palette.banner.textColor,
+    '& a': {
+      color: theme.palette.banner.linkColor,
+    },
   },
   info: {
     backgroundColor: theme.palette.banner.info,
@@ -58,9 +69,15 @@ type Props = {
   variant: 'info' | 'error';
   message: ReactNode;
   id: string;
+  fixed?: boolean;
 };
 
-export const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
+export const DismissableBanner: FC<Props> = ({
+  variant,
+  message,
+  id,
+  fixed = false,
+}) => {
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket('notifications');
@@ -88,9 +105,17 @@ export const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
 
   return (
     <Snackbar
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      anchorOrigin={
+        fixed
+          ? { vertical: 'bottom', horizontal: 'center' }
+          : { vertical: 'top', horizontal: 'center' }
+      }
       open={!dismissedBanners.has(id)}
-      classes={{ root: classes.root }}
+      classes={
+        fixed
+          ? { root: classes.root }
+          : { root: classNames(classes.topPosition, classes.root) }
+      }
     >
       <SnackbarContent
         classes={{
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 73d6c13859..b2eabfe460 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -44,6 +44,8 @@ export const lightTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
+      textColor: '#FFFFFF',
+      linkColor: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#000000',
@@ -100,6 +102,8 @@ export const darkTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
+      textColor: '#FFFFFF',
+      linkColor: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index 66bfb4c6fd..a9a81d314d 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -64,6 +64,8 @@ type PaletteAdditions = {
   banner: {
     info: string;
     error: string;
+    textColor: string;
+    linkColor: string;
   };
 };
 

From 67d205cf487ebe691f3c4fe8c48239be94053254 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Mon, 21 Sep 2020 14:39:16 +0200
Subject: [PATCH 2/5] remove comments

---
 .../core/src/components/DismissableBanner/DismissableBanner.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index 2496d26d71..537ad285ea 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -27,13 +27,11 @@ import Close from '@material-ui/icons/Close';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   root: {
-    // position: 'relative',
     padding: theme.spacing(0),
     marginBottom: theme.spacing(0),
     marginTop: theme.spacing(0),
     display: 'flex',
     flexFlow: 'row nowrap',
-    // zIndex: 'unset'
   },
   // showing on top
   topPosition: {

From e0102ec73aba5552ee82d39bf14640ee41c0eb25 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Wed, 23 Sep 2020 17:13:22 +0200
Subject: [PATCH 3/5] apply comments

---
 .../DismissableBanner/DismissableBanner.tsx        | 14 +++++---------
 packages/theme/src/types.ts                        |  4 ++--
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index 537ad285ea..b33a1c4704 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -50,9 +50,9 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   message: {
     display: 'flex',
     alignItems: 'center',
-    color: theme.palette.banner.textColor,
+    color: theme.palette.banner.text,
     '& a': {
-      color: theme.palette.banner.linkColor,
+      color: theme.palette.banner.link,
     },
   },
   info: {
@@ -70,12 +70,12 @@ type Props = {
   fixed?: boolean;
 };
 
-export const DismissableBanner: FC<Props> = ({
+export const DismissableBanner = ({
   variant,
   message,
   id,
   fixed = false,
-}) => {
+}: Props) => {
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket('notifications');
@@ -109,11 +109,7 @@ export const DismissableBanner: FC<Props> = ({
           : { vertical: 'top', horizontal: 'center' }
       }
       open={!dismissedBanners.has(id)}
-      classes={
-        fixed
-          ? { root: classes.root }
-          : { root: classNames(classes.topPosition, classes.root) }
-      }
+      classes={{ root: classNames(classes.root, fixed && classes.topPosition) }}
     >
       <SnackbarContent
         classes={{
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index a9a81d314d..1d244f8cd4 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -64,8 +64,8 @@ type PaletteAdditions = {
   banner: {
     info: string;
     error: string;
-    textColor: string;
-    linkColor: string;
+    text: string;
+    link: string;
   };
 };
 

From 8272bec5bde660f9b8d9d0121edbb7d3d7e0f0cf Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 25 Sep 2020 10:07:31 +0200
Subject: [PATCH 4/5] review

---
 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 b2eabfe460..5c0c3c04f7 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -102,8 +102,8 @@ export const darkTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
-      textColor: '#FFFFFF',
-      linkColor: '#000000',
+      text: '#FFFFFF',
+      link: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',

From c7b8d9ed7e4d3388a06178f81a90db65167ac665 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 25 Sep 2020 10:10:07 +0200
Subject: [PATCH 5/5] review

---
 .../src/components/DismissableBanner/DismissableBanner.tsx    | 2 +-
 packages/theme/src/themes.ts                                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index b33a1c4704..181eddcad2 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, ReactNode, useState, useEffect } from 'react';
+import React, { ReactNode, useState, useEffect } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-api';
 import { useObservable } from 'react-use';
 import classNames from 'classnames';
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 5c0c3c04f7..76c0660efb 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -44,8 +44,8 @@ export const lightTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
-      textColor: '#FFFFFF',
-      linkColor: '#000000',
+      text: '#FFFFFF',
+      link: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#000000',