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

26
src/pages/VerifyEmail.js
View File

@@ -45,18 +45,18 @@ const VerifyEmail = () => {
}, [token]);
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<div className="max-w-2xl mx-auto px-6 py-20">
<Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg text-center">
<Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg text-center">
{status === 'loading' && (
<>
<Loader2 className="h-20 w-20 text-[#664fa3] mx-auto mb-6 animate-spin" />
<h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<Loader2 className="h-20 w-20 text-var(--purple-lavender) mx-auto mb-6 animate-spin" />
<h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Verifying Your Email...
</h1>
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Please wait while we verify your email address.
</p>
</>
@@ -64,19 +64,19 @@ const VerifyEmail = () => {
{status === 'success' && (
<>
<CheckCircle className="h-20 w-20 text-[#81B29A] mx-auto mb-6" />
<h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<CheckCircle className="h-20 w-20 text-var(--green-light) mx-auto mb-6" />
<h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Email Verified Successfully!
</h1>
<p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{message}
</p>
<p className="text-base text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-base text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
</p>
<Link to="/login">
<Button
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-12 py-6 text-lg font-medium shadow-lg"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
data-testid="login-redirect-button"
>
Go to Login
@@ -88,15 +88,15 @@ const VerifyEmail = () => {
{status === 'error' && (
<>
<XCircle className="h-20 w-20 text-red-500 mx-auto mb-6" />
<h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Verification Failed
</h1>
<p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{message}
</p>
<Link to="/">
<Button
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-12 py-6 text-lg font-medium shadow-lg"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
data-testid="home-redirect-button"
>
Go to Home