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/App.tsx                            |  3 +++
 src/components/AuthorizationSplash.tsx | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/components/AuthorizationSplash.tsx

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
index 70e0b11..d622840 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,8 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { PropagateLoader } from "react-spinners";
 
+import AuthorizationSplash from "./components/AuthorizationSplash";
+
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import globalStyles from "./globalStyles";
@@ -51,6 +53,7 @@ function App(): JSX.Element {
     return (
         <div>
             <Global styles={globalStyles}/>
+            <AuthorizationSplash/>
             <TransitionGroup>
                 <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
                     <BrowserRouter>
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