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

40
src/components/registration/RegistrationStep3.js
View File

@@ -23,11 +23,11 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
return (
<div className="space-y-6">
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Members Directory
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Would you like to be displayed on our private members directory? (optional and you can change the answer later)
</p>
@@ -37,8 +37,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${formData.show_in_directory
? 'border-[#ff9e77] bg-[#ff9e77]/5'
: 'border-[#ddd8eb] hover:border-[#664fa3]'
? 'border-var(--orange-light) bg-var(--orange-light)/5'
: 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -46,13 +46,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
${formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
`}>
{formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
<div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
)}
</div>
<span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Yes, include me in the Members Directory
</span>
</div>
@@ -62,8 +62,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
className={`
p-4 rounded-xl border-2 cursor-pointer transition-all
${!formData.show_in_directory
? 'border-[#ff9e77] bg-[#ff9e77]/5'
: 'border-[#ddd8eb] hover:border-[#664fa3]'
? 'border-var(--orange-light) bg-var(--orange-light)/5'
: 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
}
`}
onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -71,13 +71,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
<div className="flex items-center space-x-3">
<div className={`
w-5 h-5 rounded-full border-2 flex items-center justify-center
${!formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
${!formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
`}>
{!formData.show_in_directory && (
<div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
<div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
)}
</div>
<span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
No, don't include me in the Members Directory
</span>
</div>
@@ -87,8 +87,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
{/* Conditional Directory Fields */}
{formData.show_in_directory && (
<div className="space-y-4 mt-6 p-6 bg-white rounded-xl border border-[#ddd8eb]">
<p className="text-[#664fa3] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-var(--neutral-800)">
<p className="text-var(--purple-lavender) text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Below, choose what information you would like include in the Members Only Directory.
(If you ever want to update this information, remember the Directory Section and Account Section are separate)
</p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="email"
value={formData.directory_email}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
onChange={handleInputChange}
placeholder="Tell other members about yourself..."
rows={4}
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
name="directory_address"
value={formData.directory_address}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="tel"
value={formData.directory_phone}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
type="date"
value={formData.directory_dob}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
name="directory_partner_name"
value={formData.directory_partner_name}
onChange={handleInputChange}
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
</div>