diff options
| -rw-r--r-- | src/App.tsx | 3 | ||||
| -rw-r--r-- | src/components/AuthorizationSplash.tsx | 42 |
2 files changed, 45 insertions, 0 deletions
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; |