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

48
src/pages/members/Bylaws.js
View File

@@ -51,10 +51,10 @@ export default function Bylaws() {
if (loading) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Loading bylaws...
</p>
</div>
@@ -63,38 +63,38 @@ export default function Bylaws() {
}
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<Navbar />
<div className="max-w-5xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
LOAF Bylaws
</h1>
<p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Review the official governing bylaws and policies of the LOAF community.
</p>
</div>
{/* Current Bylaws */}
{currentBylaws ? (
<Card className="p-8 bg-white rounded-2xl border-2 border-[#664fa3] mb-6">
<Card className="p-8 bg-background rounded-2xl border-2 border-var(--purple-lavender) mb-6">
<div className="flex items-start gap-4 mb-6">
<div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-4 rounded-xl">
<div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl">
<Scale className="h-8 w-8 text-white" />
</div>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
{currentBylaws.title}
</h2>
<Badge className="bg-[#81B29A] text-white">
<Badge className="bg-var(--green-light) text-white">
<Check className="h-3 w-3 mr-1" />
Current Version
</Badge>
</div>
<div className="flex items-center gap-4 text-[#664fa3] mb-4">
<div className="flex items-center gap-4 text-var(--purple-lavender) mb-4">
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Version: <strong>{currentBylaws.version}</strong>
</span>
@@ -106,7 +106,7 @@ export default function Bylaws() {
<Button
onClick={() => window.open(currentBylaws.document_url, '_blank')}
size="lg"
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
>
<ExternalLink className="h-5 w-5" />
View Current Bylaws
@@ -115,9 +115,9 @@ export default function Bylaws() {
</div>
</Card>
) : (
<Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb] mb-6">
<Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800) mb-6">
<Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
<p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No current bylaws document available
</p>
</Card>
@@ -129,7 +129,7 @@ export default function Bylaws() {
<Button
onClick={() => setShowHistory(!showHistory)}
variant="outline"
className="w-full border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center justify-center gap-2"
className="w-full border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center justify-center gap-2"
>
<History className="h-4 w-4" />
{showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -140,17 +140,17 @@ export default function Bylaws() {
{/* Version History */}
{showHistory && history.length > 1 && (
<div className="space-y-4">
<h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Previous Versions
</h3>
{history.filter(b => !b.is_current).map(bylaws => (
<Card key={bylaws.id} className="p-6 bg-[#f9f7fc] rounded-xl border border-[#ddd8eb]">
<Card key={bylaws.id} className="p-6 bg-var(--lavender-600) rounded-xl border border-var(--neutral-800)">
<div className="flex items-center justify-between">
<div>
<h4 className="text-lg font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="text-lg font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
{bylaws.title}
</h4>
<div className="flex items-center gap-3 text-sm text-[#664fa3]">
<div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
<span>Version {bylaws.version}</span>
<span>•</span>
<span>Effective {formatDate(bylaws.effective_date)}</span>
@@ -160,7 +160,7 @@ export default function Bylaws() {
onClick={() => window.open(bylaws.document_url, '_blank')}
variant="outline"
size="sm"
className="border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center gap-2"
className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center gap-2"
>
<ExternalLink className="h-4 w-4" />
View
@@ -172,14 +172,14 @@ export default function Bylaws() {
)}
{/* Information Card */}
<Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
<Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
<div className="flex items-start gap-3">
<Scale className="h-5 w-5 text-[#664fa3] mt-1" />
<Scale className="h-5 w-5 text-var(--purple-lavender) mt-1" />
<div>
<h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
About LOAF Bylaws
</h4>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The bylaws serve as the governing document for LOAF, outlining the organization's structure,
membership requirements, officer responsibilities, and operational procedures. All members are
encouraged to familiarize themselves with these guidelines.