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

20
src/components/registration/RegistrationStep4.js
View File

@@ -7,11 +7,11 @@ const RegistrationStep4 = ({ formData, 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" }}>
Account Credentials
</h2>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your email is also your username that you can use to login.
Please note you can only login after your application is validated.
</p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.email}
onChange={handleInputChange}
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-var(--neutral-800) focus:border-var(--purple-lavender)"
data-testid="email-input"
/>
</div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.password}
onChange={handleInputChange}
placeholder="At least 6 characters"
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)"
data-testid="password-input"
/>
<p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Must be at least 6 characters long
</p>
</div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Re-enter your password"
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)"
data-testid="confirm-password-input"
/>
{formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -71,7 +71,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
</div>
{/* Terms of Service Acceptance */}
<div className="p-4 bg-[#F8F7FB] rounded-lg border border-[#ddd8eb]">
<div className="p-4 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
<div className="flex items-start gap-3">
<input
type="checkbox"
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
name="accepts_tos"
checked={formData.accepts_tos || false}
onChange={handleInputChange}
className="mt-1 w-4 h-4 text-[#664fa3] border-gray-300 rounded focus:ring-[#664fa3]"
className="mt-1 w-4 h-4 text-var(--purple-lavender) border-gray-300 rounded focus:ring-var(--purple-lavender)"
required
data-testid="tos-checkbox"
/>
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
href="/become-a-member/terms-of-service"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
>
Terms of Service
</a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
href="become-a-member/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
>
Privacy Policy
</a>