andika/membership-fe
3
1
Fork 1
Code Issues 21 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

30
src/pages/Resources.js
View File

@@ -97,13 +97,13 @@ const Resources = () => {
];
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<main className="bg-gradient-to-b from-white via-[#f1eef9] to-[#e8e0f5] px-6 py-16">
<main className="bg-gradient-to-b from-white via-var(--lavender-300) to-var(--lavender-100) px-6 py-16">
{/* Header Section */}
<section className="max-w-7xl mx-auto mb-12">
<h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-[28px] font-bold text-var(--purple-deep) text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
Tap or click on each purple tab below to open and read its contents
</h1>
@@ -115,8 +115,8 @@ const Resources = () => {
{categories.map((category, categoryIndex) => (
<div key={categoryIndex} className="space-y-6">
{/* Category Title */}
<div className="flex justify-center text-4xl text-[#664ea2]">{category.icon}</div>
<h2 className="text-[32px] leading-6 font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
<div className="flex justify-center text-4xl text-var(--purple-lilac)">{category.icon}</div>
<h2 className="text-[32px] leading-6 font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
{category.title}
</h2>
@@ -130,7 +130,7 @@ const Resources = () => {
{/* Accordion Button */}
<button
onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
className={`w-full bg-gradient-to-tr from-[#48286E] to-[#664FA3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
className={`w-full bg-gradient-to-tr from-var(--purple-deep) to-var(--purple-lavender) hover:bg-var(--purple-soft) text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
}
>
@@ -148,9 +148,9 @@ const Resources = () => {
className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
}`}
>
<Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
<Card className="p-6 bg-background rounded-b-2xl rounded-t-none border-none ">
{/* Description */}
<p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-deep) mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{resource.description}
</p>
@@ -158,7 +158,7 @@ const Resources = () => {
<div className="space-y-3">
{/* Location */}
{resource.location && (
<div className="flex items-start gap-2 text-[#664fa3]">
<div className="flex items-start gap-2 text-var(--purple-lavender)">
<MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
<span className="text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{resource.location}
@@ -168,7 +168,7 @@ const Resources = () => {
{/* Contact */}
{resource.contact && (
<div className="text-[#664fa3]">
<div className="text-var(--purple-lavender)">
<p className="text-sm font-medium mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
Contact: {resource.contact}
</p>
@@ -178,7 +178,7 @@ const Resources = () => {
<Phone className="size-4" />
<a
href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
className="text-sm hover:text-[#48286e] transition-colors"
className="text-sm hover:text-var(--purple-deep) transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{resource.phone}
@@ -190,7 +190,7 @@ const Resources = () => {
<Mail className="h-4 w-4" />
<a
href={`mailto:${resource.email}`}
className="text-sm hover:text-[#48286e] transition-colors"
className="text-sm hover:text-var(--purple-deep) transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
>
{resource.email}
@@ -207,7 +207,7 @@ const Resources = () => {
href={resource.link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 text-[#ff9e77] hover:text-[#e88a63] font-medium transition-colors mt-2"
className="inline-flex items-center gap-2 text-var(--orange-light) hover:text-var(--orange-peach) font-medium transition-colors mt-2"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Visit Website
@@ -228,7 +228,7 @@ const Resources = () => {
{/* Additional Help Section */}
<section className="max-w-4xl mx-auto mt-16">
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-xl text-center">
<Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-xl text-center">
<h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Need Additional Support?
</h3>
@@ -237,7 +237,7 @@ const Resources = () => {
</p>
<a
href="mailto:support@loaf.org"
className="inline-block bg-white text-[#48286e] px-8 py-3 rounded-full font-semibold hover:bg-[#f1eef9] transition-colors shadow-lg"
className="inline-block bg-background text-var(--purple-deep) px-8 py-3 rounded-full font-semibold hover:bg-var(--lavender-300) transition-colors shadow-lg"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Contact Us