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

36
src/pages/admin/AdminNewsletters.js
View File

@@ -175,7 +175,7 @@ const AdminNewsletters = () => {
if (loading) {
return (
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#664fa3]">Loading newsletters...</p>
<p className="text-var(--purple-lavender)">Loading newsletters...</p>
</div>
);
}
@@ -185,17 +185,17 @@ const AdminNewsletters = () => {
{/* 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-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Newsletter Management
</h1>
<p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Create and manage newsletter archive
</p>
</div>
{hasPermission('newsletters.create') && (
<Button
onClick={handleCreate}
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"
>
<Plus className="h-4 w-4" />
Add Newsletter
@@ -206,10 +206,10 @@ const AdminNewsletters = () => {
{/* Newsletters List */}
{newsletters.length === 0 ? (
<Card className="p-12 text-center">
<FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
<p className="text-[#664fa3] text-lg mb-4">No newsletters yet</p>
<FileText className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
<p className="text-var(--purple-lavender) text-lg mb-4">No newsletters yet</p>
{hasPermission('newsletters.create') && (
<Button onClick={handleCreate} className="bg-[#664fa3] text-white">
<Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
<Plus className="h-4 w-4 mr-2" />
Create First Newsletter
</Button>
@@ -219,7 +219,7 @@ const AdminNewsletters = () => {
<div className="space-y-6">
{sortedYears.map(year => (
<div key={year}>
<h2 className="text-xl font-semibold text-[#422268] mb-4 flex items-center gap-2">
<h2 className="text-xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2">
<Calendar className="h-5 w-5" />
{year}
</h2>
@@ -228,24 +228,24 @@ const AdminNewsletters = () => {
<Card key={newsletter.id} className="p-6">
<div className="flex items-start justify-between">
<div className="flex-1">
<h3 className="text-lg font-semibold text-[#422268] mb-2">
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
{newsletter.title}
</h3>
{newsletter.description && (
<p className="text-[#664fa3] mb-3">{newsletter.description}</p>
<p className="text-var(--purple-lavender) mb-3">{newsletter.description}</p>
)}
<div className="flex items-center gap-3">
<Badge className="bg-[#DDD8EB] text-[#422268]">
<Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
{formatDate(newsletter.published_date)}
</Badge>
<Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
<Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
{newsletter.document_type === 'upload' ? 'PDF Upload' : 'Link'}
</Badge>
<Button
variant="ghost"
size="sm"
onClick={() => window.open(newsletter.document_url, '_blank')}
className="text-[#664fa3] hover:text-[#533a82]"
className="text-var(--purple-lavender) hover:text-var(--purple-muted)"
>
<ExternalLink className="h-4 w-4 mr-1" />
View
@@ -259,7 +259,7 @@ const AdminNewsletters = () => {
variant="outline"
size="sm"
onClick={() => handleEdit(newsletter)}
className="border-[#664fa3] text-[#664fa3]"
className="border-var(--purple-lavender) text-var(--purple-lavender)"
>
<Edit className="h-4 w-4" />
</Button>
@@ -361,12 +361,12 @@ const AdminNewsletters = () => {
required={!selectedNewsletter}
/>
{uploadedFile && (
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-var(--purple-lavender) mt-1">
Selected: {uploadedFile.name}
</p>
)}
{selectedNewsletter && !uploadedFile && (
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-var(--purple-lavender) mt-1">
Current file will be kept if no new file is selected
</p>
)}
@@ -381,7 +381,7 @@ const AdminNewsletters = () => {
placeholder="https://docs.google.com/document/d/... or https://example.com/file.pdf"
required
/>
<p className="text-sm text-[#664fa3] mt-1">
<p className="text-sm text-var(--purple-lavender) mt-1">
Paste the shareable link to your document (Google Docs, Dropbox, PDF URL, etc.)
</p>
</div>
@@ -398,7 +398,7 @@ const AdminNewsletters = () => {
</Button>
<Button
type="submit"
className="bg-[#664fa3] text-white"
className="bg-var(--purple-lavender) text-white"
disabled={submitting}
>
{submitting ? 'Saving...' : selectedNewsletter ? 'Update' : 'Create'}