feat: Add ALPHA badge, close #52

client/src/components/beta/index.jsx

@@ -0,0 +1,12 @@
+// https://frontendresource.com/css-badges/
+import './index.scss';
+
+export default function Beta() {
+  return (
+    <div className="wrapper">
+      <div className="badge">
+        ALPHA
+      </div>
+    </div>
+  );
+}

client/src/components/beta/index.scss

@@ -0,0 +1,22 @@
+.wrapper {
+  left: 10px;
+  position: relative;
+  top: -130px;
+  z-index: calc(var(--ground) + 600);
+}
+
+.badge {
+  background: #e1000f;
+  box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
+  color: #FFF;
+  font-family: sans-serif;
+  font-size: 20px;
+  height: 50px;
+  left: -70px;
+  line-height: 50px;
+  position: relative;
+  text-align: center;
+  top: -2px;
+  transform: rotate(-45deg);
+  width: 200px;
+}

client/src/pages/index.jsx

@@ -16,6 +16,7 @@ import useWebSocket from 'react-use-websocket';
 import Actions from './actions';
 import AffiliationsTab from './affiliationsTab';
 import StepProgress from '../components/step-progress';
+import Beta from '../components/beta';
 import DatasetsTab from './datasetsTab';
 import Filters from './filters';
 import PublicationsTab from './publicationsTab';
@@ -140,6 +141,7 @@ export default function Home() {
 
   return (
     <>
+      <Beta />
       <Container className="fr-my-5w" as="section" fluid>
         <Row className="fr-px-5w">
           <Col>