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

88
src/pages/members/MemberProfile.js
View File

@@ -191,11 +191,11 @@ const MemberProfile = () => {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<div className="text-center py-20">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
</div>
</div>
</div>
@@ -203,24 +203,24 @@ const MemberProfile = () => {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Member Profile
</h1>
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Enhance your profile with a photo and social media links.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-8">
{/* Profile Photo Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Profile Photo
</h2>
@@ -231,7 +231,7 @@ const MemberProfile = () => {
<img
src={previewImage}
alt="Profile"
className="w-40 h-40 rounded-full object-cover border-4 border-[#ddd8eb]"
className="w-40 h-40 rounded-full object-cover border-4 border-var(--neutral-800)"
/>
<Button
type="button"
@@ -242,8 +242,8 @@ const MemberProfile = () => {
</Button>
</div>
) : (
<div className="w-40 h-40 rounded-full bg-[#F8F7FB] border-4 border-[#ddd8eb] flex items-center justify-center">
<User className="h-20 w-20 text-[#ddd8eb]" />
<div className="w-40 h-40 rounded-full bg-var(--lavender-500) border-4 border-var(--neutral-800) flex items-center justify-center">
<User className="h-20 w-20 text-var(--neutral-800)" />
</div>
)}
</div>
@@ -260,7 +260,7 @@ const MemberProfile = () => {
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl px-6 py-3 flex items-center gap-2"
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl px-6 py-3 flex items-center gap-2"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{uploading ? (
@@ -275,7 +275,7 @@ const MemberProfile = () => {
</>
)}
</Button>
<p className="text-sm text-[#664fa3] mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
JPG, PNG, WebP, or GIF. Max 50MB.
</p>
</div>
@@ -283,15 +283,15 @@ const MemberProfile = () => {
</Card>
{/* Social Media Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Social Media Links
</h2>
<div className="space-y-6">
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Facebook className="h-4 w-4 text-[#1877F2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Facebook className="h-4 w-4 text-var(--blue-facebook)" />
Facebook Profile URL
</Label>
<Input
@@ -300,14 +300,14 @@ const MemberProfile = () => {
value={formData.social_media_facebook}
onChange={handleInputChange}
placeholder="https://facebook.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Instagram className="h-4 w-4 text-[#E4405F]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Instagram className="h-4 w-4 text-var(--red-instagram)" />
Instagram Profile URL
</Label>
<Input
@@ -316,14 +316,14 @@ const MemberProfile = () => {
value={formData.social_media_instagram}
onChange={handleInputChange}
placeholder="https://instagram.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Twitter className="h-4 w-4 text-[#1DA1F2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Twitter className="h-4 w-4 text-var(--blue-twitter)" />
Twitter/X Profile URL
</Label>
<Input
@@ -332,14 +332,14 @@ const MemberProfile = () => {
value={formData.social_media_twitter}
onChange={handleInputChange}
placeholder="https://twitter.com/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Linkedin className="h-4 w-4 text-[#0A66C2]" />
<Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Linkedin className="h-4 w-4 text-var(--blue-linkedin)" />
LinkedIn Profile URL
</Label>
<Input
@@ -348,7 +348,7 @@ const MemberProfile = () => {
value={formData.social_media_linkedin}
onChange={handleInputChange}
placeholder="https://linkedin.com/in/yourprofile"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
@@ -356,33 +356,33 @@ const MemberProfile = () => {
</Card>
{/* Directory Settings Section */}
<Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Directory Settings
</h2>
<div className="space-y-6">
<div className="flex items-center justify-between p-4 bg-[#F8F7FB] rounded-xl">
<div className="flex items-center justify-between p-4 bg-var(--lavender-500) rounded-xl">
<div className="flex-1">
<Label className="text-[#422268] font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Eye className="h-4 w-4 text-[#664fa3]" />
<Label className="text-var(--purple-ink) font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<Eye className="h-4 w-4 text-var(--purple-lavender)" />
Show in Members Directory
</Label>
<p className="text-sm text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Allow other members to see your profile in the directory
</p>
</div>
<Switch
checked={formData.show_in_directory}
onCheckedChange={handleSwitchChange}
className="data-[state=checked]:bg-[#664fa3]"
className="data-[state=checked]:bg-var(--purple-lavender)"
/>
</div>
{formData.show_in_directory && (
<>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Email (visible to members)
</Label>
<Input
@@ -391,13 +391,13 @@ const MemberProfile = () => {
value={formData.directory_email}
onChange={handleInputChange}
placeholder="public.email@example.com"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Bio (visible to members)
</Label>
<Textarea
@@ -406,14 +406,14 @@ const MemberProfile = () => {
onChange={handleInputChange}
placeholder="Tell other members about yourself..."
rows={4}
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Address (optional)
</Label>
<Input
@@ -422,13 +422,13 @@ const MemberProfile = () => {
value={formData.directory_address}
onChange={handleInputChange}
placeholder="123 Main St, City, State"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Directory Phone (optional)
</Label>
<Input
@@ -437,14 +437,14 @@ const MemberProfile = () => {
value={formData.directory_phone}
onChange={handleInputChange}
placeholder="(555) 123-4567"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
</div>
<div>
<Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Partner Name (if applicable)
</Label>
<Input
@@ -453,7 +453,7 @@ const MemberProfile = () => {
value={formData.directory_partner_name}
onChange={handleInputChange}
placeholder="Partner's name"
className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
@@ -467,7 +467,7 @@ const MemberProfile = () => {
<Button
type="submit"
disabled={saving}
className="bg-[#ff9e77] hover:bg-[#ff8c5a] text-white rounded-xl px-8 py-3 text-lg"
className="bg-var(--orange-light) hover:bg-var(--orange-apricot) text-white rounded-xl px-8 py-3 text-lg"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{saving ? (