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

Refactor Members Directory and Newsletter Archive styles to use new color palette

Browse Source 
- Updated color classes in MembersDirectory.js to use new color variables for borders, backgrounds, and text.
- Enhanced visual consistency by replacing hardcoded colors with Tailwind CSS color utilities.
- Modified NewsletterArchive.js to align with the new design system, ensuring a cohesive look across components.
- Added new color variables in tailwind.config.js for better maintainability and scalability.
This commit is contained in:
kayela
2026-01-07 11:36:07 -06:00
parent a93e2aa863
commit 4ba44d8997
79 changed files with 2152 additions and 2033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/admin/AdminBylaws.js
View File

@@ -162,14 +162,14 @@ const AdminBylaws = () => {
};
const currentBylaws = bylaws.find(b => b.is_current);
const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) =>
const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) =>
new Date(b.effective_date) - new Date(a.effective_date)
);
if (loading) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]">Loading bylaws...</p>
<p className="text-muted-foreground">Loading bylaws...</p>
</div>
);
}
@@ -179,17 +179,17 @@ const AdminBylaws = () => {
{/* Header */}
<div className="flex justify-between items-center">
<div>
<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-3xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
Bylaws Management
</h1>
<p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-muted-foreground mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Manage LOAF governing bylaws and version history
</p>
</div>
{hasPermission('bylaws.create') && (
<Button
onClick={handleCreate}
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
className="bg-muted-foreground text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
>
<Plus className="h-4 w-4" />
Add Version
@@ -199,14 +199,14 @@ const AdminBylaws = () => {
{/* Current Bylaws */}
{currentBylaws ? (
<Card className="p-6 border-2 border-[#664fa3]">
<Card className="p-6 border-2 border-muted-foreground">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-3 rounded-xl">
<div className="bg-gradient-to-br from-muted-foreground to-primary p-3 rounded-xl">
<Scale className="h-6 w-6 text-white" />
</div>
<div>
<h3 className="text-xl font-semibold text-[#422268]">
<h3 className="text-xl font-semibold text-primary">
{currentBylaws.title}
</h3>
<div className="flex items-center gap-2 mt-1">
@@ -214,7 +214,7 @@ const AdminBylaws = () => {
<Check className="h-3 w-3 mr-1" />
Current Version
</Badge>
<span className="text-[#664fa3] text-sm">
<span className="text-muted-foreground text-sm">
Version {currentBylaws.version}
</span>
</div>
@@ -225,7 +225,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => window.open(currentBylaws.document_url, '_blank')}
className="border-[#664fa3] text-[#664fa3]"
className="border-muted-foreground text-muted-foreground"
>
<ExternalLink className="h-4 w-4 mr-1" />
View
@@ -235,7 +235,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => handleEdit(currentBylaws)}
className="border-[#664fa3] text-[#664fa3]"
className="border-muted-foreground text-muted-foreground"
>
<Edit className="h-4 w-4" />
</Button>
@@ -252,7 +252,7 @@ const AdminBylaws = () => {
)}
</div>
</div>
<div className="flex items-center gap-4 text-sm text-[#664fa3]">
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
<span>•</span>
<span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
@@ -260,10 +260,10 @@ const AdminBylaws = () => {
</Card>
) : (
<Card className="p-12 text-center">
<Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
<Scale className="h-16 w-16 text-chart-6 mx-auto mb-4" />
<p className="text-muted-foreground text-lg mb-4">No current bylaws set</p>
{hasPermission('bylaws.create') && (
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Button onClick={handleCreate} className="bg-muted-foreground text-white">
<Plus className="h-4 w-4 mr-2" />
Create Bylaws
</Button>
@@ -274,7 +274,7 @@ const AdminBylaws = () => {
{/* Historical Versions */}
{historicalBylaws.length > 0 && (
<div>
<h2 className="text-xl font-semibold text-[#422268] mb-4">
<h2 className="text-xl font-semibold text-primary mb-4">
Version History ({historicalBylaws.length})
</h2>
<div className="space-y-4">
@@ -282,10 +282,10 @@ const AdminBylaws = () => {
<Card key={bylawsDoc.id} className="p-6">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-[#422268] mb-1">
<h3 className="text-lg font-semibold text-primary mb-1">
{bylawsDoc.title}
</h3>
<div className="flex items-center gap-3 text-sm text-[#664fa3]">
<div className="flex items-center gap-3 text-sm text-muted-foreground">
<span>Version {bylawsDoc.version}</span>
<span>•</span>
<span>Effective {formatDate(bylawsDoc.effective_date)}</span>
@@ -296,7 +296,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => window.open(bylawsDoc.document_url, '_blank')}
className="border-[#664fa3] text-[#664fa3]"
className="border-muted-foreground text-muted-foreground"
>
<ExternalLink className="h-4 w-4" />
</Button>
@@ -305,7 +305,7 @@ const AdminBylaws = () => {
variant="outline"
size="sm"
onClick={() => handleEdit(bylawsDoc)}
className="border-[#664fa3] text-[#664fa3]"
className="border-muted-foreground text-muted-foreground"
>
<Edit className="h-4 w-4" />
</Button>
@@ -404,12 +404,12 @@ const AdminBylaws = () => {
required={!selectedBylaws}
/>
{uploadedFile && (
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-muted-foreground mt-1">
Selected: {uploadedFile.name}
</p>
)}
{selectedBylaws && !uploadedFile && (
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-muted-foreground mt-1">
Current file will be kept if no new file is selected
</p>
)}
@@ -424,7 +424,7 @@ const AdminBylaws = () => {
placeholder="https://docs.google.com/... or https://example.com/file.pdf"
required
/>
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-muted-foreground mt-1">
Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
</p>
</div>
@@ -455,7 +455,7 @@ const AdminBylaws = () => {
</Button>
<Button
type="submit"
className="bg-[#664fa3] text-white"
className="bg-muted-foreground text-white"
disabled={submitting}
>
{submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}