Merge branch 'fix/join-us-button-logged-in' into main

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.5.4] - 2026-08-07
+
+### Fixed
+
+- The homepage "Join Us" button sent logged-in users to the registration page instead of somewhere useful. It now shows "My Dashboard" and links to their dashboard when a user is already logged in.
+
+## [1.5.3] - 2026-08-07
+
+### Fixed
+
+- Help guide popups could render taller than the screen on mobile, with no way to reach the close button or "Got it" button: only the tab content area had a height cap, so the header, quick links, and footer weren't accounted for. The whole popup is now capped to the screen height, with just the tab content scrolling internally.
+
 ## [1.5.2] - 2026-08-07
 
 ### Fixed

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

frontend/src/app/page.tsx

@@ -1,8 +1,9 @@
 import { EventCard } from "@/components/events/EventCard";
 import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
+import { JoinUsButton } from "@/components/home/JoinUsButton";
 import { appName } from "@/lib/siteConfig";
-import { Calendar, UserPlus, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";
+import { Calendar, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";
 
 type Event = {
   id: string;
@@ -58,10 +59,7 @@ export default async function HomePage() {
                                 <Calendar className="w-4 h-4" />
                                 View Events
                             </a>
-                            <a href="/register" className="inline-flex items-center gap-2 px-6 py-2.5 border border-brand-600 text-brand-600 rounded-xl hover:bg-brand-50 font-medium transition-colors">
-                                <UserPlus className="w-4 h-4" />
-                                Join Us
-                            </a>
+                            <JoinUsButton />
                         </div>
                     </div>
                 </section>

frontend/src/components/home/JoinUsButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Link from "next/link";
+import { UserPlus, LayoutDashboard } from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+
+export const JoinUsButton = () => {
+    const { user, loading } = useAuth();
+
+    if (loading) return null;
+
+    return user ? (
+        <Link href="/dashboard/user" className="inline-flex items-center gap-2 px-6 py-2.5 border border-brand-600 text-brand-600 rounded-xl hover:bg-brand-50 font-medium transition-colors">
+            <LayoutDashboard className="w-4 h-4" />
+            My Dashboard
+        </Link>
+    ) : (
+        <Link href="/register" className="inline-flex items-center gap-2 px-6 py-2.5 border border-brand-600 text-brand-600 rounded-xl hover:bg-brand-50 font-medium transition-colors">
+            <UserPlus className="w-4 h-4" />
+            Join Us
+        </Link>
+    );
+};

frontend/src/components/shared/HelpGuideModal.tsx

@@ -17,10 +17,10 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
       <div className="absolute inset-0 bg-black/40 animate-in fade-in duration-200" onClick={onClose} />
       <div className="absolute inset-0 flex items-center justify-center p-4">
         <div
-          className="w-full max-w-3xl bg-white rounded-2xl shadow-2xl animate-in fade-in zoom-in-95 slide-in-from-bottom-2 duration-200 overflow-hidden"
+          className="w-full max-w-3xl max-h-full bg-white rounded-2xl shadow-2xl animate-in fade-in zoom-in-95 slide-in-from-bottom-2 duration-200 overflow-hidden flex flex-col"
           onClick={e => e.stopPropagation()}
         >
-          <div className="flex items-start justify-between px-5 py-4 border-b bg-gradient-to-r from-brand-50/60 to-white">
+          <div className="flex items-start justify-between px-5 py-4 border-b bg-gradient-to-r from-brand-50/60 to-white shrink-0">
             <div className="flex items-start gap-3">
               <div className="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                 <MessageCircleQuestion className="w-5 h-5 text-brand-600" />
@@ -36,7 +36,7 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
           </div>
 
           {content.quickLinks && content.quickLinks.length > 0 && (
-            <div className="flex flex-wrap gap-2 px-5 py-3 border-b bg-gray-50">
+            <div className="flex flex-wrap gap-2 px-5 py-3 border-b bg-gray-50 shrink-0">
               {content.quickLinks.map(link => (
                 <Link
                   key={link.href}
@@ -51,9 +51,9 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
             </div>
           )}
 
-          <div className="flex flex-col sm:flex-row">
+          <div className="flex flex-col sm:flex-row flex-1 min-h-0 overflow-y-auto sm:overflow-visible">
             {content.tabs.length > 1 && (
-              <nav className="sm:w-56 shrink-0 border-b sm:border-b-0 sm:border-r p-3 space-y-1 bg-gray-50/50">
+              <nav className="sm:w-56 shrink-0 border-b sm:border-b-0 sm:border-r p-3 space-y-1 bg-gray-50/50 sm:overflow-y-auto">
                 {content.tabs.map(t => {
                   const Icon = t.icon;
                   const active = activeTab?.key === t.key;
@@ -72,12 +72,12 @@ export default function HelpGuideModal({ content, onClose }: { content: HelpCont
               </nav>
             )}
 
-            <div className="flex-1 min-w-0 p-5 text-sm text-gray-700 max-h-[60vh] overflow-auto">
+            <div className="flex-1 min-w-0 p-5 text-sm text-gray-700 sm:overflow-y-auto">
               {activeTab?.content}
             </div>
           </div>
 
-          <div className="border-t px-5 py-3 space-y-2 bg-gray-50/50">
+          <div className="border-t px-5 py-3 space-y-2 bg-gray-50/50 shrink-0">
             {content.supportContact && (
               <div className="flex items-center gap-2 text-xs text-gray-500">
                 <Mail className="w-3.5 h-3.5 shrink-0" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "main": "index.js",
   "scripts": {
     "dev:backend": "cd backend && npm run dev",