From e04d39fe17e621ccc766bb192cb7ae77709ee2be Mon Sep 17 00:00:00 2001 From: kayela Date: Tue, 13 Jan 2026 22:01:33 -0600 Subject: [PATCH] Refactor color scheme in member-related pages to use brand colors instead of CSS variables for consistency and improved readability --- src/components/AddToCalendarButton.js | 6 +- src/components/AdminSidebar.js | 2 +- src/components/AttendanceDialog.js | 8 +- src/components/ChangePasswordDialog.js | 8 +- src/components/ConfirmationDialog.js | 8 +- src/components/CreateMemberDialog.js | 24 ++--- src/components/CreateStaffDialog.js | 12 +-- src/components/ImportMembersDialog.js | 18 ++-- src/components/InviteStaffDialog.js | 12 +-- src/components/MemberFooter.js | 12 +-- src/components/PaymentActivationDialog.js | 22 ++--- src/components/PendingInvitationsTable.js | 16 ++-- src/components/PlanDialog.js | 16 ++-- src/components/PublicNavbar.js | 4 +- src/components/RejectionDialog.js | 10 +-- src/components/WordPressImportWizard.js | 50 +++++------ .../registration/RegistrationStep1.js | 18 ++-- .../registration/RegistrationStep2.js | 12 +-- .../registration/RegistrationStep3.js | 20 ++--- .../registration/RegistrationStep4.js | 16 ++-- .../registration/RegistrationStepIndicator.js | 6 +- src/components/ui/button.jsx | 57 ++++++------ src/components/ui/tabs.jsx | 2 +- src/pages/AcceptInvitation.js | 52 +++++------ src/pages/ChangePasswordRequired.js | 16 ++-- src/pages/Dashboard.js | 70 +++++++-------- src/pages/DonationSuccess.js | 14 +-- src/pages/EventDetails.js | 20 ++--- src/pages/Events.js | 16 ++-- src/pages/ForgotPassword.js | 14 +-- src/pages/Login.js | 10 +-- src/pages/NotFound.js | 12 +-- src/pages/PaymentCancel.js | 20 ++--- src/pages/PaymentSuccess.js | 20 ++--- src/pages/Plans.js | 40 ++++----- src/pages/Profile.js | 89 ++++++++++--------- src/pages/Register.js | 8 +- src/pages/ResetPassword.js | 16 ++-- src/pages/VerifyEmail.js | 10 +-- src/pages/admin/AdminBylaws.js | 36 ++++---- src/pages/admin/AdminDashboard.js | 2 +- src/pages/admin/AdminDonations.js | 42 ++++----- src/pages/admin/AdminEventAttendance.js | 48 +++++----- src/pages/admin/AdminEvents.js | 32 +++---- src/pages/admin/AdminFinancials.js | 26 +++--- src/pages/admin/AdminGallery.js | 26 +++--- src/pages/admin/AdminMembers.js | 32 +++---- src/pages/admin/AdminNewsletters.js | 26 +++--- src/pages/admin/AdminPermissions.js | 30 +++---- src/pages/admin/AdminPlans.js | 36 ++++---- src/pages/admin/AdminRoles.js | 2 +- src/pages/admin/AdminStaff.js | 28 +++--- src/pages/admin/AdminSubscriptions.js | 60 ++++++------- src/pages/admin/AdminUserView.js | 36 ++++---- src/pages/admin/AdminValidations.js | 24 ++--- src/pages/members/Bylaws.js | 24 ++--- src/pages/members/EventGallery.js | 24 ++--- src/pages/members/Financials.js | 16 ++-- src/pages/members/MemberCalendar.js | 26 +++--- src/pages/members/MembersDirectory.js | 82 ++++++++--------- src/pages/members/NewsletterArchive.js | 22 ++--- 61 files changed, 731 insertions(+), 735 deletions(-) diff --git a/src/components/AddToCalendarButton.js b/src/components/AddToCalendarButton.js index 65fc891..cd8b1b5 100644 --- a/src/components/AddToCalendarButton.js +++ b/src/components/AddToCalendarButton.js @@ -187,7 +187,7 @@ export default function AddToCalendarButton({ > Subscribe to My Events -
+
Auto-syncs your RSVP'd events
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({ > Download All Events -
+
One-time import of all upcoming events
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({ )} {!event && !showSubscribe && ( -
+
No event selected
)} diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js index ca075c3..34a9861 100644 --- a/src/components/AdminSidebar.js +++ b/src/components/AdminSidebar.js @@ -211,7 +211,7 @@ 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-[var(--purple-lavender)]' + ? 'opacity-50 cursor-not-allowed text-brand-purple ' : active ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]' : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20' diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js index 7853d6a..14afbc4 100644 --- a/src/components/AttendanceDialog.js +++ b/src/components/AttendanceDialog.js @@ -64,12 +64,12 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
{rsvps.length === 0 ? ( -

No RSVPs yet

+

No RSVPs yet

) : ( rsvps.map((rsvp) => (
{ />

{rsvp.user_name}

-

{rsvp.user_email}

+

{rsvp.user_email}

{rsvp.attended && ( @@ -103,7 +103,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => { diff --git a/src/components/ChangePasswordDialog.js b/src/components/ChangePasswordDialog.js index 331b772..a494af0 100644 --- a/src/components/ChangePasswordDialog.js +++ b/src/components/ChangePasswordDialog.js @@ -76,7 +76,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => { Change Password
- + Update your password to keep your account secure. @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " />
@@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " />
@@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " />
diff --git a/src/components/ConfirmationDialog.js b/src/components/ConfirmationDialog.js index 1b1ce5c..dc25cc6 100644 --- a/src/components/ConfirmationDialog.js +++ b/src/components/ConfirmationDialog.js @@ -48,8 +48,8 @@ const ConfirmationDialog = ({ }, info: { icon: Info, - iconColor: 'text-[var(--purple-lavender)]', - confirmButtonClass: 'bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-plum)] rounded-full px-6', + iconColor: 'text-brand-purple ', + confirmButtonClass: 'bg-brand-purple text-white hover:bg-[var(--purple-plum)] rounded-full px-6', }, success: { icon: CheckCircle, @@ -77,7 +77,7 @@ const ConfirmationDialog = ({ {title} {description} @@ -87,7 +87,7 @@ const ConfirmationDialog = ({ {cancelText} diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js index 39dd96a..2476245 100644 --- a/src/components/CreateMemberDialog.js +++ b/src/components/CreateMemberDialog.js @@ -125,7 +125,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { Create Member - + Create a new member account with direct login access. Member will be created immediately. @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="member@example.com" /> {errors.email && ( @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="Minimum 8 characters" /> {errors.password && ( @@ -179,7 +179,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="first_name" value={formData.first_name} onChange={(e) => handleChange('first_name', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="John" /> {errors.first_name && ( @@ -195,7 +195,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="last_name" value={formData.last_name} onChange={(e) => handleChange('last_name', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="Doe" /> {errors.last_name && ( @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="(555) 123-4567" /> {errors.phone && ( @@ -231,7 +231,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="address" value={formData.address} onChange={(e) => handleChange('address', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="123 Main St" />
@@ -244,7 +244,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="city" value={formData.city} onChange={(e) => handleChange('city', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="San Francisco" /> @@ -255,7 +255,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="state" value={formData.state} onChange={(e) => handleChange('state', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="CA" maxLength={2} /> @@ -267,7 +267,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { id="zipcode" value={formData.zipcode} onChange={(e) => handleChange('zipcode', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="94102" /> @@ -282,7 +282,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { type="date" value={formData.date_of_birth} onChange={(e) => handleChange('date_of_birth', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " /> @@ -293,7 +293,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => { type="date" value={formData.member_since} onChange={(e) => handleChange('member_since', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " /> diff --git a/src/components/CreateStaffDialog.js b/src/components/CreateStaffDialog.js index 7509e3d..5bbb606 100644 --- a/src/components/CreateStaffDialog.js +++ b/src/components/CreateStaffDialog.js @@ -105,7 +105,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => { Create Staff Member - + Create a new staff account with direct login access. User will be created immediately. @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="staff@example.com" /> {errors.email && ( @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="Minimum 8 characters" /> {errors.password && ( @@ -157,7 +157,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => { id="first_name" value={formData.first_name} onChange={(e) => handleChange('first_name', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="John" /> {errors.first_name && ( @@ -174,7 +174,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => { id="last_name" value={formData.last_name} onChange={(e) => handleChange('last_name', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="Doe" /> {errors.last_name && ( @@ -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-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="(555) 123-4567" /> {errors.phone && ( diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js index 7aa093d..f015e62 100644 --- a/src/components/ImportMembersDialog.js +++ b/src/components/ImportMembersDialog.js @@ -144,7 +144,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => { {importResult ? 'Import Results' : 'Import Members from CSV'} - + {importResult ? 'Review the import results below' : 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'} @@ -155,7 +155,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => { // Upload Form
{/* CSV Format Instructions */} - + Required columns: Email, First Name, Last Name, Phone, Role
@@ -168,8 +168,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => { {/* File Upload Area */}
{

{file.name}

-

+

{(file.size / 1024).toFixed(2)} KB

@@ -203,7 +203,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {

Drag and drop your CSV file here

-

or

+

or

@@ -209,7 +209,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => { id="last_name" value={formData.last_name} onChange={(e) => handleChange('last_name', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="Doe" /> @@ -224,7 +224,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => { type="tel" value={formData.phone} onChange={(e) => handleChange('phone', e.target.value)} - className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]" + className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple " placeholder="(555) 123-4567" /> diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js index 6139838..987b9fe 100644 --- a/src/components/MemberFooter.js +++ b/src/components/MemberFooter.js @@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu const MemberFooter = () => { return ( -