Merge pull request #2535 from spotify/samiram/fix-banner-pos

fix banner position and color

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>
+);

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';
@@ -27,12 +27,17 @@ import Close from '@material-ui/icons/Close';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   root: {
-    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',
+  },
+  // showing on top
+  topPosition: {
+    position: 'relative',
+    marginBottom: theme.spacing(6),
+    marginTop: -theme.spacing(3),
     zIndex: 'unset',
   },
   icon: {
@@ -45,6 +50,10 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   message: {
     display: 'flex',
     alignItems: 'center',
+    color: theme.palette.banner.text,
+    '& a': {
+      color: theme.palette.banner.link,
+    },
   },
   info: {
     backgroundColor: theme.palette.banner.info,
@@ -58,9 +67,15 @@ type Props = {
   variant: 'info' | 'error';
   message: ReactNode;
   id: string;
+  fixed?: boolean;
 };
 
-export const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
+export const DismissableBanner = ({
+  variant,
+  message,
+  id,
+  fixed = false,
+}: Props) => {
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket('notifications');
@@ -88,9 +103,13 @@ 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={{ root: classNames(classes.root, fixed && classes.topPosition) }}
     >
       <SnackbarContent
         classes={{

packages/theme/src/themes.ts

@@ -44,6 +44,8 @@ export const lightTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
+      text: '#FFFFFF',
+      link: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#000000',
@@ -100,6 +102,8 @@ export const darkTheme = createTheme({
     banner: {
       info: '#2E77D0',
       error: '#E22134',
+      text: '#FFFFFF',
+      link: '#000000',
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',

packages/theme/src/types.ts

@@ -64,6 +64,8 @@ type PaletteAdditions = {
   banner: {
     info: string;
     error: string;
+    text: string;
+    link: string;
   };
 };