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

Refactor color scheme in member-related pages to use brand colors instead of CSS variables for consistency and improved readability

Browse Source
This commit is contained in:
kayela
2026-01-13 22:01:33 -06:00
parent 30d32d8823
commit e04d39fe17
61 changed files with 731 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/Profile.js
View File

@@ -213,17 +213,17 @@ const Profile = () => {
if (!profileData) {
return (
<div className="min-h-screen bg-background">
<div className="min-h-screen bg-white">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
<p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-background">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
@@ -231,33 +231,33 @@ const Profile = () => {
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
My Profile
</h1>
<p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your personal information below.
</p>
</div>
<Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
<Card className="p-8 bg-white rounded-2xl border border-[var(--neutral-800)] shadow-lg">
{/* Read-only Information */}
<div className="mb-8 pb-8 border-b border-[var(--neutral-800)]">
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<User className="h-6 w-6 text-[var(--purple-lavender)]" />
<User className="h-6 w-6 text-brand-purple " />
Account Information
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
<div>
<p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
</div>
<div>
<p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
<p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
<p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
</div>
<div>
<p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
<p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
<p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
</div>
<div>
<p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
<p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
<p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(profileData.date_of_birth).toLocaleDateString()}
</p>
@@ -269,7 +269,7 @@ const Profile = () => {
type="button"
onClick={() => setPasswordDialogOpen(true)}
variant="outline"
className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
>
<Lock className="h-4 w-4 mr-2" />
Change Password
@@ -280,13 +280,13 @@ const Profile = () => {
{/* Profile Photo Section */}
<div className="pb-8 mb-8 border-b border-[var(--neutral-800)]">
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Camera className="h-6 w-6 text-[var(--purple-lavender)]" />
<Camera className="h-6 w-6 text-brand-purple " />
Profile Photo
</h2>
<div className="flex flex-col md:flex-row items-center gap-6">
<Avatar className="h-32 w-32 border-4 border-[var(--neutral-800)]">
<AvatarImage src={previewImage} alt="Profile" />
<AvatarFallback className="bg-[var(--lavender-300)] text-[var(--purple-lavender)] text-3xl">
<AvatarFallback className="bg-[var(--lavender-300)] text-brand-purple text-3xl">
{profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
</AvatarFallback>
</Avatar>
@@ -304,7 +304,7 @@ const Profile = () => {
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploadingPhoto}
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
>
<Upload className="h-4 w-4 mr-2" />
{uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -323,7 +323,7 @@ const Profile = () => {
</Button>
)}
<p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Upload a profile photo (Max {maxFileSizeMB}MB)
</p>
</div>
@@ -344,7 +344,7 @@ const Profile = () => {
name="first_name"
value={formData.first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="first-name-input"
/>
</div>
@@ -355,7 +355,7 @@ const Profile = () => {
name="last_name"
value={formData.last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="last-name-input"
/>
</div>
@@ -369,7 +369,7 @@ const Profile = () => {
type="tel"
value={formData.phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="phone-input"
/>
</div>
@@ -381,7 +381,7 @@ const Profile = () => {
name="address"
value={formData.address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="address-input"
/>
</div>
@@ -394,7 +394,7 @@ const Profile = () => {
name="city"
value={formData.city}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="city-input"
/>
</div>
@@ -405,7 +405,7 @@ const Profile = () => {
name="state"
value={formData.state}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="state-input"
/>
</div>
@@ -416,7 +416,7 @@ const Profile = () => {
name="zipcode"
value={formData.zipcode}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
data-testid="zipcode-input"
/>
</div>
@@ -437,7 +437,7 @@ const Profile = () => {
name="partner_first_name"
value={formData.partner_first_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional"
/>
</div>
@@ -448,7 +448,7 @@ const Profile = () => {
name="partner_last_name"
value={formData.partner_last_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional"
/>
</div>
@@ -460,10 +460,11 @@ const Profile = () => {
id="partner_is_member"
name="partner_is_member"
checked={formData.partner_is_member}
accent-color="var(--brand-white)"
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox "
/>
<Label htmlFor="partner_is_member" className="cursor-pointer text-[var(--purple-ink)]">
<Label htmlFor="partner_is_member" className="cursor-pointer text-[var(--purple-ink)] ">
My partner is a current member
</Label>
</div>
@@ -474,7 +475,7 @@ const Profile = () => {
name="partner_plan_to_become_member"
checked={formData.partner_plan_to_become_member}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox "
/>
<Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-[var(--purple-ink)]">
My partner plans to become a member
@@ -490,7 +491,7 @@ const Profile = () => {
<Mail className="h-6 w-6 text-[var(--green-light)]" />
Newsletter Preferences
</h2>
<p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Choose what information you'd like published in our member newsletter.
</p>
<div className="space-y-3">
@@ -501,7 +502,7 @@ const Profile = () => {
name="newsletter_publish_name"
checked={formData.newsletter_publish_name}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox "
/>
<Label htmlFor="newsletter_publish_name" className="cursor-pointer text-[var(--purple-ink)]">
Publish my name
@@ -514,7 +515,7 @@ const Profile = () => {
name="newsletter_publish_photo"
checked={formData.newsletter_publish_photo}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox"
/>
<Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-[var(--purple-ink)]">
Publish my photo
@@ -527,7 +528,7 @@ const Profile = () => {
name="newsletter_publish_birthday"
checked={formData.newsletter_publish_birthday}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox"
/>
<Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-[var(--purple-ink)]">
Publish my birthday
@@ -540,7 +541,7 @@ const Profile = () => {
name="newsletter_publish_none"
checked={formData.newsletter_publish_none}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox"
/>
<Label htmlFor="newsletter_publish_none" className="cursor-pointer text-[var(--purple-ink)]">
Do not publish any information
@@ -552,10 +553,10 @@ const Profile = () => {
{/* Section 4: Volunteer Interests */}
<div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Users className="h-6 w-6 text-[var(--purple-lavender)]" />
<Users className="h-6 w-6 text-brand-purple " />
Volunteer Interests
</h2>
<p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Select areas where you'd like to volunteer and help our community.
</p>
<div className="grid md:grid-cols-2 gap-3">
@@ -566,7 +567,7 @@ const Profile = () => {
id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
checked={formData.volunteer_interests.includes(option)}
onChange={() => handleVolunteerToggle(option)}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox "
/>
<Label
htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
@@ -585,7 +586,7 @@ const Profile = () => {
<BookUser className="h-6 w-6 text-[var(--orange-light)]" />
Member Directory Settings
</h2>
<p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-brand-purple mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Control your visibility and information in the member directory.
</p>
@@ -597,7 +598,7 @@ const Profile = () => {
name="show_in_directory"
checked={formData.show_in_directory}
onChange={handleCheckboxChange}
className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
className="ui-checkbox"
/>
<Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
Include me in the member directory
@@ -614,7 +615,7 @@ const Profile = () => {
type="email"
value={formData.directory_email}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional - email to show in directory"
/>
</div>
@@ -626,7 +627,7 @@ const Profile = () => {
name="directory_bio"
value={formData.directory_bio}
onChange={handleInputChange}
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
placeholder="Tell other members about yourself..."
/>
</div>
@@ -638,7 +639,7 @@ const Profile = () => {
name="directory_address"
value={formData.directory_address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional - address to show in directory"
/>
</div>
@@ -651,7 +652,7 @@ const Profile = () => {
type="tel"
value={formData.directory_phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional - phone to show in directory"
/>
</div>
@@ -664,7 +665,7 @@ const Profile = () => {
type="date"
value={formData.directory_dob}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
/>
</div>
@@ -675,7 +676,7 @@ const Profile = () => {
name="directory_partner_name"
value={formData.directory_partner_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
placeholder="Optional - partner name to show in directory"
/>
</div>
@@ -688,7 +689,7 @@ const Profile = () => {
<Button
type="submit"
disabled={loading}
className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
className="bg-brand-purple text-white hover:bg-brand-dark-lavender rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
data-testid="save-profile-button"
>
<Save className="h-5 w-5 mr-2" />