Unify RequireAuthentication and AuthenticationModal

- Delete StaticBackground
	It wasn't doing anything anyway.
- Replace LogInModal with AuthBlock
	Create a div and use the `fixed inset-0 ...` classes from
	LogInModal to replicate the same "the modal is covering the
	screen" effect.
- Delete RequireAuthentication.tsx, which exports the LogInModal.
	This is because the file is no longer used.

frontend/src/components/auth/RequireAuthentication.tsx

@@ -1,41 +1,24 @@
 import React from "react";
+import AuthBlock from "./AuthBlock";
 
 import { useAuthentication } from "hooks/useAuth";
 
-import LogInModal from "components/auth/AuthenticationModal";
-
 interface Props {
   children: React.ReactNode;
 }
 
-const StaticBackground = () => {
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        zIndex: -1,
-        width: "100vw",
-        height: "100vh",
-        backgroundColor: "black",
-        opacity: 0.5,
-      }}
-    />
-  );
-};
-
 const RequireAuthentication = (props: Props) => {
   const { children } = props;
   const { isAuthenticated } = useAuthentication();
 
   return isAuthenticated ? (
     <>{children}</>
   ) : (
-    <>
-      <StaticBackground />
-      <LogInModal />
-    </>
+    <div className="flex justify-center items-center">
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+        <AuthBlock />
+      </div>
+    </div>
   );
 };