Add banner for v2 preview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bm-hotgroups",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

src/App.css

@@ -20,8 +20,9 @@ a:focus, a:hover {
 #App {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto auto auto auto;
+  grid-template-rows: auto auto auto auto auto;
   grid-template-areas:
+    "banner"
     "controls"
     "actives"
     "top-groups"
@@ -32,6 +33,32 @@ a:focus, a:hover {
   padding: 0 12px;
 }
 
+#Banner {
+  grid-area: banner;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: baseline;
+  gap: 0 0.5rem;
+  padding: 0.5rem;
+  margin: 0 -12px;
+  background-color: #de9e8e;
+}
+
+#Banner p {
+  margin: 0;
+}
+
+#Banner a, #Banner a:visited {
+  color: #480a10cc;
+  font-weight: 700;
+}
+
+#Banner a:focus, #Banner a:hover {
+  color: #480a10;
+  font-weight: 700;
+}
+
 .Button {
   display: inline-block;
   color: #ffffff;

src/App.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactGA from 'react-ga4';
 import moment from 'moment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons';
 import BMLH from './util/bmlastheard';
 import BMAgg from './util/bmagg';
 import BMAct from './util/bmactive';
@@ -182,6 +184,10 @@ class App extends React.Component {
           onConnectionClick={this.handleConnectionBtn} />
 
         <main id="App">
+          <div id="Banner">
+            <FontAwesomeIcon icon={faBullhorn} />
+            <p><a href="https://version2.bm-hotgroups.pages.dev/" target="_blank">Click here to preview Brandmeister Top Activity version 2</a>!</p>
+          </div>
           <Controls
             aggMins={aggregationWindowMins}
             enabled={!startup}