Merge pull request #634 from python-discord/jb3/auth/popup-and-improvements

Authorization pop-up & misc improvements

1 files changed, 42 insertions, 0 deletions

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;