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

18
src/components/AttendanceDialog.js
View File

@@ -55,21 +55,21 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-white">
<DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Mark Attendance: {event?.title}
</DialogTitle>
</DialogHeader>
<div className="space-y-4 mt-4">
{rsvps.length === 0 ? (
<p className="text-center text-[#664fa3] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
<p className="text-center text-var(--purple-lavender) py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
) : (
rsvps.map((rsvp) => (
<div
key={rsvp.user_id}
className="flex items-center gap-3 p-4 border-2 border-[#ddd8eb] rounded-xl hover:border-[#664fa3] transition-colors"
className="flex items-center gap-3 p-4 border-2 border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) transition-colors"
>
<Checkbox
checked={attendance[rsvp.user_id] || false}
@@ -79,11 +79,11 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
className="w-5 h-5"
/>
<div className="flex-1">
<p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
<p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
<p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
</div>
{rsvp.attended && (
<span className="text-sm text-[#81B29A] font-medium">
<span className="text-sm text-var(--green-light) font-medium">
✓ Attended
</span>
)}
@@ -96,14 +96,14 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
<Button
onClick={handleSave}
disabled={loading}
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
>
{loading ? 'Saving...' : 'Save Attendance'}
</Button>
<Button
onClick={() => onOpenChange(false)}
variant="outline"
className="flex-1 border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white hover:text-[#422268] rounded-full"
className="flex-1 border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background hover:text-var(--purple-ink) rounded-full"
>
Cancel
</Button>