Extracted update banner to a separated component

src/App.scss

@@ -1,5 +1,4 @@
 @import './utils/base';
-@import './utils/mixins/horizontal-align';
 
 .app-container {
   height: 100%;
@@ -25,18 +24,3 @@
     padding: 0 15px;
   }
 }
-
-.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/App.tsx

@@ -1,11 +1,10 @@
 import { useEffect, FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Alert } from 'reactstrap';
 import NotFound from './common/NotFound';
 import { ServersMap } from './servers/data';
 import { Settings } from './settings/reducers/settings';
 import { changeThemeInMarkup } from './utils/theme';
-import { SimpleCard } from './utils/SimpleCard';
+import { AppUpdateBanner } from './common/AppUpdateBanner';
 import './App.scss';
 
 interface AppProps {
@@ -55,16 +54,7 @@ const App = (
         </div>
       </div>
 
-      <Alert
-        className="app__update-banner"
-        tag={SimpleCard}
-        color="secondary"
-        isOpen={appUpdated}
-        toggle={resetAppUpdate}
-      >
-        <h4 className="mb-4">This app has just been updated!</h4>
-        <p className="mb-0">Restart it to enjoy the new features.</p>
-      </Alert>
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} />
     </div>
   );
 };

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