Extracted update banner to a separated component

src/common/AppUpdateBanner.scss

@@ -0,0 +1,17 @@
+@import '../utils/base';
+@import '../utils/mixins/horizontal-align';
+
+.app-update-banner.app-update-banner {
+  @include horizontal-align();
+
+  position: fixed;
+  top: $headerHeight - 25px;
+  padding: 0 4rem 0 0;
+  z-index: 1040;
+  margin: 0;
+  color: var(--text-color);
+  text-align: center;
+  width: 700px;
+  max-width: calc(100% - 30px);
+  box-shadow: 0 0 1rem var(--brand-color);
+}

src/common/AppUpdateBanner.tsx

@@ -0,0 +1,16 @@
+import { FC, MouseEventHandler } from 'react';
+import { Alert } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
+import './AppUpdateBanner.scss';
+
+interface AppUpdateBannerProps {
+  isOpen: boolean;
+  toggle: MouseEventHandler<any>;
+}
+
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = (props) => (
+  <Alert className="app-update-banner" {...props} tag={SimpleCard} color="secondary">
+    <h4 className="mb-4">This app has just been updated!</h4>
+    <p className="mb-0">Restart it to enjoy the new features.</p>
+  </Alert>
+);