added style, fixed login issue

Adjust css for login page

frontend/src/components/navPanel/NavPanel.css

@@ -76,3 +76,14 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
+
+
+@media (max-width: 480px) {
+  .nav-panel__overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    z-index: 900;
+  }
+}

frontend/src/contexts/AuthContext.jsx

@@ -42,10 +42,12 @@ export function AuthProvider({ children }) {
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (user) => {
-      setCurrentUser(user);
       if (user) {
+        setLoading(true);
+        setCurrentUser(user);
         await fetchAccount();
       } else {
+        setCurrentUser(null);
         setUserTier("free");
         setTierLimits(DEFAULT_TIER_LIMITS);
         setIsSubscribed(false);

frontend/src/index.css

@@ -82,8 +82,10 @@ button {
 
 .page {
   max-width: 800px;
+  height: 100%;
   margin: 0 auto;
   padding: 2rem;
+  background-color: red;
 }
 
 .page--wide {
@@ -422,7 +424,7 @@ button {
 
   .btn {
     padding: 0.45rem 0.85rem;
-    font-size: 0.95rem;
+    font-size: 1.45rem !important;
   }
 
   .btn--lg {
@@ -433,4 +435,8 @@ button {
   .section {
     padding: 0.75rem;
   }
+
+  .mb-lg {
+    color: white;
+  }
 }

frontend/src/pages/login/Login.css

@@ -116,8 +116,20 @@
     font-size: 1.25rem;
   }
 
+  .login-span {
+    color: red
+  }
+
+  h1 {
+    font-weight: 400 !important
+  }
+
   .login-bg-video {
-    opacity: 0.13;
+    opacity: 0.135;
     left: 47%;
   }
+
+  .login-button {
+    font-size: 1rem;
+  }
 }

frontend/src/pages/login/Login.jsx

@@ -47,7 +47,7 @@ export default function Login() {
 
       <div className="login-card login-card-fadein">
         <h1 className="login-heading">
-          <span className="login-brand">Koin Ping</span><span> - Login</span>
+          <span className="login-brand">Koin Ping</span><span className="login-span"> - Login</span>
         </h1>
 
         <div className="login-interactive-fadein">