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

32
src/pages/ForgotPassword.js
View File

@@ -32,28 +32,28 @@ const ForgotPassword = () => {
};
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<div className="max-w-md mx-auto px-6 py-12">
<div className="mb-8">
<Link to="/login" className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors">
<Link to="/login" className="inline-flex items-center text-muted-foreground hover:text-accent transition-colors">
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Login
</Link>
</div>
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
<Card className="p-8 md:p-12 bg-background rounded-2xl border border-chart-6 shadow-lg">
{!submitted ? (
<>
<div className="mb-8 text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#f1eef9] mb-4">
<Mail className="h-8 w-8 text-[#664fa3]" />
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-muted mb-4">
<Mail className="h-8 w-8 text-muted-foreground" />
</div>
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Forgot Password?
</h1>
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
No worries! Enter your email and we'll send you reset instructions.
</p>
</div>
@@ -69,22 +69,22 @@ const ForgotPassword = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="your.email@example.com"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-chart-6 focus:border-muted-foreground"
/>
</div>
<Button
type="submit"
disabled={loading}
className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
className="w-full bg-chart-6 text-primary hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
>
{loading ? 'Sending...' : 'Send Reset Link'}
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
<p className="text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-center text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Remember your password?{' '}
<Link to="/login" className="text-[#ff9e77] hover:underline font-medium">
<Link to="/login" className="text-accent hover:underline font-medium">
Login here
</Link>
</p>
@@ -95,18 +95,18 @@ const ForgotPassword = () => {
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#E8F5E9] mb-6">
<CheckCircle className="h-8 w-8 text-[#4CAF50]" />
</div>
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Check Your Email
</h1>
<p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If an account exists for <span className="font-medium text-[#422268]">{email}</span>,
<p className="text-lg text-muted-foreground mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If an account exists for <span className="font-medium text-primary">{email}</span>,
you will receive a password reset link shortly.
</p>
<p className="text-sm text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-muted-foreground mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
The link will expire in 1 hour. If you don't see the email, check your spam folder.
</p>
<Link to="/login">
<Button className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
<Button className="bg-chart-6 text-primary hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
Return to Login
<ArrowRight className="ml-2 h-5 w-5" />
</Button>