add comment

Adjust css for login page

frontend/src/App.jsx

@@ -11,9 +11,7 @@ import AlertHistory from "./pages/alertHistory/AlertHistory";
 import Account from "./pages/user_account/Account";
 
 export default function App() {
-  const { currentUser, isSubscribed, loading } = useAuth();
-
-  if (loading) return null;
+  const { currentUser, isSubscribed } = useAuth();
 
   if (!currentUser) {
     return (

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

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import {
   onAuthStateChanged,
   signInWithEmailAndPassword,
@@ -17,88 +17,98 @@ const DEFAULT_TIER_LIMITS = {
   allowed_channels: ["email"],
 };
 
-export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(null);
-  const [userTier, setUserTier] = useState("free");
-  const [tierLimits, setTierLimits] = useState(DEFAULT_TIER_LIMITS);
-  const [isSubscribed, setIsSubscribed] = useState(false);
-  const [loading, setLoading] = useState(true);
+// External auth store - lives outside React
+const createAuthStore = () => {
+  let state = {
+    currentUser: null,
+    userTier: "free",
+    tierLimits: DEFAULT_TIER_LIMITS,
+    isSubscribed: false,
+    loading: true,
+  };
+  const listeners = new Set();
 
-  const fetchAccount = useCallback(async () => {
+  const notify = () => listeners.forEach((fn) => fn());
+
+  const setState = (partial) => {
+    state = { ...state, ...partial };
+    notify();
+  };
+
+  const fetchAccount = async () => {
     try {
       const data = await getAccount();
-      setUserTier(data.subscription_tier || "free");
-      setTierLimits(data.tier_limits || DEFAULT_TIER_LIMITS);
-      setIsSubscribed(
-        data.subscription_status === "active" ||
+      setState({
+        userTier: data.subscription_tier || "free",
+        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
+        isSubscribed:
+          data.subscription_status === "active" ||
           data.subscription_status === "trialing",
-      );
+      });
     } catch {
-      setUserTier("free");
-      setTierLimits(DEFAULT_TIER_LIMITS);
-      setIsSubscribed(false);
+      setState({ isSubscribed: false });
     }
-  }, []);
+  };
 
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
-      setCurrentUser(user);
-      if (user) {
-        await fetchAccount();
-      } else {
-        setUserTier("free");
-        setTierLimits(DEFAULT_TIER_LIMITS);
-        setIsSubscribed(false);
-      }
-      setLoading(false);
-    });
-    return unsubscribe;
-  }, [fetchAccount]);
+  // Set up Firebase listener once, outside of React
+  onAuthStateChanged(auth, async (user) => {
+    setState({ loading: true, currentUser: user });
+    if (user) {
+      await fetchAccount();
+    } else {
+      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
+    }
+    setState({ loading: false });
+  });
 
-  async function signup(email, password) {
-    const cred = await createUserWithEmailAndPassword(auth, email, password);
-    return cred.user;
-  }
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => state,
+    refreshAccount: fetchAccount,
+  };
+};
 
-  async function login(email, password) {
-    const cred = await signInWithEmailAndPassword(auth, email, password);
-    return cred.user;
-  }
+const authStore = createAuthStore();
 
-  async function logout() {
-    await signOut(auth);
-  }
+export function AuthProvider({ children }) {
+  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
 
-  async function sendEmailVerification() {
+  const signup = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+  const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
+  const logout = () => signOut(auth);
+
+  const sendEmailVerification = () => {
     if (auth.currentUser) {
-      await firebaseSendEmailVerification(auth.currentUser);
+      return firebaseSendEmailVerification(auth.currentUser);
     }
-  }
+  };
 
-  async function reloadUser() {
+  const reloadUser = async () => {
     if (auth.currentUser) {
       await auth.currentUser.reload();
-      setCurrentUser({ ...auth.currentUser });
       return auth.currentUser;
     }
     return null;
-  }
+  };
 
   const value = {
-    currentUser,
-    userTier,
-    tierLimits,
-    isSubscribed,
-    loading,
+    ...state,
     signup,
     login,
     logout,
     sendEmailVerification,
     reloadUser,
-    refreshAccount: fetchAccount,
+    refreshAccount: authStore.refreshAccount,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={value}>
+      {!state.loading && children}
+    </AuthContext.Provider>
+  );
 }
 
 export function useAuth() {

frontend/src/index.css

@@ -422,7 +422,7 @@ button {
 
   .btn {
     padding: 0.45rem 0.85rem;
-    font-size: 0.95rem;
+    font-size: 1.45rem !important;
   }
 
   .btn--lg {
@@ -433,4 +433,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">