From 356031ad15f526285f5f7e226223f2c069889021 Mon Sep 17 00:00:00 2001 From: kayela Date: Wed, 4 Feb 2026 16:57:25 -0600 Subject: [PATCH] many styling changes and updates --- public/index.html | 2 +- src/components/MemberBadge.js | 2 +- src/components/MemberCard.js | 98 ++++++++++-------------- src/components/MemberFooter.js | 2 +- src/pages/BecomeMember.js | 2 +- src/pages/BoardOfDirectors.js | 2 +- src/pages/Dashboard.js | 6 +- src/pages/Donate.js | 2 +- src/pages/Events.js | 2 +- src/pages/History.js | 2 +- src/pages/Landing.js | 12 +-- src/pages/Login.js | 4 +- src/pages/MissionValues.js | 2 +- src/pages/PrivacyPolicy.js | 2 +- src/pages/TermsOfService.js | 2 +- src/pages/members/Bylaws.js | 2 +- src/pages/members/EventGallery.js | 2 +- src/pages/members/Financials.js | 2 +- src/pages/members/MemberCalendar.js | 35 +++++++-- src/pages/members/MembersDirectory.js | 100 +++++++++++++++++-------- src/pages/members/NewsletterArchive.js | 2 +- 21 files changed, 163 insertions(+), 122 deletions(-) diff --git a/public/index.html b/public/index.html index 05d5ccb..3f3c504 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ - + diff --git a/src/components/MemberBadge.js b/src/components/MemberBadge.js index 7a66590..f94b2a2 100644 --- a/src/components/MemberBadge.js +++ b/src/components/MemberBadge.js @@ -10,7 +10,7 @@ const MemberBadge = ({ memberSince, tiers }) => { return ( - + {tier.label} ); diff --git a/src/components/MemberCard.js b/src/components/MemberCard.js index 71feb7b..e8ccd89 100644 --- a/src/components/MemberCard.js +++ b/src/components/MemberCard.js @@ -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 }) => {
-
- {member.profile_photo_url ? ( - {`${member.first_name} - ) : ( -
- - {getInitials(member.first_name, member.last_name)} - -
- )} + +
+
+ {member.profile_photo_url ? ( + {`${member.first_name} + ) : ( +
+ + {getInitials(member.first_name, member.last_name)} + +
+ )} +
+ +
+ {/* Name */} +

+ {member.first_name} {member.last_name} +

+ {/* Member Since */} + {memberSince && ( +
+ + + Member since {new Date(memberSince).toLocaleDateString('en-US', { + // month: 'short', + year: 'numeric' + })} + +
+ )} +
- {/* Name */} -

- {member.first_name} {member.last_name} -

{/* Partner Name */} {isFieldEnabled('directory_partner_name') && member.directory_partner_name && ( @@ -66,19 +84,6 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {

)} - {/* Member Since */} - {memberSince && ( -
- - - Member since {new Date(memberSince).toLocaleDateString('en-US', { - month: 'long', - year: 'numeric' - })} - -
- )} - {/* Contact Information */}
{isFieldEnabled('directory_email') && member.directory_email && ( @@ -94,27 +99,6 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
)} - {isFieldEnabled('directory_phone') && member.directory_phone && ( -
- - - {member.directory_phone} - -
- )} - - {isFieldEnabled('directory_address') && member.directory_address && ( -
- - - {member.directory_address} - -
- )}
{/* Social Media Links */} @@ -171,14 +155,14 @@ const MemberCard = ({ member, onViewProfile, tiers }) => { )} - +
{/* View Profile Button */} -
+
diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js index 274e3cb..5fd1147 100644 --- a/src/components/MemberFooter.js +++ b/src/components/MemberFooter.js @@ -13,7 +13,7 @@ const MemberFooter = () => { LOAF

- Lesbian Organization of Atlanta Family + Lesbians Over Age Fifty

diff --git a/src/pages/BecomeMember.js b/src/pages/BecomeMember.js index 292ae4e..8968056 100644 --- a/src/pages/BecomeMember.js +++ b/src/pages/BecomeMember.js @@ -71,7 +71,7 @@ const BecomeMember = () => { {/* Membership Process Section */} -
+
{/* Decorative shooting star element */}
{
-
+
{/* Hero Section */}
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 7f740d0..5172981 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -136,7 +136,7 @@ const Dashboard = () => { return ( -
+
@@ -286,7 +286,7 @@ const Dashboard = () => { {loading ? (

Loading events...

) : events.length > 0 ? ( -
+
{events.map((event) => (
{ ))}
) : ( -
+

No upcoming events at the moment.

Check back later for new events!

diff --git a/src/pages/Donate.js b/src/pages/Donate.js index 6db63ca..8c9eeb9 100644 --- a/src/pages/Donate.js +++ b/src/pages/Donate.js @@ -58,7 +58,7 @@ const Donate = () => {
-
+
{/* Hero Section */}
diff --git a/src/pages/Events.js b/src/pages/Events.js index daa9e08..150238f 100644 --- a/src/pages/Events.js +++ b/src/pages/Events.js @@ -46,7 +46,7 @@ const Events = () => { }; return ( -
+
diff --git a/src/pages/History.js b/src/pages/History.js index bad333f..4a4a374 100644 --- a/src/pages/History.js +++ b/src/pages/History.js @@ -46,7 +46,7 @@ const History = () => {
-
+
{/* Hero Section */}
diff --git a/src/pages/Landing.js b/src/pages/Landing.js index aef9359..9a747a9 100644 --- a/src/pages/Landing.js +++ b/src/pages/Landing.js @@ -84,12 +84,14 @@ const Landing = () => {
{/* Left column Loaf Image */}
-
+
LOAF +
Lesbians Over Age Fifty
+
- @@ -107,11 +109,11 @@ const Landing = () => { {/* About Section */}
-

+

Welcome to LOAF

-

+

LOAF is Houston's social networking group for lesbians who are 50 years of age and older. LOAF hosts three main activities each month, Meet and Greets, Socials, and ActiveLOAFers. TheaterLOAFers coordinate events throughout the year.

Decorative element @@ -129,7 +131,7 @@ const Landing = () => {
diff --git a/src/pages/Login.js b/src/pages/Login.js index 73ac36e..0a29218 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -82,10 +82,10 @@ const Login = () => { }; return ( -
+
-
+
diff --git a/src/pages/MissionValues.js b/src/pages/MissionValues.js index ee9f6e1..47aaa54 100644 --- a/src/pages/MissionValues.js +++ b/src/pages/MissionValues.js @@ -12,7 +12,7 @@ const MissionValues = () => {
-
+
{/* Left Card - Mission (Purple Gradient) */} diff --git a/src/pages/PrivacyPolicy.js b/src/pages/PrivacyPolicy.js index 4f4c37c..ae32921 100644 --- a/src/pages/PrivacyPolicy.js +++ b/src/pages/PrivacyPolicy.js @@ -7,7 +7,7 @@ export default function PrivacyPolicy() { return ( <> -
+

diff --git a/src/pages/TermsOfService.js b/src/pages/TermsOfService.js index 4bd9b75..8d90104 100644 --- a/src/pages/TermsOfService.js +++ b/src/pages/TermsOfService.js @@ -8,7 +8,7 @@ export default function TermsOfService() { return ( <> -
+
{/* Title */}
diff --git a/src/pages/members/Bylaws.js b/src/pages/members/Bylaws.js index 25dc9c2..af7fa7b 100644 --- a/src/pages/members/Bylaws.js +++ b/src/pages/members/Bylaws.js @@ -108,7 +108,7 @@ export default function Bylaws() { } return ( -
+
diff --git a/src/pages/members/EventGallery.js b/src/pages/members/EventGallery.js index de9034b..ba5b9e1 100644 --- a/src/pages/members/EventGallery.js +++ b/src/pages/members/EventGallery.js @@ -159,7 +159,7 @@ const EventGallery = () => { // Event Gallery Grid View if (!selectedEvent) { return ( -
+
diff --git a/src/pages/members/Financials.js b/src/pages/members/Financials.js index 7f8ac96..43eff8b 100644 --- a/src/pages/members/Financials.js +++ b/src/pages/members/Financials.js @@ -87,7 +87,7 @@ export default function Financials() { } return ( -
+
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js index 9ed6f7b..60e37f7 100644 --- a/src/pages/members/MemberCalendar.js +++ b/src/pages/members/MemberCalendar.js @@ -89,6 +89,20 @@ export default function MemberCalendar() { setRsvpLoading(false); } }; + const getReadableTextColor = (hex) => { + const cleaned = hex.replace('#', ''); + const r = parseInt(cleaned.substring(0, 2), 16) / 255; + const g = parseInt(cleaned.substring(2, 4), 16) / 255; + const b = parseInt(cleaned.substring(4, 6), 16) / 255; + + const srgb = [r, g, b].map((c) => + c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4) + ); + const luminance = 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; + + // tweak threshold to taste + return luminance > 0.6 ? 'var(--brand-purple)' : 'white'; + }; const eventStyleGetter = (event) => { const rsvpStatus = event.resource?.user_rsvp_status; @@ -99,12 +113,16 @@ export default function MemberCalendar() { if (rsvpStatus === 'yes') { backgroundColor = '#81B29A'; borderColor = '#66927e'; + } else if (rsvpStatus === 'no') { backgroundColor = '#9ca3af'; borderColor = '#6b7280'; + } else if (rsvpStatus === 'maybe') { backgroundColor = '#fb923c'; borderColor = '#ea580c'; + + } return { @@ -114,7 +132,7 @@ export default function MemberCalendar() { borderWidth: '2px', borderStyle: 'solid', borderRadius: '6px', - color: 'white', + color: getReadableTextColor(backgroundColor), fontWeight: '500', fontSize: '0.875rem', padding: '2px 6px', @@ -136,7 +154,7 @@ export default function MemberCalendar() { } return ( -
+
@@ -175,7 +193,7 @@ export default function MemberCalendar() {
- + @@ -275,9 +293,10 @@ export default function MemberCalendar() { onClick={() => handleRSVP('yes')} disabled={rsvpLoading} size="sm" - className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes' - ? 'bg-[var(--green-light)] text-white hover:bg-[var(--green-muted)]' - : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--neutral-400:)]' + variant='outline' + className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes' + ? 'border-success bg-success/20 text-success' + : 'border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)]' }`} > @@ -303,7 +322,7 @@ export default function MemberCalendar() { variant="outline" className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'no' ? 'border-gray-400 bg-gray-100 text-gray-700' - : 'border-gray-400 text-gray-600 hover:bg-gray-50' + : 'border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)]' }`} > diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js index f3ad550..e0c17cb 100644 --- a/src/pages/members/MembersDirectory.js +++ b/src/pages/members/MembersDirectory.js @@ -14,13 +14,33 @@ import { DialogHeader, DialogTitle, } from '../../components/ui/dialog'; -import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react'; +import { + User, + Search, + Mail, + MapPin, + Phone, + Heart, + Facebook, + Instagram, + Twitter, + Linkedin, + CircleUserRound, + Calendar, + ChevronsRight, + ChevronRight, + ChevronLeft, + ChevronsLeft, + UserRound +} from 'lucide-react'; import { useToast } from '../../hooks/use-toast'; import MemberCard from '../../components/MemberCard'; import MemberBadge from '../../components/MemberBadge'; import useMembers from '../../hooks/use-members'; import useMemberTiers from '../../hooks/use-member-tiers'; import useDirectoryConfig from '../../hooks/use-directory-config'; +import { useThemeConfig } from '@/context/ThemeConfigContext'; + const MembersDirectory = () => { const [selectedMember, setSelectedMember] = useState(null); @@ -37,6 +57,12 @@ const MembersDirectory = () => { } return status; }, []); + + const { getLogoUrl } = useThemeConfig(); + // Get logo URL from theme config (with fallback to default) + const logo = getLogoUrl(); + + const normalizeMembers = useCallback( (data) => { const list = Array.isArray(data) @@ -147,18 +173,27 @@ const MembersDirectory = () => {
{/* Header */} -
-

- LOAF Members -

-

- Number of current members in the directory: {totalMembers} -

+
+ + LOAF Logo + + +
+

+ Members Directory +

+ +

+ + Active Members Count: {totalMembers} +

+
{/* Search Bar */} -
+
+ { style={{ fontFamily: "'Nunito Sans', sans-serif" }} />
- {searchQuery && ( -

- Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'} -

- )} + +
+ {searchQuery && ( +

+ Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'} +

+ )} +
{/* Border Decoration */} - - + {/* Members Grid */} {loading ? ( @@ -206,23 +243,21 @@ const MembersDirectory = () => {
)} - - {/* Border Decoration */} {/* todo: use badge to display if member */} {/* Info Card */} {!loading && members.length > 0 && ( - +
-
- +
+
-
-

+
+

Want to appear in the directory?

-

+

Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '} @@ -432,16 +467,16 @@ const MembersDirectory = () => { {Array.from({ length: totalPages }, (_, index) => { @@ -465,16 +500,17 @@ const MembersDirectory = () => {

diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js index 48513bc..b22c408 100644 --- a/src/pages/members/NewsletterArchive.js +++ b/src/pages/members/NewsletterArchive.js @@ -95,7 +95,7 @@ export default function NewsletterArchive() { } return ( -
+