From 49482a526d65df721acb8adba69c1d2b03dcfb27 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 22 Jan 2022 17:25:37 +0200
Subject: [PATCH] Add beta info page

---
 app/components/Layout/index.tsx |  7 ++++++
 app/routes/beta.tsx             | 38 +++++++++++++++++++++++++++++++++
 app/styles/beta.css             |  5 +++++
 app/styles/global.css           | 11 ++++++++++
 app/styles/layout.css           | 17 +++++++++++++++
 5 files changed, 78 insertions(+)
 create mode 100644 app/routes/beta.tsx
 create mode 100644 app/styles/beta.css

diff --git a/app/components/Layout/index.tsx b/app/components/Layout/index.tsx
index b4cda4b65..609bd6761 100644
--- a/app/components/Layout/index.tsx
+++ b/app/components/Layout/index.tsx
@@ -60,6 +60,13 @@ export const Layout = React.memo(function Layout({
           ))}
         </div>
       </nav>
+      <Link className="layout__beta__link" to="/beta">
+        <div className="layout__beta__banner">
+          {new Array(50).fill(null).map((_, i) => (
+            <span key={i}>BETA</span>
+          ))}
+        </div>
+      </Link>
       <main className="layout__main">{children}</main>
     </>
   );
diff --git a/app/routes/beta.tsx b/app/routes/beta.tsx
new file mode 100644
index 000000000..f43b1fe24
--- /dev/null
+++ b/app/routes/beta.tsx
@@ -0,0 +1,38 @@
+import type { LinksFunction } from "remix";
+import { DISCORD_URL } from "~/constants";
+import styles from "~/styles/beta.css";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export default function BetaPage() {
+  return (
+    <div className="beta__container">
+      <h2>Beta of sendou.ink (Splatoon 3)</h2>
+      <p>
+        Hello there! I appreciate you taking time to visit this beta version of
+        sendou.ink's Splatoon 3 site. This being a beta there is a few things
+        you should consider:
+      </p>
+      <ul className="mt-2">
+        <li>
+          It's likely the database will be cleared (more than once) before beta
+          ends
+        </li>
+        <li>
+          Bugs are expected. Please give feedback on{" "}
+          <a href={DISCORD_URL}>our Discord</a>
+        </li>
+        <li>
+          Follow <a href="https://twitter.com/sendouink">Twitter</a> for
+          announcements about test tournaments and everything else related to
+          sendou.ink
+        </li>
+      </ul>
+      <p className="mt-4">
+        <a href="https://sendou.ink">Return to Splatoon 2 sendou.ink</a>
+      </p>
+    </div>
+  );
+}
diff --git a/app/styles/beta.css b/app/styles/beta.css
new file mode 100644
index 000000000..484ea2285
--- /dev/null
+++ b/app/styles/beta.css
@@ -0,0 +1,5 @@
+.beta__container {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding-inline: var(--s-2);
+}
diff --git a/app/styles/global.css b/app/styles/global.css
index 6fcd5d9f4..32a044e84 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -5,6 +5,7 @@
   --bg-modal-backdrop: hsla(237deg 98% 1% / 70%);
   --border: hsl(237.3deg 42.3% 45.6%);
   --button-text: rgb(0 0 0 / 85%);
+  --button-text-transparent: rgb(0 0 0 / 65%);
   --text: rgb(255 255 255 / 95%);
   --text-lighter: rgb(255 255 255 / 55%);
   --theme-error: rgb(219 70 65);
@@ -88,6 +89,12 @@ body {
   outline: none !important;
 }
 
+a {
+  color: var(--theme);
+  font-weight: var(--semi-bold);
+  text-decoration: none;
+}
+
 button {
   display: flex;
   width: auto;
@@ -385,6 +392,10 @@ select::selection {
 
 /* Utility classes */
 
+.mt-2 {
+  margin-block-start: var(--s-2);
+}
+
 .mt-3 {
   margin-block-start: var(--s-3);
 }
diff --git a/app/styles/layout.css b/app/styles/layout.css
index d0f97f3f1..9eea67c33 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -40,6 +40,23 @@
   justify-self: flex-end;
 }
 
+.layout__beta__link {
+  text-decoration: none;
+}
+
+.layout__beta__banner {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  background-color: var(--theme);
+  color: var(--button-text-transparent);
+  font-size: var(--fonts-xs);
+  font-weight: var(--bold);
+  gap: var(--s-8);
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
 .layout__nav {
   display: none;
   justify-content: center;