andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/AddToCalendarButton.js
View File

@@ -128,7 +128,7 @@ export default function AddToCalendarButton({
{event && (
<>
{/* Single Event Export Options */}
<div className="px-2 py-1.5 text-sm font-semibold text-[#422268]">
<div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
Add This Event
</div>
@@ -137,7 +137,7 @@ export default function AddToCalendarButton({
className="cursor-pointer"
>
<svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
</svg>
Google Calendar
</DropdownMenuItem>
@@ -147,7 +147,7 @@ export default function AddToCalendarButton({
className="cursor-pointer"
>
<svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 2h14v20H7V2zm7 11c0 2.761-2.239 5-5 5H2c-.552 0-1-.448-1-1s.448-1 1-1h7c1.657 0 3-1.343 3-3V9c0-1.657-1.343-3-3-3H2c-.552 0-1-.448-1-1s.448-1 1-1h7c2.761 0 5 2.239 5 5v4z"/>
<path d="M7 2h14v20H7V2zm7 11c0 2.761-2.239 5-5 5H2c-.552 0-1-.448-1-1s.448-1 1-1h7c1.657 0 3-1.343 3-3V9c0-1.657-1.343-3-3-3H2c-.552 0-1-.448-1-1s.448-1 1-1h7c2.761 0 5 2.239 5 5v4z" />
</svg>
Outlook Web
</DropdownMenuItem>
@@ -157,7 +157,7 @@ export default function AddToCalendarButton({
className="cursor-pointer"
>
<svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
<path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
</svg>
Apple Calendar
</DropdownMenuItem>
@@ -177,7 +177,7 @@ export default function AddToCalendarButton({
{showSubscribe && (
<>
{/* Subscription Options */}
<div className="px-2 py-1.5 text-sm font-semibold text-[#422268]">
<div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
Calendar Feeds
</div>
@@ -187,7 +187,7 @@ export default function AddToCalendarButton({
>
<RefreshCw className="h-4 w-4 mr-2" />
Subscribe to My Events
<div className="text-xs text-[#664fa3] mt-0.5">
<div className="text-xs text-var(--purple-lavender) mt-0.5">
Auto-syncs your RSVP'd events
</div>
</DropdownMenuItem>
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({
>
<Download className="h-4 w-4 mr-2" />
Download All Events
<div className="text-xs text-[#664fa3] mt-0.5">
<div className="text-xs text-var(--purple-lavender) mt-0.5">
One-time import of all upcoming events
</div>
</DropdownMenuItem>
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({
)}
{!event && !showSubscribe && (
<div className="px-2 py-6 text-center text-sm text-[#664fa3]">
<div className="px-2 py-6 text-center text-sm text-var(--purple-lavender)">
No event selected
</div>
)}

24
src/components/AdminSidebar.js
View File

@@ -211,10 +211,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
className={`
flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
${item.disabled
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
? 'opacity-50 cursor-not-allowed text-var(--purple-lavender)'
: active
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
? 'bg-var(--orange-light)/10 text-var(--orange-light)'
: 'text-var(--purple-ink) hover:bg-var(--neutral-800)/20'
}
`}
>
@@ -229,7 +229,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
<>
<span className="flex-1">{item.name}</span>
{item.disabled && (
<Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
<Badge className="bg-var(--neutral-800) text-var(--purple-ink) text-xs px-2 py-0.5">
Soon
</Badge>
)}
@@ -265,7 +265,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Sidebar */}
<aside
className={`
bg-white border-r border-[#ddd8eb] transition-all duration-300 ease-out
bg-background border-r border-var(--neutral-800) transition-all duration-300 ease-out
${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
${isOpen ? 'w-64' : 'w-16'}
${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
@@ -273,7 +273,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
`}
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
<div className="flex items-center justify-between p-4 border-b border-var(--neutral-800)">
<Link to="/" className="flex items-center gap-3 group flex-1 min-w-0">
<img
src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
@@ -294,7 +294,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</Link>
<button
onClick={onToggle}
className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
className="p-2 rounded-lg hover:bg-var(--neutral-800)/20 transition-colors"
aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
>
{isMobile ? (
@@ -376,11 +376,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</nav>
{/* User Section */}
<div className="border-t border-[#ddd8eb] p-4 space-y-2">
<div className="border-t border-var(--neutral-800) p-4 space-y-2">
{isOpen && user && (
<div className="px-4 py-3 mb-2 flex justify-between items-center">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
<div className="h-10 w-10 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold">
{user.first_name?.[0]}{user.last_name?.[0]}
</div>
<div className="flex-1 min-w-0">
@@ -427,16 +427,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* Storage Usage Widget */}
<div className="mb-2">
{isOpen ? (
<div className="px-4 py-3 bg-[#F8F7FB] rounded-lg">
<div className="px-4 py-3 bg-var(--lavender-500) rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-primary">Storage Usage</span>
<span className="text-xs text-muted-foreground">{storagePercentage}%</span>
</div>
<div className="w-full bg-[#ddd8eb] rounded-full h-2">
<div className="w-full bg-var(--neutral-800) rounded-full h-2">
<div
className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
storagePercentage > 75 ? 'bg-yellow-500' :
'bg-[#81B29A]'
'bg-var(--green-light)'
}`}
style={{ width: `${storagePercentage}%` }}
/>

18
src/components/AttendanceDialog.js
View File

@@ -55,21 +55,21 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-white">
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Mark Attendance: {event?.title}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 mt-4">
{rsvps.length === 0 ? (
<p className="text-center text-[#664fa3] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
<p className="text-center text-var(--purple-lavender) py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
) : (
rsvps.map((rsvp) => (
<div
key={rsvp.user_id}
className="flex items-center gap-3 p-4 border-2 border-[#ddd8eb] rounded-xl hover:border-[#664fa3] transition-colors"
className="flex items-center gap-3 p-4 border-2 border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) transition-colors"
>
<Checkbox
checked={attendance[rsvp.user_id] || false}
@@ -79,11 +79,11 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
className="w-5 h-5"
/>
<div className="flex-1">
<p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
<p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
</div>
{rsvp.attended && (
<span className="text-sm text-[#81B29A] font-medium">
<span className="text-sm text-var(--green-light) font-medium">
✓ Attended
</span>
)}
@@ -96,14 +96,14 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
<Button
onClick={handleSave}
disabled={loading}
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
>
{loading ? 'Saving...' : 'Save Attendance'}
</Button>
<Button
onClick={() => onOpenChange(false)}
variant="outline"
className="flex-1 border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white hover:text-[#422268] rounded-full"
className="flex-1 border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background hover:text-var(--purple-ink) rounded-full"
>
Cancel
</Button>

18
src/components/ChangePasswordDialog.js
View File

@@ -66,17 +66,17 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md bg-white">
<DialogContent className="sm:max-w-md bg-background">
<DialogHeader>
<div className="flex items-center gap-2 mb-2">
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#f1eef9]">
<Lock className="h-5 w-5 text-[#ff9e77]" />
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-var(--lavender-300)">
<Lock className="h-5 w-5 text-var(--orange-light)" />
</div>
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Change Password
</DialogTitle>
</div>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your password to keep your account secure.
</DialogDescription>
</DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.currentPassword}
onChange={handleInputChange}
placeholder="Enter current password"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.newPassword}
onChange={handleInputChange}
placeholder="Enter new password (min. 6 characters)"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -120,7 +120,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Re-enter new password"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -136,7 +136,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
<Button
type="submit"
disabled={loading}
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6 disabled:opacity-50"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 disabled:opacity-50"
>
{loading ? 'Changing...' : 'Change Password'}
</Button>

24
src/components/ConfirmationDialog.js
View File

@@ -38,8 +38,8 @@ const ConfirmationDialog = ({
const variants = {
warning: {
icon: AlertTriangle,
iconColor: 'text-[#ff9e77]',
confirmButtonClass: 'bg-[#ff9e77] text-white hover:bg-[#e88d66] rounded-full px-6',
iconColor: 'text-var(--orange-light)',
confirmButtonClass: 'bg-var(--orange-light) text-white hover:bg-var(--orange-sand) rounded-full px-6',
},
danger: {
icon: AlertTriangle,
@@ -48,13 +48,13 @@ const ConfirmationDialog = ({
},
info: {
icon: Info,
iconColor: 'text-[#664fa3]',
confirmButtonClass: 'bg-[#664fa3] text-white hover:bg-[#553d8a] rounded-full px-6',
iconColor: 'text-var(--purple-lavender)',
confirmButtonClass: 'bg-var(--purple-lavender) text-white hover:bg-var(--purple-plum) rounded-full px-6',
},
success: {
icon: CheckCircle,
iconColor: 'text-[#81B29A]',
confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
iconColor: 'text-var(--green-light)',
confirmButtonClass: 'bg-var(--green-light) text-white hover:bg-var(--green-pastel) rounded-full px-6',
},
};
@@ -63,21 +63,21 @@ const ConfirmationDialog = ({
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent className="bg-white rounded-2xl border border-[#ddd8eb] p-0 overflow-hidden max-w-md">
<AlertDialogContent className="bg-background rounded-2xl border border-var(--neutral-800) p-0 overflow-hidden max-w-md">
<AlertDialogHeader className="p-6 pb-4">
<div className="flex items-start gap-4">
<div className={`p-3 rounded-full bg-[#F8F7FB] ${config.iconColor}`}>
<div className={`p-3 rounded-full bg-var(--lavender-500) ${config.iconColor}`}>
<Icon className="h-6 w-6" />
</div>
<div className="flex-1">
<AlertDialogTitle
className="text-xl font-semibold text-[#422268] mb-2"
className="text-xl font-semibold text-var(--purple-ink) mb-2"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{title}
</AlertDialogTitle>
<AlertDialogDescription
className="text-[#664fa3] text-sm leading-relaxed"
className="text-var(--purple-lavender) text-sm leading-relaxed"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{description}
@@ -85,9 +85,9 @@ const ConfirmationDialog = ({
</div>
</div>
</AlertDialogHeader>
<AlertDialogFooter className="p-6 pt-4 bg-[#F8F7FB] flex-row gap-3 justify-end">
<AlertDialogFooter className="p-6 pt-4 bg-var(--lavender-500) flex-row gap-3 justify-end">
<AlertDialogCancel
className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white rounded-full px-6"
className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background rounded-full px-6"
disabled={loading}
>
{cancelText}

50
src/components/CreateMemberDialog.js
View File

@@ -121,11 +121,11 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<UserPlus className="h-6 w-6" />
Create Member
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create a new member account with direct login access. Member will be created immediately.
</DialogDescription>
</DialogHeader>
@@ -135,7 +135,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Email & Password Row */}
<div className="grid md:grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="email" className="text-[#422268]">
<Label htmlFor="email" className="text-var(--purple-ink)">
Email <span className="text-red-500">*</span>
</Label>
<Input
@@ -143,7 +143,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
type="email"
value={formData.email}
onChange={(e) => handleChange('email', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="member@example.com"
/>
{errors.email && (
@@ -152,7 +152,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
</div>
<div className="grid gap-2">
<Label htmlFor="password" className="text-[#422268]">
<Label htmlFor="password" className="text-var(--purple-ink)">
Password <span className="text-red-500">*</span>
</Label>
<Input
@@ -160,7 +160,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
type="password"
value={formData.password}
onChange={(e) => handleChange('password', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="Minimum 8 characters"
/>
{errors.password && (
@@ -172,14 +172,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Name Row */}
<div className="grid md:grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="first_name" className="text-[#422268]">
<Label htmlFor="first_name" className="text-var(--purple-ink)">
First Name <span className="text-red-500">*</span>
</Label>
<Input
id="first_name"
value={formData.first_name}
onChange={(e) => handleChange('first_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="John"
/>
{errors.first_name && (
@@ -188,14 +188,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
</div>
<div className="grid gap-2">
<Label htmlFor="last_name" className="text-[#422268]">
<Label htmlFor="last_name" className="text-var(--purple-ink)">
Last Name <span className="text-red-500">*</span>
</Label>
<Input
id="last_name"
value={formData.last_name}
onChange={(e) => handleChange('last_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="Doe"
/>
{errors.last_name && (
@@ -206,7 +206,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Phone */}
<div className="grid gap-2">
<Label htmlFor="phone" className="text-[#422268]">
<Label htmlFor="phone" className="text-var(--purple-ink)">
Phone <span className="text-red-500">*</span>
</Label>
<Input
@@ -214,7 +214,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
type="tel"
value={formData.phone}
onChange={(e) => handleChange('phone', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="(555) 123-4567"
/>
{errors.phone && (
@@ -224,14 +224,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Address */}
<div className="grid gap-2">
<Label htmlFor="address" className="text-[#422268]">
<Label htmlFor="address" className="text-var(--purple-ink)">
Address
</Label>
<Input
id="address"
value={formData.address}
onChange={(e) => handleChange('address', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="123 Main St"
/>
</div>
@@ -239,35 +239,35 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* City, State, Zipcode Row */}
<div className="grid md:grid-cols-3 gap-4">
<div className="grid gap-2">
<Label htmlFor="city" className="text-[#422268]">City</Label>
<Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
<Input
id="city"
value={formData.city}
onChange={(e) => handleChange('city', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="San Francisco"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="state" className="text-[#422268]">State</Label>
<Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
<Input
id="state"
value={formData.state}
onChange={(e) => handleChange('state', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="CA"
maxLength={2}
/>
</div>
<div className="grid gap-2">
<Label htmlFor="zipcode" className="text-[#422268]">Zipcode</Label>
<Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
<Input
id="zipcode"
value={formData.zipcode}
onChange={(e) => handleChange('zipcode', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="94102"
/>
</div>
@@ -276,24 +276,24 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Dates Row */}
<div className="grid md:grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="date_of_birth" className="text-[#422268]">Date of Birth</Label>
<Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
<Input
id="date_of_birth"
type="date"
value={formData.date_of_birth}
onChange={(e) => handleChange('date_of_birth', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="member_since" className="text-[#422268]">Member Since</Label>
<Label htmlFor="member_since" className="text-var(--purple-ink)">Member Since</Label>
<Input
id="member_since"
type="date"
value={formData.member_since}
onChange={(e) => handleChange('member_since', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
</div>
@@ -311,7 +311,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
</Button>
<Button
type="submit"
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
disabled={loading}
>
{loading ? (

30
src/components/CreateStaffDialog.js
View File

@@ -101,11 +101,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[600px] rounded-2xl">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<UserPlus className="h-6 w-6" />
Create Staff Member
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create a new staff account with direct login access. User will be created immediately.
</DialogDescription>
</DialogHeader>
@@ -114,7 +114,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<div className="grid gap-6 py-4">
{/* Email */}
<div className="grid gap-2">
<Label htmlFor="email" className="text-[#422268]">
<Label htmlFor="email" className="text-var(--purple-ink)">
Email <span className="text-red-500">*</span>
</Label>
<Input
@@ -122,7 +122,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
type="email"
value={formData.email}
onChange={(e) => handleChange('email', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="staff@example.com"
/>
{errors.email && (
@@ -132,7 +132,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Password */}
<div className="grid gap-2">
<Label htmlFor="password" className="text-[#422268]">
<Label htmlFor="password" className="text-var(--purple-ink)">
Password <span className="text-red-500">*</span>
</Label>
<Input
@@ -140,7 +140,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
type="password"
value={formData.password}
onChange={(e) => handleChange('password', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="Minimum 8 characters"
/>
{errors.password && (
@@ -150,14 +150,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* First Name */}
<div className="grid gap-2">
<Label htmlFor="first_name" className="text-[#422268]">
<Label htmlFor="first_name" className="text-var(--purple-ink)">
First Name <span className="text-red-500">*</span>
</Label>
<Input
id="first_name"
value={formData.first_name}
onChange={(e) => handleChange('first_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="John"
/>
{errors.first_name && (
@@ -167,14 +167,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Last Name */}
<div className="grid gap-2">
<Label htmlFor="last_name" className="text-[#422268]">
<Label htmlFor="last_name" className="text-var(--purple-ink)">
Last Name <span className="text-red-500">*</span>
</Label>
<Input
id="last_name"
value={formData.last_name}
onChange={(e) => handleChange('last_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="Doe"
/>
{errors.last_name && (
@@ -184,7 +184,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Phone */}
<div className="grid gap-2">
<Label htmlFor="phone" className="text-[#422268]">
<Label htmlFor="phone" className="text-var(--purple-ink)">
Phone <span className="text-red-500">*</span>
</Label>
<Input
@@ -192,7 +192,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
type="tel"
value={formData.phone}
onChange={(e) => handleChange('phone', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="(555) 123-4567"
/>
{errors.phone && (
@@ -202,11 +202,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Role */}
<div className="grid gap-2">
<Label htmlFor="role" className="text-[#422268]">
<Label htmlFor="role" className="text-var(--purple-ink)">
Role <span className="text-red-500">*</span>
</Label>
<Select value={formData.role} onValueChange={(value) => handleChange('role', value)}>
<SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -229,7 +229,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
</Button>
<Button
type="submit"
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
disabled={loading}
>
{loading ? (

65
src/components/ImportMembersDialog.js
View File

@@ -140,11 +140,11 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Upload className="h-6 w-6" />
{importResult ? 'Import Results' : 'Import Members from CSV'}
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{importResult
? 'Review the import results below'
: 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'}
@@ -155,8 +155,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
// Upload Form
<div className="grid gap-6 py-4">
{/* CSV Format Instructions */}
<Alert className="border-[#664fa3] bg-[#F9F8FB]">
<AlertDescription className="text-sm text-[#422268]">
<Alert className="border-var(--purple-lavender) bg-var(--lavender-700)">
<AlertDescription className="text-sm text-var(--purple-ink)">
<strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
<br />
<strong>Optional columns:</strong> Status, Address, City, State, Zipcode, Date of Birth, Member Since
@@ -167,11 +167,10 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
{/* File Upload Area */}
<div
className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${
dragActive
? 'border-[#664fa3] bg-[#F9F8FB]'
: 'border-[#ddd8eb] hover:border-[#664fa3] hover:bg-[#F9F8FB]'
}`}
className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
? 'border-var(--purple-lavender) bg-var(--lavender-700)'
: 'border-var(--neutral-800) hover:border-var(--purple-lavender) hover:bg-var(--lavender-700)'
}`}
onDragEnter={handleDrag}
onDragLeave={handleDrag}
onDragOver={handleDrag}
@@ -179,12 +178,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
>
{file ? (
<div className="flex flex-col items-center gap-4">
<FileUp className="h-16 w-16 text-[#81B29A]" />
<FileUp className="h-16 w-16 text-var(--green-light)" />
<div>
<p className="text-lg font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-lg font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{file.name}
</p>
<p className="text-sm text-[#664fa3]">
<p className="text-sm text-var(--purple-lavender)">
{(file.size / 1024).toFixed(2)} KB
</p>
</div>
@@ -199,12 +198,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
</div>
) : (
<div className="flex flex-col items-center gap-4">
<Upload className="h-16 w-16 text-[#ddd8eb]" />
<Upload className="h-16 w-16 text-var(--neutral-800)" />
<div>
<p className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<p className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
Drag and drop your CSV file here
</p>
<p className="text-sm text-[#664fa3] mb-4">or</p>
<p className="text-sm text-var(--purple-lavender) mb-4">or</p>
<Label htmlFor="file-upload">
<Button variant="outline" className="rounded-xl cursor-pointer" asChild>
<span>Browse Files</span>
@@ -223,14 +222,14 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
</div>
{/* Options */}
<div className="flex items-center gap-3 p-4 bg-[#F9F8FB] rounded-xl">
<div className="flex items-center gap-3 p-4 bg-var(--lavender-700) rounded-xl">
<Checkbox
checked={updateExisting}
onCheckedChange={setUpdateExisting}
id="update-existing"
className="h-5 w-5 border-2 border-[#664fa3] data-[state=checked]:bg-[#664fa3]"
className="h-5 w-5 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
/>
<Label htmlFor="update-existing" className="text-[#422268] cursor-pointer">
<Label htmlFor="update-existing" className="text-var(--purple-ink) cursor-pointer">
Update existing members (if email already exists)
</Label>
</div>
@@ -240,9 +239,9 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
<div className="grid gap-6 py-4">
{/* Summary Cards */}
<div className="grid md:grid-cols-4 gap-4">
<div className="p-4 bg-white rounded-xl border border-[#ddd8eb] text-center">
<p className="text-sm text-[#664fa3] mb-1">Total Rows</p>
<p className="text-2xl font-semibold text-[#422268]">{importResult.total_rows}</p>
<div className="p-4 bg-background rounded-xl border border-var(--neutral-800) text-center">
<p className="text-sm text-var(--purple-lavender) mb-1">Total Rows</p>
<p className="text-2xl font-semibold text-var(--purple-ink)">{importResult.total_rows}</p>
</div>
<div className="p-4 bg-green-50 rounded-xl border border-green-200 text-center">
<p className="text-sm text-green-700 mb-1">Successful</p>
@@ -252,7 +251,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
<p className="text-sm text-red-700 mb-1">Failed</p>
<p className="text-2xl font-semibold text-red-600">{importResult.failed_rows}</p>
</div>
<div className="p-4 bg-white rounded-xl border border-[#ddd8eb] flex items-center justify-center gap-2">
<div className="p-4 bg-background rounded-xl border border-var(--neutral-800) flex items-center justify-center gap-2">
{getStatusIcon(importResult.status)}
{getStatusBadge(importResult.status)}
</div>
@@ -261,23 +260,23 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Errors Table */}
{importResult.errors && importResult.errors.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Errors ({importResult.errors.length} {importResult.errors.length === 10 ? '- showing first 10' : ''})
</h3>
<div className="border border-[#ddd8eb] rounded-xl overflow-hidden">
<div className="border border-var(--neutral-800) rounded-xl overflow-hidden">
<Table>
<TableHeader>
<TableRow className="bg-[#DDD8EB] hover:bg-[#DDD8EB]">
<TableHead className="text-[#422268] font-semibold">Row</TableHead>
<TableHead className="text-[#422268] font-semibold">Email</TableHead>
<TableHead className="text-[#422268] font-semibold">Error</TableHead>
<TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
<TableHead className="text-var(--purple-ink) font-semibold">Row</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Error</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{importResult.errors.map((error, idx) => (
<TableRow key={idx} className="hover:bg-[#F9F8FB]">
<TableCell className="font-medium text-[#422268]">{error.row}</TableCell>
<TableCell className="text-[#664fa3]">{error.email}</TableCell>
<TableRow key={idx} className="hover:bg-var(--lavender-700)">
<TableCell className="font-medium text-var(--purple-ink)">{error.row}</TableCell>
<TableCell className="text-var(--purple-lavender)">{error.email}</TableCell>
<TableCell className="text-red-600 text-sm">{error.error}</TableCell>
</TableRow>
))}
@@ -302,7 +301,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
</Button>
<Button
onClick={handleSubmit}
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
disabled={loading || !file}
>
{loading ? (
@@ -321,7 +320,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
) : (
<Button
onClick={handleClose}
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
>
Done
</Button>

34
src/components/InviteStaffDialog.js
View File

@@ -125,11 +125,11 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[600px] rounded-2xl">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Mail className="h-6 w-6" />
{invitationUrl ? 'Invitation Sent' : 'Invite Staff Member'}
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{invitationUrl
? 'The invitation has been sent via email. You can also copy the link below.'
: 'Send an email invitation to join as staff. They will set their own password.'}
@@ -139,16 +139,16 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{invitationUrl ? (
// Show invitation URL after successful send
<div className="py-4">
<Label className="text-[#422268] mb-2 block">Invitation Link (expires in 7 days)</Label>
<Label className="text-var(--purple-ink) mb-2 block">Invitation Link (expires in 7 days)</Label>
<div className="flex gap-2">
<Input
value={invitationUrl}
readOnly
className="rounded-xl border-2 border-[#ddd8eb] bg-gray-50"
className="rounded-xl border-2 border-var(--neutral-800) bg-gray-50"
/>
<Button
onClick={copyToClipboard}
className="rounded-xl bg-[#664fa3] hover:bg-[#422268] text-white flex-shrink-0"
className="rounded-xl bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white flex-shrink-0"
>
{copied ? (
<>
@@ -170,7 +170,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<div className="grid gap-6 py-4">
{/* Email */}
<div className="grid gap-2">
<Label htmlFor="email" className="text-[#422268]">
<Label htmlFor="email" className="text-var(--purple-ink)">
Email <span className="text-red-500">*</span>
</Label>
<Input
@@ -178,7 +178,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
type="email"
value={formData.email}
onChange={(e) => handleChange('email', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="staff@example.com"
/>
{errors.email && (
@@ -188,35 +188,35 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* First Name (Optional) */}
<div className="grid gap-2">
<Label htmlFor="first_name" className="text-[#422268]">
<Label htmlFor="first_name" className="text-var(--purple-ink)">
First Name <span className="text-gray-400">(Optional)</span>
</Label>
<Input
id="first_name"
value={formData.first_name}
onChange={(e) => handleChange('first_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="John"
/>
</div>
{/* Last Name (Optional) */}
<div className="grid gap-2">
<Label htmlFor="last_name" className="text-[#422268]">
<Label htmlFor="last_name" className="text-var(--purple-ink)">
Last Name <span className="text-gray-400">(Optional)</span>
</Label>
<Input
id="last_name"
value={formData.last_name}
onChange={(e) => handleChange('last_name', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="Doe"
/>
</div>
{/* Phone (Optional) */}
<div className="grid gap-2">
<Label htmlFor="phone" className="text-[#422268]">
<Label htmlFor="phone" className="text-var(--purple-ink)">
Phone <span className="text-gray-400">(Optional)</span>
</Label>
<Input
@@ -224,14 +224,14 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
type="tel"
value={formData.phone}
onChange={(e) => handleChange('phone', e.target.value)}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
placeholder="(555) 123-4567"
/>
</div>
{/* Role */}
<div className="grid gap-2">
<Label htmlFor="role" className="text-[#422268]">
<Label htmlFor="role" className="text-var(--purple-ink)">
Role <span className="text-red-500">*</span>
</Label>
<Select
@@ -239,7 +239,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
onValueChange={(value) => handleChange('role', value)}
disabled={loadingRoles}
>
<SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select a role"} />
</SelectTrigger>
<SelectContent>
@@ -275,7 +275,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
</Button>
<Button
type="submit"
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
disabled={loading}
>
{loading ? (
@@ -298,7 +298,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<DialogFooter>
<Button
onClick={handleClose}
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
>
Done
</Button>

4
src/components/MemberFooter.js
View File

@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
const MemberFooter = () => {
return (
<footer className="bg-[#422268] text-white mt-auto">
<footer className="bg-var(--purple-ink) text-white mt-auto">
<div className="max-w-7xl mx-auto px-6 py-12">
<div className="grid md:grid-cols-4 gap-8">
{/* Logo & About */}
@@ -104,7 +104,7 @@ const MemberFooter = () => {
</div>
{/* Bottom Bar */}
<div className="border-t border-[#664fa3]">
<div className="border-t border-var(--purple-lavender)">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex gap-6">

4
src/components/MemberRoute.js
View File

@@ -19,8 +19,8 @@ const MemberRoute = ({ children }) => {
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-[#FDFCF8]">
<p className="text-[#6B708D]">Loading...</p>
<div className="min-h-screen flex items-center justify-center bg-var(--neutral-200:)">
<p className="text-var(--slate-muted)">Loading...</p>
</div>
);
}

60
src/components/Navbar.js
View File

@@ -26,7 +26,7 @@ const Navbar = () => {
return (
<>
{/* Top Header - Member Actions (Desktop Only) */}
<header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
<header className="hidden lg:flex bg-gradient-to-r from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
{user && (
<span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
Welcome, {user.first_name}
@@ -53,7 +53,7 @@ const Navbar = () => {
</button>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -62,7 +62,7 @@ const Navbar = () => {
</header>
{/* Main Header - Member Navigation */}
<header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<header className="bg-var(--purple-lavender) px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
<Link to="/dashboard">
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
@@ -84,21 +84,21 @@ const Navbar = () => {
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Board of Directors
</Link>
@@ -149,21 +149,21 @@ const Navbar = () => {
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/members/newsletters" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/newsletters" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Newsletters
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/members/financials" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/financials" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Financials
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/members/bylaws" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/members/bylaws" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Poppins', sans-serif" }}>
Bylaws
</Link>
@@ -183,7 +183,7 @@ const Navbar = () => {
{/* Mobile Hamburger Button */}
<button
onClick={() => setIsMobileMenuOpen(true)}
className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
className="lg:hidden p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
aria-label="Open menu"
>
<Menu className="h-6 w-6" />
@@ -200,7 +200,7 @@ const Navbar = () => {
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[#664fa3] to-[#48286e] shadow-2xl flex flex-col">
<div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-var(--purple-lavender) to-var(--purple-deep) shadow-2xl flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-white/20">
<div className="flex items-center gap-3">
@@ -211,7 +211,7 @@ const Navbar = () => {
</div>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
className="p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
aria-label="Close menu"
>
<X className="h-6 w-6" />
@@ -236,7 +236,7 @@ const Navbar = () => {
<Link
to="/"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Home
@@ -250,7 +250,7 @@ const Navbar = () => {
<Link
to="/about/history"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
History
@@ -258,7 +258,7 @@ const Navbar = () => {
<Link
to="/about/mission-values"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Mission and Values
@@ -266,7 +266,7 @@ const Navbar = () => {
<Link
to="/about/board"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Board of Directors
@@ -276,7 +276,7 @@ const Navbar = () => {
<Link
to="/dashboard"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Dashboard
@@ -285,7 +285,7 @@ const Navbar = () => {
<Link
to="/events"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-events-nav-button"
>
@@ -295,7 +295,7 @@ const Navbar = () => {
<Link
to="/members/calendar"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Calendar
@@ -304,7 +304,7 @@ const Navbar = () => {
<Link
to="/members/directory"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Directory
@@ -313,7 +313,7 @@ const Navbar = () => {
<Link
to="/members/gallery"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Gallery
@@ -327,7 +327,7 @@ const Navbar = () => {
<Link
to="/members/newsletters"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Newsletters
@@ -335,7 +335,7 @@ const Navbar = () => {
<Link
to="/members/financials"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Financials
@@ -343,7 +343,7 @@ const Navbar = () => {
<Link
to="/members/bylaws"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Bylaws
@@ -353,7 +353,7 @@ const Navbar = () => {
<Link
to="/profile"
onClick={() => setIsMobileMenuOpen(false)}
className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-profile-nav-button"
>
@@ -370,7 +370,7 @@ const Navbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
>
<Button
className="w-full bg-white/20 hover:bg-white/30 text-white rounded-lg"
className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Admin Panel
@@ -383,7 +383,7 @@ const Navbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
>
<Button
className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-lg font-semibold"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -396,7 +396,7 @@ const Navbar = () => {
handleLogout();
}}
variant="outline"
className="w-full border-2 border-white/30 text-white hover:bg-white/10 rounded-lg"
className="w-full border-2 border-white/30 text-white hover:bg-background/10 rounded-lg"
style={{ fontFamily: "'Poppins', sans-serif" }}
data-testid="mobile-logout-button"
>

78
src/components/PaymentActivationDialog.js
View File

@@ -157,12 +157,12 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[600px] bg-white rounded-2xl">
<DialogContent className="sm:max-w-[600px] bg-background rounded-2xl">
<DialogHeader>
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Activate Manual Payment
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Record offline payment for {user.first_name} {user.last_name} ({user.email})
</DialogDescription>
</DialogHeader>
@@ -170,7 +170,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
<form onSubmit={handleSubmit} className="space-y-6 py-4">
{/* Subscription Plan Selection */}
<div className="space-y-2">
<Label htmlFor="plan_id" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="plan_id" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Subscription Plan
</Label>
<Select
@@ -187,7 +187,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
});
}}
>
<SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectValue placeholder="Select subscription plan" />
</SelectTrigger>
<SelectContent>
@@ -203,7 +203,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
</SelectContent>
</Select>
{selectedPlan && (
<p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
</p>
)}
@@ -211,7 +211,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Payment Amount */}
<div className="space-y-2">
<Label htmlFor="amount" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="amount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Amount ($)
</Label>
<Input
@@ -221,12 +221,12 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
min="0"
placeholder="Enter amount"
value={formData.amount}
onChange={(e) => setFormData({...formData, amount: e.target.value})}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
required
/>
{selectedPlan && (
<p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
</p>
)}
@@ -234,14 +234,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Breakdown Display */}
{breakdown && breakdown.total >= breakdown.base && (
<Card className="p-4 bg-[#f9f5ff] border border-[#DDD8EB]">
<Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
<div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex justify-between text-[#422268]">
<div className="flex justify-between text-var(--purple-ink)">
<span>Membership Fee:</span>
<span className="font-semibold">{formatPrice(breakdown.base)}</span>
</div>
{breakdown.donation > 0 && (
<div className="flex justify-between text-[#ff9e77]">
<div className="flex justify-between text-var(--orange-light)">
<span className="flex items-center gap-1">
<Heart className="h-4 w-4" />
Additional Donation:
@@ -249,7 +249,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
<span className="font-semibold">{formatPrice(breakdown.donation)}</span>
</div>
)}
<div className="flex justify-between text-[#422268] font-bold text-base pt-2 border-t border-[#DDD8EB]">
<div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
<span>Total:</span>
<span>{formatPrice(breakdown.total)}</span>
</div>
@@ -259,17 +259,17 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Payment Date */}
<div className="space-y-2">
<Label htmlFor="payment_date" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="payment_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Date
</Label>
<div className="relative">
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
<Input
id="payment_date"
type="date"
value={formData.payment_date}
onChange={(e) => setFormData({...formData, payment_date: e.target.value})}
className="pl-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
required
/>
</div>
@@ -277,14 +277,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Payment Method */}
<div className="space-y-2">
<Label htmlFor="payment_method" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="payment_method" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Payment Method
</Label>
<Select
value={formData.payment_method}
onValueChange={(value) => setFormData({...formData, payment_method: value})}
onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
>
<SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectValue placeholder="Select payment method" />
</SelectTrigger>
<SelectContent>
@@ -298,7 +298,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Subscription Period */}
<div className="space-y-3">
<Label className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
<Label className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
<div className="flex items-center gap-2">
<input
@@ -306,9 +306,9 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
id="use_custom_period"
checked={useCustomPeriod}
onChange={(e) => setUseCustomPeriod(e.target.checked)}
className="rounded border-[#ddd8eb]"
className="rounded border-var(--neutral-800)"
/>
<Label htmlFor="use_custom_period" className="text-sm text-[#664fa3] font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label htmlFor="use_custom_period" className="text-sm text-var(--purple-lavender) font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Use custom dates instead of plan's billing cycle
</Label>
</div>
@@ -316,39 +316,39 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{useCustomPeriod ? (
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="custom_period_start" className="text-sm text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="custom_period_start" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Start Date
</Label>
<Input
id="custom_period_start"
type="date"
value={formData.custom_period_start}
onChange={(e) => setFormData({...formData, custom_period_start: e.target.value})}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
required={useCustomPeriod}
/>
</div>
<div className="space-y-2">
<Label htmlFor="custom_period_end" className="text-sm text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="custom_period_end" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
End Date
</Label>
<Input
id="custom_period_end"
type="date"
value={formData.custom_period_end}
onChange={(e) => setFormData({...formData, custom_period_end: e.target.value})}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
required={useCustomPeriod}
/>
</div>
</div>
) : (
selectedPlan && (
<div className="text-sm text-[#664fa3] bg-[#f1eef9] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-var(--purple-lavender) bg-var(--lavender-300) p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedPlan.custom_cycle_enabled ? (
<>
<p>
<span className="font-medium text-[#422268]">Plan uses custom billing cycle:</span>
<span className="font-medium text-var(--purple-ink)">Plan uses custom billing cycle:</span>
<br />
{(() => {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -367,8 +367,8 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
<br />
Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
selectedPlan.billing_cycle === 'yearly' ? '1 year' :
selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
selectedPlan.billing_cycle === 'yearly' ? '1 year' :
selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
</p>
)}
</div>
@@ -378,15 +378,15 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
{/* Notes */}
<div className="space-y-2">
<Label htmlFor="notes" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="notes" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Notes (Optional)
</Label>
<Textarea
id="notes"
placeholder="Additional notes about the payment..."
value={formData.notes}
onChange={(e) => setFormData({...formData, notes: e.target.value})}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] min-h-[100px]"
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) min-h-[100px]"
/>
</div>
@@ -395,14 +395,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
className="rounded-full border-2 border-[#ddd8eb]"
className="rounded-full border-2 border-var(--neutral-800)"
>
Cancel
</Button>
<Button
type="submit"
disabled={loading}
className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
>
{loading ? 'Activating...' : 'Activate Payment'}
</Button>

50
src/components/PendingInvitationsTable.js
View File

@@ -73,9 +73,9 @@ const PendingInvitationsTable = () => {
const getRoleBadge = (role) => {
const config = {
superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
member: { label: 'Member', className: 'bg-[#DDD8EB] text-[#422268]' }
superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
};
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
if (loading) {
return (
<div className="text-center py-8">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading invitations...
</p>
</div>
@@ -120,12 +120,12 @@ const PendingInvitationsTable = () => {
if (invitations.length === 0) {
return (
<Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
<Mail className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
<Mail className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
No Pending Invitations
</h3>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
All invitations have been accepted or expired
</p>
</Card>
@@ -134,37 +134,37 @@ const PendingInvitationsTable = () => {
return (
<>
<Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
<Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
<Table>
<TableHeader>
<TableRow className="bg-[#DDD8EB] hover:bg-[#DDD8EB]">
<TableHead className="text-[#422268] font-semibold">Email</TableHead>
<TableHead className="text-[#422268] font-semibold">Name</TableHead>
<TableHead className="text-[#422268] font-semibold">Role</TableHead>
<TableHead className="text-[#422268] font-semibold">Invited</TableHead>
<TableHead className="text-[#422268] font-semibold">Expires</TableHead>
<TableHead className="text-[#422268] font-semibold text-right">Actions</TableHead>
<TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
<TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Name</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Role</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Invited</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold">Expires</TableHead>
<TableHead className="text-var(--purple-ink) font-semibold text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invitations.map((invitation) => (
<TableRow key={invitation.id} className="hover:bg-[#F9F8FB]">
<TableCell className="font-medium text-[#422268]">
<TableRow key={invitation.id} className="hover:bg-var(--lavender-700)">
<TableCell className="font-medium text-var(--purple-ink)">
{invitation.email}
</TableCell>
<TableCell className="text-[#664fa3]">
<TableCell className="text-var(--purple-lavender)">
{invitation.first_name && invitation.last_name
? `${invitation.first_name} ${invitation.last_name}`
: '-'}
</TableCell>
<TableCell>{getRoleBadge(invitation.role)}</TableCell>
<TableCell className="text-[#664fa3]">
<TableCell className="text-var(--purple-lavender)">
{new Date(invitation.invited_at).toLocaleDateString()}
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[#664fa3]'}`} />
<span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[#664fa3]'}`}>
<Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-var(--purple-lavender)'}`} />
<span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-var(--purple-lavender)'}`}>
{formatDate(invitation.expires_at)}
</span>
</div>
@@ -176,7 +176,7 @@ const PendingInvitationsTable = () => {
size="sm"
onClick={() => handleResend(invitation.id)}
disabled={resending === invitation.id}
className="rounded-xl border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
className="rounded-xl border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
>
{resending === invitation.id ? (
'Resending...'
@@ -208,10 +208,10 @@ const PendingInvitationsTable = () => {
<AlertDialog open={revokeDialog.open} onOpenChange={(open) => setRevokeDialog({ open, invitation: null })}>
<AlertDialogContent className="rounded-2xl">
<AlertDialogHeader>
<AlertDialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Revoke Invitation
</AlertDialogTitle>
<AlertDialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Are you sure you want to revoke the invitation for{' '}
<span className="font-semibold">{revokeDialog.invitation?.email}</span>?
This action cannot be undone.

34
src/components/PlanDialog.js
View File

@@ -118,7 +118,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
// Validate custom cycle dates if enabled
if (formData.custom_cycle_enabled) {
if (!formData.custom_cycle_start_month || !formData.custom_cycle_start_day ||
!formData.custom_cycle_end_month || !formData.custom_cycle_end_day) {
!formData.custom_cycle_end_month || !formData.custom_cycle_end_day) {
toast.error('All custom cycle dates must be provided');
setLoading(false);
return;
@@ -161,10 +161,10 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{plan ? 'Edit Plan' : 'Create New Plan'}
</DialogTitle>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
</DialogDescription>
</DialogHeader>
@@ -197,8 +197,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
</div>
{/* Dynamic Pricing */}
<div className="border-2 border-[#DDD8EB] rounded-lg p-4 space-y-4">
<h3 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
<h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Dynamic Pricing
</h3>
@@ -216,7 +216,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
required
className="mt-2"
/>
<p className="text-xs text-[#664fa3] mt-1">Minimum $30</p>
<p className="text-xs text-var(--purple-lavender) mt-1">Minimum $30</p>
</div>
<div>
@@ -232,7 +232,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
required
className="mt-2"
/>
<p className="text-xs text-[#664fa3] mt-1">Pre-filled amount</p>
<p className="text-xs text-var(--purple-lavender) mt-1">Pre-filled amount</p>
</div>
</div>
@@ -240,7 +240,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
<div className="flex items-center justify-between pt-2">
<div>
<Label htmlFor="allow_donation">Allow Donations</Label>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Members can pay more than minimum
</p>
</div>
@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#664fa3]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
</label>
</div>
</div>
@@ -279,11 +279,11 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
{/* Custom Billing Cycle Dates */}
{formData.billing_cycle === 'custom' && (
<div className="border-2 border-[#DDD8EB] rounded-lg p-4 space-y-4">
<h3 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
<h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Custom Billing Period
</h3>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Set recurring date range (e.g., Jan 1 - Dec 31 for calendar year)
</p>
@@ -349,8 +349,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
</div>
</div>
<div className="bg-[#f9f5ff] border border-[#DDD8EB] rounded p-3">
<p className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded p-3">
<p className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>Example:</strong> Jan 1 - Dec 31 for calendar year, or Jul 1 - Jun 30 for fiscal year
</p>
</div>
@@ -361,7 +361,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
<div className="flex items-center justify-between">
<div>
<Label htmlFor="active">Active Status</Label>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Inactive plans won't appear for new subscriptions
</p>
</div>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#664fa3]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
</label>
</div>
@@ -389,7 +389,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
<Button
type="submit"
disabled={loading}
className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
>
{loading ? (
<>

28
src/components/PublicFooter.js
View File

@@ -8,7 +8,7 @@ const PublicFooter = () => {
return (
<>
{/* Main Footer */}
<footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2 lg:px-10 flex items-center justify-between">
<footer className="bg-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] py-8 px-2 lg:px-10 flex items-center justify-between">
<div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
<div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
@@ -19,28 +19,28 @@ const PublicFooter = () => {
<div className="pb-2 lg:pb-4">
<p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
</div>
<Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
<Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
<Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
<Link to="/about/history" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
<Link to="/about/mission-values" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
<Link to="/about/board" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
</div>
<div className="hidden md:flex flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[148px]">
<div className="pb-2 lg:pb-4">
<p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
</div>
<Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
<Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
<Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
<Link to="/become-a-member" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
<Link to="/contact-us" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
<Link to="/resources" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
</div>
<div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
<div className="pb-4 w-full flex justify-center lg:justify-start">
<Link to="/donate" className="block">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
<Button className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
Donate
</Button>
</Link>
</div>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--neutral-800) text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation
</p>
</div>
@@ -49,20 +49,20 @@ const PublicFooter = () => {
</footer>
{/* Bottom Footer */}
<footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
<footer className="bg-gradient-to-r from-var(--purple-deep) to-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
<nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
<Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Link to="/terms-of-service" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Terms of Service
</Link>
<Link to="/privacy-policy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Link to="/privacy-policy" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Privacy Policy
</Link>
</nav>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
© 2025 LOAF. All Rights Reserved.
</p>
<p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Designed and Managed by{' '}
<a href="https://konceptkit.com/" className=" text-white transition-colors whitespace-nowrap">
Koncept Kit

44
src/components/PublicNavbar.js
View File

@@ -46,7 +46,7 @@ const PublicNavbar = () => {
const getDesktopLinkClasses = (path) => {
const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
if (isActive(path)) {
return `${baseClasses} text-[#ff9e77] hover:text-[#ff8c64] `;
return `${baseClasses} text-var(--orange-light) hover:text-var(--orange-coral) `;
}
return `${baseClasses} text-white hover:opacity-80`;
};
@@ -55,18 +55,18 @@ const PublicNavbar = () => {
const getMobileLinkClasses = (path) => {
const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
}
return `${baseClasses} text-white hover:bg-[#48286e]`;
return `${baseClasses} text-white hover:bg-var(--purple-deep)`;
};
// Active and inactive link styles for mobile sub-items (About Us)
const getMobileSubLinkClasses = (path) => {
const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
if (isActive(path)) {
return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
}
return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
return `${baseClasses} text-var(--neutral-800) hover:bg-var(--purple-deep) hover:text-white`;
};
return (
@@ -74,7 +74,7 @@ const PublicNavbar = () => {
{/* Top Header - Auth Actions */}
<div className='sticky top-0 inset-x-0 z-50'>
<header className="bg-gradient-to-r flex-wrap from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<header className="bg-gradient-to-r flex-wrap from-var(--purple-amethyst) to-var(--purple-deep) px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<div className='flex gap-4 sm:gap-6'>
<button
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
</div>
<Link to="/donate">
<Button
className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
style={{ fontFamily: "'Montserrat', sans-serif" }}
>
Donate
@@ -105,7 +105,7 @@ const PublicNavbar = () => {
</header>
{/* Main Header - Navigation */}
<header className=" bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<header className=" bg-var(--purple-lavender) px-[20px] py-2 flex justify-between items-center">
<Link to="/">
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link>
@@ -113,7 +113,7 @@ const PublicNavbar = () => {
{/* Mobile Menu Button */}
<button
onClick={() => setIsMobileMenuOpen(true)}
className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
className="lg:hidden p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
aria-label="Open menu"
>
<Menu className="size-14" />
@@ -132,28 +132,28 @@ const PublicNavbar = () => {
<DropdownMenuTrigger asChild>
<button
className={`${isAboutActive()
? "text-[#ff9e77] hover:text-[#ff8c64]"
? "text-var(--orange-light) hover:text-var(--orange-coral)"
: "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
About Us
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-white min-w-[220px]">
<DropdownMenuContent align="start" className="bg-background min-w-[220px]">
<DropdownMenuItem asChild>
<Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
History
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Mission and Values
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
<Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Board of Directors
</Link>
@@ -204,15 +204,15 @@ const PublicNavbar = () => {
/>
{/* Drawer */}
<div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
<div className="fixed right-0 top-0 h-full w-[280px] bg-var(--purple-lavender) shadow-xl overflow-y-auto">
{/* Header */}
<div className="flex justify-between items-center p-6 border-b border-[#48286e]">
<div className="flex justify-between items-center p-6 border-b border-var(--purple-deep)">
<span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Menu
</span>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
className="p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
aria-label="Close menu"
>
<X className="h-5 w-5" />
@@ -233,7 +233,7 @@ const PublicNavbar = () => {
{/* About Us Section */}
<div className="space-y-2">
<p
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[#ff9e77]' : 'text-white'}`}
className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-var(--orange-light)' : 'text-white'}`}
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
About Us
@@ -303,13 +303,13 @@ const PublicNavbar = () => {
</Link>
{/* Auth Actions */}
<div className="pt-4 border-t border-[#48286e] space-y-2">
<div className="pt-4 border-t border-var(--purple-deep) space-y-2">
<button
onClick={() => {
handleAuthAction();
setIsMobileMenuOpen(false);
}}
className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
className="w-full text-left text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{user ? 'Logout' : 'Login'}
@@ -318,7 +318,7 @@ const PublicNavbar = () => {
<Link
to="/register"
onClick={() => setIsMobileMenuOpen(false)}
className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
className="block text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Register
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full"
>
<Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
<Button className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-6 py-3 text-base font-semibold">
Donate
</Button>
</Link>

20
src/components/RejectionDialog.js
View File

@@ -31,33 +31,33 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[#ddd8eb]">
<DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-var(--neutral-800)">
<DialogHeader>
<div className="flex items-center gap-3 mb-2">
<div className="p-3 bg-red-100 rounded-full">
<AlertTriangle className="h-6 w-6 text-red-600" />
</div>
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Reject Application
</DialogTitle>
</div>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="bg-[#f9f5ff] border border-[#ddd8eb] rounded-lg p-4">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded-lg p-4">
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>Applicant:</strong> {user?.email}
</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>Status:</strong> {user?.status}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="reason" className="text-[#422268] font-medium">
<Label htmlFor="reason" className="text-var(--purple-ink) font-medium">
Rejection Reason <span className="text-red-500">*</span>
</Label>
<Textarea
@@ -68,13 +68,13 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
setError('');
}}
placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
className="rounded-xl border-2 border-[#ddd8eb] focus:border-red-500 min-h-[120px]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-red-500 min-h-[120px]"
disabled={loading}
/>
{error && (
<p className="text-sm text-red-500">{error}</p>
)}
<p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The applicant will receive an email with this reason.
</p>
</div>
@@ -85,7 +85,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
type="button"
onClick={handleClose}
variant="outline"
className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6"
className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-6"
disabled={loading}
>
<X className="h-4 w-4 mr-2" />

84
src/components/WordPressImportWizard.js
View File

@@ -370,15 +370,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
const Step1Upload = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">Upload WordPress CSV Export</h3>
<p className="text-sm text-[#664fa3]">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Upload WordPress CSV Export</h3>
<p className="text-sm text-var(--purple-lavender)">
Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
</p>
</div>
<Card className="p-6 border-2 border-dashed border-[#ddd8eb] bg-[#f9f5ff]">
<Card className="p-6 border-2 border-dashed border-var(--neutral-800) bg-var(--lavender-400)">
<div className="flex flex-col items-center gap-4">
<Upload className="h-12 w-12 text-[#664fa3]" />
<Upload className="h-12 w-12 text-var(--purple-lavender)" />
<div className="text-center">
<Input
type="file"
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
className="max-w-xs"
/>
{uploadedFile && (
<p className="text-sm text-[#664fa3] mt-2">
<p className="text-sm text-var(--purple-lavender) mt-2">
Selected: {uploadedFile.name}
</p>
)}
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<Button
onClick={handleUpload}
disabled={uploading}
className="w-full bg-[#664fa3] hover:bg-[#422268]"
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
>
{uploading ? (
<>
@@ -465,8 +465,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
const Step2FieldMapping = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">Field Mapping</h3>
<p className="text-sm text-[#664fa3]">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Field Mapping</h3>
<p className="text-sm text-var(--purple-lavender)">
WordPress fields have been automatically mapped to LOAF platform fields.
</p>
</div>
@@ -537,20 +537,20 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
const Step3ReviewStatus = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">Review & Adjust User Status</h3>
<p className="text-sm text-[#664fa3]">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Review & Adjust User Status</h3>
<p className="text-sm text-var(--purple-lavender)">
Review suggested status mappings and override as needed before import.
</p>
</div>
{/* Bulk edit toolbar */}
<Card className="p-4 bg-[#f9f5ff] border-[#ddd8eb]">
<Card className="p-4 bg-var(--lavender-400) border-var(--neutral-800)">
<div className="flex items-center gap-4">
<Checkbox
checked={selectedRows.size === previewData.length && previewData.length > 0}
onCheckedChange={toggleSelectAll}
/>
<span className="text-sm text-[#664fa3] font-medium">
<span className="text-sm text-var(--purple-lavender) font-medium">
{selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
</span>
{selectedRows.size > 0 && (
@@ -572,13 +572,13 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
{/* Data table */}
{loading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-[#664fa3]" />
<Loader2 className="h-8 w-8 animate-spin text-var(--purple-lavender)" />
</div>
) : (
<div className="border rounded-lg overflow-hidden">
<Table>
<TableHeader>
<TableRow className="bg-[#f9f5ff]">
<TableRow className="bg-var(--lavender-400)">
<TableHead className="w-12">
<Checkbox checked={false} />
</TableHead>
@@ -606,7 +606,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
{row.first_name} {row.last_name}
</TableCell>
<TableCell>
<Badge className="bg-[#ddd8eb] text-[#422268]">
<Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
{row.wordpress_roles?.join(', ') || 'N/A'}
</Badge>
</TableCell>
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-between">
<p className="text-sm text-[#664fa3]">
<p className="text-sm text-var(--purple-lavender)">
Page {currentPage} of {totalPages}
</p>
<div className="flex gap-2">
@@ -689,41 +689,41 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
return (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">Import Preview</h3>
<p className="text-sm text-[#664fa3]">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Preview</h3>
<p className="text-sm text-var(--purple-lavender)">
Review the final import settings before execution.
</p>
</div>
<div className="grid md:grid-cols-3 gap-4">
<Card className="p-6">
<p className="text-sm text-[#664fa3]">Total Users</p>
<p className="text-3xl font-semibold text-[#422268]">{analysisResult?.total_rows}</p>
<p className="text-sm text-var(--purple-lavender)">Total Users</p>
<p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.total_rows}</p>
</Card>
<Card className="p-6">
<p className="text-sm text-[#664fa3]">Status Overrides</p>
<p className="text-3xl font-semibold text-[#422268]">{overrideCount}</p>
<p className="text-sm text-var(--purple-lavender)">Status Overrides</p>
<p className="text-3xl font-semibold text-var(--purple-ink)">{overrideCount}</p>
</Card>
<Card className="p-6">
<p className="text-sm text-[#664fa3]">Expected Imports</p>
<p className="text-3xl font-semibold text-[#422268]">{analysisResult?.valid_rows}</p>
<p className="text-sm text-var(--purple-lavender)">Expected Imports</p>
<p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.valid_rows}</p>
</Card>
</div>
<Card className="p-6">
<h4 className="font-semibold text-[#422268] mb-4">Import Options</h4>
<h4 className="font-semibold text-var(--purple-ink) mb-4">Import Options</h4>
<div className="space-y-3">
<div className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-green-600" />
<span className="text-sm text-[#664fa3]">Send password reset emails to all imported users</span>
<span className="text-sm text-var(--purple-lavender)">Send password reset emails to all imported users</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-green-600" />
<span className="text-sm text-[#664fa3]">Skip rows with errors and continue import</span>
<span className="text-sm text-var(--purple-lavender)">Skip rows with errors and continue import</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-green-600" />
<span className="text-sm text-[#664fa3]">Full rollback capability available after import</span>
<span className="text-sm text-var(--purple-lavender)">Full rollback capability available after import</span>
</div>
</div>
</Card>
@@ -748,10 +748,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
const Step5Execute = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
{importing ? 'Import in Progress...' : 'Ready to Import'}
</h3>
<p className="text-sm text-[#664fa3]">
<p className="text-sm text-var(--purple-lavender)">
{importing
? 'Please wait while users are imported. This may take a few minutes.'
: 'Click "Start Import" to begin importing users.'}
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
{importing && (
<div className="space-y-4">
<Progress value={importProgress} className="w-full" />
<p className="text-center text-sm text-[#664fa3]">
<p className="text-center text-sm text-var(--purple-lavender)">
{importProgress.toFixed(1)}% complete
</p>
</div>
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
{!importing && !importResults && (
<Button
onClick={handleExecuteImport}
className="w-full bg-[#664fa3] hover:bg-[#422268] py-6 text-lg"
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink) py-6 text-lg"
>
<Play className="mr-2 h-5 w-5" />
Start Import
@@ -786,8 +786,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
const Step6Results = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-2">Import Complete</h3>
<p className="text-sm text-[#664fa3]">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Complete</h3>
<p className="text-sm text-var(--purple-lavender)">
Review the import results and download error reports if needed.
</p>
</div>
@@ -850,11 +850,11 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<div className="p-3 bg-red-100 rounded-full">
<AlertTriangle className="h-6 w-6 text-red-600" />
</div>
<DialogTitle className="text-2xl font-semibold text-[#422268]">
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
Confirm Rollback
</DialogTitle>
</div>
<DialogDescription className="text-[#664fa3]">
<DialogDescription className="text-var(--purple-lavender)">
This will permanently delete{' '}
<strong>{importResults?.successful_rows} users</strong> that were imported.
This action cannot be undone.
@@ -898,10 +898,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl font-semibold text-[#422268]">
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
WordPress Import Wizard
</DialogTitle>
<DialogDescription className="text-[#664fa3]">
<DialogDescription className="text-var(--purple-lavender)">
Import WordPress users with interactive status review and full rollback capability
</DialogDescription>
</DialogHeader>
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<div
className={`
w-10 h-10 rounded-full flex items-center justify-center
${isCurrent ? 'bg-[#664fa3] text-white' : ''}
${isCurrent ? 'bg-var(--purple-lavender) text-white' : ''}
${isCompleted ? 'bg-green-600 text-white' : ''}
${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
`}
@@ -930,7 +930,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<StepIcon className="h-5 w-5" />
)}
</div>
<p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-[#422268]' : 'text-gray-600'}`}>
<p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-var(--purple-ink)' : 'text-gray-600'}`}>
{step.title}
</p>
</div>
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
<Button
onClick={handleNext}
disabled={!canProceed()}
className="bg-[#664fa3] hover:bg-[#422268]"
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
>
Next
<ChevronRight className="h-4 w-4 ml-2" />
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
onOpenChange(false);
if (onSuccess) onSuccess();
}}
className="bg-[#664fa3] hover:bg-[#422268]"
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
>
Close
</Button>

26
src/components/registration/RegistrationStep1.js
View File

@@ -26,7 +26,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
<div className="space-y-8">
{/* Personal Information */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Personal Information
</h2>
@@ -40,7 +40,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="first-name-input"
/>
</div>
@@ -52,7 +52,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="last-name-input"
/>
</div>
@@ -69,7 +69,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="phone-input"
/>
</div>
@@ -82,7 +82,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.date_of_birth}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="dob-input"
/>
</div>
@@ -97,7 +97,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-var(--neutral-300:) focus:border-var(--orange-soft)"
data-testid="address-input"
/>
</div>
@@ -112,7 +112,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.city}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="city-input"
/>
</div>
@@ -124,7 +124,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.state}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="state-input"
/>
</div>
@@ -136,7 +136,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
required
value={formData.zipcode}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="zipcode-input"
/>
</div>
@@ -145,7 +145,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
{/* How Did You Hear About Us */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
How Did You Hear About Us? *
</h2>
<div className="space-y-3">
@@ -167,7 +167,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
{/* Partner Information */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Partner Information (Optional)
</h2>
@@ -179,7 +179,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
name="partner_first_name"
value={formData.partner_first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="partner-first-name-input"
/>
</div>
@@ -190,7 +190,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
name="partner_last_name"
value={formData.partner_last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="partner-last-name-input"
/>
</div>

18
src/components/registration/RegistrationStep2.js
View File

@@ -33,10 +33,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
<div className="space-y-8">
{/* Newsletter Publication Preferences */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Newsletter Publication Preferences *
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Please check what information may be published in LOAF Newsletter
</p>
@@ -97,7 +97,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
{/* Referral */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Referral
</h2>
<div>
@@ -110,10 +110,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
value={formData.referred_by_member_name}
onChange={handleInputChange}
placeholder="Enter member name or email"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="referral-input"
/>
<p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If referred by a current member, you may skip the event attendance requirement.
</p>
</div>
@@ -121,10 +121,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
{/* Volunteer Interests */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Volunteer Interests (Optional)
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
</p>
@@ -158,7 +158,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
I am requesting for scholarship
</Label>
</div>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Scholarship information is kept confidential
</p>
@@ -174,7 +174,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
onChange={handleInputChange}
placeholder="Tell us why you're requesting a scholarship..."
rows={4}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
)}

40
src/components/registration/RegistrationStep3.js
View File

@@ -23,11 +23,11 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
return (
<div className="space-y-6">
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Members Directory
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Would you like to be displayed on our private members directory? (optional and you can change the answer later)
</p>
@@ -37,8 +37,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${formData.show_in_directory
? 'border-[#ff9e77] bg-[#ff9e77]/5'
: 'border-[#ddd8eb] hover:border-[#664fa3]'
? 'border-var(--orange-light) bg-var(--orange-light)/5'
: 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -46,13 +46,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
${formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
`}>
{formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
<div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
)}
</div>
<span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Yes, include me in the Members Directory
</span>
</div>
@@ -62,8 +62,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${!formData.show_in_directory
? 'border-[#ff9e77] bg-[#ff9e77]/5'
: 'border-[#ddd8eb] hover:border-[#664fa3]'
? 'border-var(--orange-light) bg-var(--orange-light)/5'
: 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -71,13 +71,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${!formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
${!formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
`}>
{!formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
<div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
)}
</div>
<span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
No, don't include me in the Members Directory
</span>
</div>
@@ -87,8 +87,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
{/* Conditional Directory Fields */}
{formData.show_in_directory && (
<div className="space-y-4 mt-6 p-6 bg-white rounded-xl border border-[#ddd8eb]">
<p className="text-[#664fa3] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-var(--neutral-800)">
<p className="text-var(--purple-lavender) text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Below, choose what information you would like include in the Members Only Directory.
(If you ever want to update this information, remember the Directory Section and Account Section are separate)
</p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="email"
value={formData.directory_email}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
onChange={handleInputChange}
placeholder="Tell other members about yourself..."
rows={4}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
name="directory_address"
value={formData.directory_address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="tel"
value={formData.directory_phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="date"
value={formData.directory_dob}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
name="directory_partner_name"
value={formData.directory_partner_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
</div>

20
src/components/registration/RegistrationStep4.js
View File

@@ -7,11 +7,11 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
return (
<div className="space-y-6">
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Account Credentials
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your email is also your username that you can use to login.
Please note you can only login after your application is validated.
</p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.email}
onChange={handleInputChange}
placeholder="your.email@example.com"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="email-input"
/>
</div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.password}
onChange={handleInputChange}
placeholder="At least 6 characters"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="password-input"
/>
<p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Must be at least 6 characters long
</p>
</div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Re-enter your password"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="confirm-password-input"
/>
{formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -71,7 +71,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
</div>
{/* Terms of Service Acceptance */}
<div className="p-4 bg-[#F8F7FB] rounded-lg border border-[#ddd8eb]">
<div className="p-4 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
<div className="flex items-start gap-3">
<input
type="checkbox"
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
name="accepts_tos"
checked={formData.accepts_tos || false}
onChange={handleInputChange}
className="mt-1 w-4 h-4 text-[#664fa3] border-gray-300 rounded focus:ring-[#664fa3]"
className="mt-1 w-4 h-4 text-var(--purple-lavender) border-gray-300 rounded focus:ring-var(--purple-lavender)"
required
data-testid="tos-checkbox"
/>
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
href="/become-a-member/terms-of-service"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
>
Terms of Service
</a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
href="become-a-member/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
>
Privacy Policy
</a>

16
src/components/registration/RegistrationStepIndicator.js
View File

@@ -20,17 +20,17 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
transition-all duration-300
${currentStep === step.number
? 'bg-[#ff9e77] text-white scale-110 shadow-lg'
? 'bg-var(--orange-light) text-white scale-110 shadow-lg'
: currentStep > step.number
? 'bg-[#81B29A] text-white'
: 'bg-[#ddd8eb] text-[#664fa3]'
? 'bg-var(--green-light) text-white'
: 'bg-var(--neutral-800) text-var(--purple-lavender)'
}
`}>
{currentStep > step.number ? '✓' : step.number}
</div>
<span className={`
text-sm mt-2 font-medium transition-colors
${currentStep === step.number ? 'text-[#ff9e77]' : 'text-[#664fa3]'}
${currentStep === step.number ? 'text-var(--orange-light)' : 'text-var(--purple-lavender)'}
`} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{step.title}
</span>
@@ -38,11 +38,11 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
{/* Connecting Line */}
{index < steps.length - 1 && (
<div className="flex-1 h-1 mx-2 relative -top-6 bg-[#ddd8eb]">
<div className="flex-1 h-1 mx-2 relative -top-6 bg-var(--neutral-800)">
<div
className={`
h-full transition-all duration-500
${currentStep > step.number ? 'bg-[#81B29A] w-full' : 'bg-transparent w-0'}
${currentStep > step.number ? 'bg-var(--green-light) w-full' : 'bg-transparent w-0'}
`}
/>
</div>
@@ -52,8 +52,8 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
</div>
{/* Step Counter */}
<p className="text-center text-[#664fa3] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Step <span className="font-semibold text-[#ff9e77]">{currentStep}</span> of {totalSteps}
<p className="text-center text-var(--purple-lavender) mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Step <span className="font-semibold text-var(--orange-light)">{currentStep}</span> of {totalSteps}
</p>
</div>
);

18
src/components/ui/password-input.jsx
View File

@@ -1,9 +1,9 @@
import * as React from "react"
import { Eye, EyeOff } from "lucide-react"
import { cn } from "@/lib/utils"
import * as React from "react";
import { Eye, EyeOff } from "lucide-react";
import { cn } from "@/lib/utils";
const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false)
const [showPassword, setShowPassword] = React.useState(false);
return (
<div className="relative">
@@ -19,7 +19,7 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-[#6B708D] hover:text-[#3D405B] transition-colors focus:outline-none"
className="absolute right-3 top-1/2 -translate-y-1/2 text-var(--slate-muted) hover:text-var(--slate-dark) transition-colors focus:outline-none"
tabIndex={-1}
>
{showPassword ? (
@@ -29,8 +29,8 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
)}
</button>
</div>
)
})
PasswordInput.displayName = "PasswordInput"
);
});
PasswordInput.displayName = "PasswordInput";
export { PasswordInput }
export { PasswordInput };

2
src/components/ui/tabs.jsx
View File

@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap hover:bg-[#f1eef9] border-2 border-[#664fa3] rounded-2xl px-3 py-1 text-[#664fa3] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
"inline-flex items-center justify-center whitespace-nowrap hover:bg-var(--lavender-300) border-2 border-var(--purple-lavender) rounded-2xl px-3 py-1 text-var(--purple-lavender) text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
className
)}
{...props}