Skip to content

feat(ux): Complete Navigation Consistency Across All Pages #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JacksonR64 merged 7 commits into from
Jun 13, 2025
Merged

feat(ux): Complete Navigation Consistency Across All Pages #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
57f614a
docs(memory-bank): update active context before UX/UI enhancement work
JacksonR64 Jun 12, 2025
2704aa2
feat(frontend): fix critical UX/UI issues across platform - Resolve c…
JacksonR64 Jun 12, 2025
68f7828
feat(navigation): Fix navigation consistency across all pages - Compr…
JacksonR64 Jun 12, 2025
4160d73
feat(navigation): Complete navigation consistency fixes - Build Statu…
JacksonR64 Jun 12, 2025
800ff45
feat(navigation): Add Footer to My Events and Event Detail pages - Fo…
JacksonR64 Jun 12, 2025
8805ee8
feat(ux): Complete navigation consistency across all pages - Added Na…
JacksonR64 Jun 12, 2025
02547ca
fix(gitignore): Remove memory-bank files from git tracking - Files sh…
JacksonR64 Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 5 additions & 21 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
import { Navigation } from '@/components/ui/Navigation';
import { Footer } from '@/components/ui/Footer';
import Link from 'next/link';
import { Calendar, ArrowLeft, Heart, Users, MapPin } from 'lucide-react';
import { Heart, Users, MapPin } from 'lucide-react';

export default function AboutPage() {
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-3">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<Calendar className="w-5 h-5 text-white" />
</div>
<h1 className="text-xl font-bold text-gray-900">LocalLoop</h1>
</Link>
<Link
href="/"
className="flex items-center gap-2 text-blue-600 hover:text-blue-800 transition-colors"
>
<ArrowLeft className="w-4 h-4" />
Back to Home
</Link>
</div>
</div>
</header>
<Navigation />

{/* Main Content */}
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
Expand Down Expand Up @@ -120,6 +103,7 @@ export default function AboutPage() {
</Link>
</div>
</main>
<Footer />
</div>
);
}
204 changes: 104 additions & 100 deletions app/auth/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
import { useAuth } from '@/lib/auth-context'
import Link from 'next/link'
import { Lock } from 'lucide-react'
import { Navigation } from '@/components/ui/Navigation'

export default function LoginPage() {
const [email, setEmail] = useState('')
Expand Down Expand Up @@ -72,119 +73,122 @@ export default function LoginPage() {
}

return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full space-y-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign in to LocalLoop
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
Or{' '}
<Link href="/auth/signup" className="font-medium text-blue-600 hover:text-blue-500">
create a new account
</Link>
</p>
</div>

<form className="mt-8 space-y-6" onSubmit={handleEmailLogin}>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{error}
</div>
)}

<div className="rounded-md shadow-sm -space-y-px">
<div>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="Email address"
/>
</div>
<div>
<input
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="Password"
/>
</div>
</div>

<div className="flex items-center justify-between">
<Link href="/auth/reset-password" className="text-sm text-blue-600 hover:text-blue-500">
Forgot your password?
</Link>
</div>

<>
<Navigation />
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="max-w-md w-full space-y-8">
<div>
<button
type="submit"
disabled={loading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
>
{loading ? 'Signing in...' : 'Sign in'}
</button>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign in to LocalLoop
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
Or{' '}
<Link href="/auth/signup" className="font-medium text-blue-600 hover:text-blue-500">
create a new account
</Link>
</p>
</div>

<div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" />
<form className="mt-8 space-y-6" onSubmit={handleEmailLogin}>
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{error}
</div>
)}

<div className="rounded-md shadow-sm -space-y-px">
<div>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="Email address"
/>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-gray-50 text-gray-500">Or continue with</span>
<div>
<input
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="Password"
/>
</div>
</div>

<div className="mt-6 grid grid-cols-2 gap-3">
{/* Google Auth Button */}
<button
onClick={handleGoogleLogin}
type="button"
disabled={!isGoogleAuthEnabled}
className={`w-full inline-flex justify-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isGoogleAuthEnabled
? 'border-gray-300 bg-white text-gray-500 hover:bg-gray-50'
: 'border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
}`}
>
<span>Google</span>
</button>
<div className="flex items-center justify-between">
<Link href="/auth/reset-password" className="text-sm text-blue-600 hover:text-blue-500">
Forgot your password?
</Link>
</div>

{/* Apple Auth Button */}
<div>
<button
onClick={handleAppleLogin}
type="button"
disabled={!isAppleAuthEnabled}
className={`w-full inline-flex justify-center items-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isAppleAuthEnabled
? 'border-gray-300 bg-white text-gray-500 hover:bg-gray-50'
: 'border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed relative'
}`}
title={!isAppleAuthEnabled ? 'Coming soon! Requires Apple Developer account' : ''}
type="submit"
disabled={loading}
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
>
{!isAppleAuthEnabled && (
<Lock className="w-3 h-3 mr-1 text-gray-400" />
)}
<span>Apple</span>
{!isAppleAuthEnabled && (
<span className="ml-1 text-xs text-gray-400">(Soon)</span>
)}
{loading ? 'Signing in...' : 'Sign in'}
</button>
</div>

{!isAppleAuthEnabled && (
<p className="mt-2 text-xs text-center text-gray-500">
Apple Sign-in coming soon! We&apos;re working on getting an Apple Developer account.
</p>
)}
</div>
</form>
<div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-gray-50 text-gray-500">Or continue with</span>
</div>
</div>

<div className="mt-6 grid grid-cols-2 gap-3">
{/* Google Auth Button */}
<button
onClick={handleGoogleLogin}
type="button"
disabled={!isGoogleAuthEnabled}
className={`w-full inline-flex justify-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isGoogleAuthEnabled
? 'border-gray-300 bg-white text-gray-500 hover:bg-gray-50'
: 'border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed'
}`}
>
<span>Google</span>
</button>

{/* Apple Auth Button */}
<button
onClick={handleAppleLogin}
type="button"
disabled={!isAppleAuthEnabled}
className={`w-full inline-flex justify-center items-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isAppleAuthEnabled
? 'border-gray-300 bg-white text-gray-500 hover:bg-gray-50'
: 'border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed relative'
}`}
title={!isAppleAuthEnabled ? 'Coming soon! Requires Apple Developer account' : ''}
>
{!isAppleAuthEnabled && (
<Lock className="w-3 h-3 mr-1 text-gray-400" />
)}
<span>Apple</span>
{!isAppleAuthEnabled && (
<span className="ml-1 text-xs text-gray-400">(Soon)</span>
)}
</button>
</div>

{!isAppleAuthEnabled && (
<p className="mt-2 text-xs text-center text-gray-500">
Apple Sign-in coming soon! We&apos;re working on getting an Apple Developer account.
</p>
)}
</div>
</form>
</div>
</div>
</div>
</>
)
}
Loading
Loading