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

22
src/pages/NotFound.js
View File

@@ -8,32 +8,32 @@ const NotFound = () => {
const navigate = useNavigate();
return (
<div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
<Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
<div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
<Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
{/* 404 Illustration */}
<div className="mb-8">
<div className="relative">
<h1
className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[#ddd8eb] to-[#f9f8fb] leading-none"
className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-var(--neutral-800) to-var(--lavender-700) leading-none"
style={{ fontFamily: "'Inter', sans-serif" }}
>
404
</h1>
<div className="absolute inset-0 flex items-center justify-center">
<Search className="h-24 w-24 text-[#664fa3] opacity-30" />
<Search className="h-24 w-24 text-var(--purple-lavender) opacity-30" />
</div>
</div>
</div>
{/* Message */}
<h2
className="text-3xl font-semibold text-[#422268] mb-4"
className="text-3xl font-semibold text-var(--purple-ink) mb-4"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Page Not Found
</h2>
<p
className="text-lg text-[#664fa3] mb-8 max-w-md mx-auto"
className="text-lg text-var(--purple-lavender) mb-8 max-w-md mx-auto"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
@@ -44,14 +44,14 @@ const NotFound = () => {
<Button
onClick={() => navigate(-1)}
variant="outline"
className="rounded-xl border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f9f8fb] px-6 py-6"
className="rounded-xl border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-700) px-6 py-6"
>
<ArrowLeft className="h-5 w-5 mr-2" />
Go Back
</Button>
<Button
onClick={() => navigate('/')}
className="rounded-xl bg-gradient-to-r from-[#664fa3] to-[#422268] hover:from-[#422268] hover:to-[#664fa3] text-white px-6 py-6"
className="rounded-xl bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-ink) hover:from-var(--purple-ink) hover:to-var(--purple-lavender) text-white px-6 py-6"
>
<Home className="h-5 w-5 mr-2" />
Back to Home
@@ -59,15 +59,15 @@ const NotFound = () => {
</div>
{/* Help Text */}
<div className="mt-8 pt-8 border-t border-[#ddd8eb]">
<div className="mt-8 pt-8 border-t border-var(--neutral-800)">
<p
className="text-sm text-[#664fa3]"
className="text-sm text-var(--purple-lavender)"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
Need help? Contact us at{' '}
<a
href="mailto:support@loaftx.org"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
>
support@loaftx.org
</a>