From 967e261d008293a468677782d3cd26c6674c40c5 Mon Sep 17 00:00:00 2001
From: Dennis Chen <dchen@mathadvance.org>
Date: Tue, 6 Aug 2024 19:08:05 -0700
Subject: [PATCH] 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.
---
 .../components/auth/AuthenticationModal.tsx   | 27 ------------------
 .../components/auth/RequireAuthentication.tsx | 28 ++++---------------
 2 files changed, 6 insertions(+), 49 deletions(-)
 delete mode 100644 frontend/src/components/auth/AuthenticationModal.tsx

diff --git a/frontend/src/components/auth/AuthenticationModal.tsx b/frontend/src/components/auth/AuthenticationModal.tsx
deleted file mode 100644
index 26987d22..00000000
--- a/frontend/src/components/auth/AuthenticationModal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { FaTimes } from "react-icons/fa";
-import { useNavigate } from "react-router-dom";
-import { AuthBlockInner } from "./AuthBlock";
-
-const LogInModal = () => {
-  const navigate = useNavigate();
-
-  const navigateToPreviousPage = () => {
-    navigate(-1);
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
-      <div className="w-[400px] shadow-md bg-white text-black rounded-lg">
-        <div className="flex justify-between items-center p-4 border-b mb-4">
-          <h2 className="text-xl font-semibold">Log In</h2>
-          <button onClick={navigateToPreviousPage}>
-            <FaTimes />
-          </button>
-        </div>
-        <AuthBlockInner />
-      </div>
-    </div>
-  );
-};
-
-export default LogInModal;
diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
index 44d8ff08..4e2fc9a9 100644
--- a/frontend/src/components/auth/RequireAuthentication.tsx
+++ b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -1,28 +1,11 @@
-import LogInModal from "components/auth/AuthenticationModal";
 import { useAuthentication } from "hooks/useAuth";
 import React from "react";
+import AuthBlock from "./AuthBlock";
 
 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();
@@ -30,10 +13,11 @@ const RequireAuthentication = (props: Props) => {
   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>
   );
 };