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

50
src/pages/ContactUs.js
View File

@@ -96,15 +96,15 @@ const ContactUs = () => {
};
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
<main className="bg-gradient-to-b from-[#e8e0f5] to-[#f1eef9] px-6 py-16">
<main className="bg-gradient-to-b from-var(--lavender-100) to-var(--lavender-300) px-6 py-16">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
{/* Contact Form */}
<Card className="p-8 bg-white rounded-2xl">
<h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
<Card className="p-8 bg-background rounded-2xl">
<h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-var(--purple-deep) mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
Contact Form
</h1>
@@ -112,7 +112,7 @@ const ContactUs = () => {
{/* First Name & Last Name */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="firstName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
First Name <span className="text-red-500">*</span>
</Label>
<Input
@@ -120,13 +120,13 @@ const ContactUs = () => {
name="firstName"
value={formData.firstName}
onChange={handleChange}
className="border-2 border-[#ddd8eb] bg-[#eaedf4] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 border-var(--neutral-800) bg-var(--lavender-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
</div>
<div>
<Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="lastName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Last Name <span className="text-red-500">*</span>
</Label>
<Input
@@ -134,7 +134,7 @@ const ContactUs = () => {
name="lastName"
value={formData.lastName}
onChange={handleChange}
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -143,7 +143,7 @@ const ContactUs = () => {
{/* Email */}
<div>
<Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="email" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Email <span className="text-red-500">*</span>
</Label>
<Input
@@ -152,7 +152,7 @@ const ContactUs = () => {
type="email"
value={formData.email}
onChange={handleChange}
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -160,7 +160,7 @@ const ContactUs = () => {
{/* Subject */}
<div>
<Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="subject" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Subject <span className="text-red-500">*</span>
</Label>
<Input
@@ -168,7 +168,7 @@ const ContactUs = () => {
name="subject"
value={formData.subject}
onChange={handleChange}
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -176,7 +176,7 @@ const ContactUs = () => {
{/* Message */}
<div>
<Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="message" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
Your Message <span className="text-red-500">*</span>
</Label>
<Textarea
@@ -184,7 +184,7 @@ const ContactUs = () => {
name="message"
value={formData.message}
onChange={handleChange}
className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-2xl min-h-[150px] px-4 py-3 resize-none"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
required
/>
@@ -196,9 +196,9 @@ const ContactUs = () => {
id="consent"
checked={formData.consent}
onCheckedChange={handleConsentChange}
className="mt-1 border-2 border-[#ddd8eb] data-[state=checked]:bg-[#664fa3] data-[state=checked]:border-[#664fa3]"
className="mt-1 border-2 border-var(--neutral-800) data-[state=checked]:bg-var(--purple-lavender) data-[state=checked]:border-var(--purple-lavender)"
/>
<Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<Label htmlFor="consent" className="text-var(--purple-deep) text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
</Label>
</div>
@@ -207,7 +207,7 @@ const ContactUs = () => {
<Button
type="submit"
disabled={loading}
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
style={{ fontFamily: "'Inter', sans-serif" }}
>
{loading ? (
@@ -225,22 +225,22 @@ const ContactUs = () => {
{/* Contact Information */}
<div className="space-y-6">
{/* Message Card */}
<Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white">
<Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-lg text-white">
<p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
If you have questions, or are interested in joining, we would love hearing from you.
</p>
</Card>
{/* Email Card */}
<Card className="p-6 bg-white rounded-2xl">
<Card className="p-6 bg-background rounded-2xl">
<div className="flex items-center gap-4">
<div className="flex items-center justify-center flex-shrink-0">
<Mail className="size-12 text-[#664fa3]" />
<Mail className="size-12 text-var(--purple-lavender)" />
</div>
<div>
<a
href="mailto:info@loaftx.org"
className="text-[#865edf] text-xl font-semibold hover:text-[#48286e] transition-colors"
className="text-var(--purple-electric) text-xl font-semibold hover:text-var(--purple-deep) transition-colors"
style={{ fontFamily: "'Inter', sans-serif" }}
>
info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
</Card>
{/* Address Card */}
<Card className="p-6 bg-white rounded-2xl ">
<Card className="p-6 bg-background rounded-2xl ">
<div className="flex items-start gap-4">
<div className="flex items-center justify-center flex-shrink-0">
<PiMapTrifoldBold className="size-12 text-[#664fa3]" />
<PiMapTrifoldBold className="size-12 text-var(--purple-lavender)" />
</div>
<div>
<p className="text-[#48286e] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
<p className="text-var(--purple-deep) text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF
</p>
<p className="text-[#48286e] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
<p className="text-var(--purple-deep) text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
P.O. Box 7207<br />
Houston, Texas 77248-7207
</p>