From f5024e46fd68c153ba20e094ec1e17012e4ae4fc Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Tue, 9 Jul 2024 20:21:39 +0100
Subject: Add AuthorizationSplash to display above content when auth in
 progress

---
 src/components/AuthorizationSplash.tsx | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/AuthorizationSplash.tsx

(limited to 'src/components/AuthorizationSplash.tsx')

diff --git a/src/components/AuthorizationSplash.tsx b/src/components/AuthorizationSplash.tsx
new file mode 100644
index 0000000..6fd211a
--- /dev/null
+++ b/src/components/AuthorizationSplash.tsx
@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { type RootState } from "../store";
+
+const splashStyles = css`
+position: fixed;
+width: 100%;
+height: 100%;
+top: 0;
+transition: background-color 0.5s ease, opacity 0.5s ease;
+`;
+
+const innerText = css`
+text-align: center;
+vertical-align: middle;
+`;
+
+const spacer = css`
+height: 30%;
+`;
+
+function AuthorizationSplash(): JSX.Element {
+    const authorizing = useSelector<RootState, boolean>(state => state.authorization.authorizing);
+
+    const background = `rgba(0, 0, 0, ${authorizing ? "0.90" : "0"})`;
+
+    return <div css={css`
+          ${splashStyles}
+          background-color: ${background};
+          opacity: ${authorizing ? "1" : "0"};
+          z-index: ${authorizing ? "10" : "-10"};
+        `}>
+        <div css={spacer}/>
+        <div css={innerText}>
+            <h1 css={{fontSize: "3em"}}>Authorization in progress</h1>
+            <h2>Login with Discord in the opened window and return to this tab once complete.</h2>
+        </div>
+    </div>;
+}
+
+export default AuthorizationSplash;
-- 
cgit v1.2.3