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

many styling changes and updates

Browse Source
This commit is contained in:
kayela
2026-02-04 16:57:25 -06:00
parent 79a727e7ba
commit 356031ad15
21 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MemberBadge.js
View File

@@ -10,7 +10,7 @@ const MemberBadge = ({ memberSince, tiers }) => {
return (
<Badge className={`px-3 py-2 rounded-md text-sm flex items-center gap-2 border hover:text-white ${tier.badgeClass}`}>
<Icon className="size-6" />
<Icon className="size-4" />
{tier.label}
</Badge>
);

98
src/components/MemberCard.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import { Card } from './ui/card';
import { Button } from './ui/button';
import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
import { Heart, Calendar, Mail, User, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle, UserRound } from 'lucide-react';
import MemberBadge from './MemberBadge';
import useDirectoryConfig from '../hooks/use-directory-config';
@@ -28,26 +28,44 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
<div className='flex justify-end items-center mb-2'>
<MemberBadge memberSince={memberSince} tiers={tiers} />
</div>
<div className="flex justify-center mb-4">
{member.profile_photo_url ? (
<img
src={member.profile_photo_url}
alt={`${member.first_name} ${member.last_name}`}
className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
/>
) : (
<div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
<span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
{getInitials(member.first_name, member.last_name)}
</span>
</div>
)}
<div className='flex gap-3 items-start'>
<div className="flex justify-center mb-4">
{member.profile_photo_url ? (
<img
src={member.profile_photo_url}
alt={`${member.first_name} ${member.last_name}`}
className="size-20 rounded-full object-cover border-4 border-[var(--neutral-800)]"
/>
) : (
<div className="size-20 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
<span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
{getInitials(member.first_name, member.last_name)}
</span>
</div>
)}
</div>
<div className='pt-4'>
{/* Name */}
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
{member.first_name} {member.last_name}
</h3>
{/* Member Since */}
{memberSince && (
<div className="flex gap-2 mb-4">
<Calendar className="size-4 text-brand-lavender " />
<span className="text-sm text-brand-purple font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Member since {new Date(memberSince).toLocaleDateString('en-US', {
// month: 'short',
year: 'numeric'
})}
</span>
</div>
)}
</div>
</div>
{/* Name */}
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
{member.first_name} {member.last_name}
</h3>
{/* Partner Name */}
{isFieldEnabled('directory_partner_name') && member.directory_partner_name && (
@@ -66,19 +84,6 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
</p>
)}
{/* Member Since */}
{memberSince && (
<div className="flex items-center justify-center gap-2 mb-4">
<Calendar className="h-4 w-4 text-brand-purple " />
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Member since {new Date(memberSince).toLocaleDateString('en-US', {
month: 'long',
year: 'numeric'
})}
</span>
</div>
)}
{/* Contact Information */}
<div className="space-y-3 mb-4">
{isFieldEnabled('directory_email') && member.directory_email && (
@@ -94,27 +99,6 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
</div>
)}
{isFieldEnabled('directory_phone') && member.directory_phone && (
<div className="flex items-center gap-2 text-sm">
<Phone className="h-4 w-4 text-brand-purple flex-shrink-0" />
<a
href={`tel:${member.directory_phone}`}
className="text-brand-purple hover:text-[var(--purple-ink)]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{member.directory_phone}
</a>
</div>
)}
{isFieldEnabled('directory_address') && member.directory_address && (
<div className="flex items-start gap-2 text-sm">
<MapPin className="h-4 w-4 text-brand-purple flex-shrink-0 mt-0.5" />
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{member.directory_address}
</span>
</div>
)}
</div>
{/* Social Media Links */}
@@ -171,14 +155,14 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
</div>
</div>
)}
<div className='border-b-2 mx-4 border-[var(--neutral-800)] mb-6'></div>
{/* View Profile Button */}
<div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
<div className=" ">
<Button
onClick={() => onViewProfile?.(member.id)}
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full py-5"
className="w-full bg-brand-purple text-background hover:bg-brand-purple/90 hover:text-white rounded-full py-5"
>
<UserCircle className="h-4 w-4 mr-2" />
<UserRound className="size-6 mr-2 font-bold text-brand-lavender" />
View Full Profile
</Button>
</div>

2
src/components/MemberFooter.js
View File

@@ -13,7 +13,7 @@ const MemberFooter = () => {
LOAF
</h3>
<p className="text-gray-300 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Lesbian Organization of Atlanta Family
Lesbians Over Age Fifty
</p>
</div>