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

18
src/components/ChangePasswordDialog.js
View File

@@ -66,17 +66,17 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md bg-white">
<DialogContent className="sm:max-w-md bg-background">
<DialogHeader>
<div className="flex items-center gap-2 mb-2">
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#f1eef9]">
<Lock className="h-5 w-5 text-[#ff9e77]" />
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-var(--lavender-300)">
<Lock className="h-5 w-5 text-var(--orange-light)" />
</div>
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
Change Password
</DialogTitle>
</div>
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Update your password to keep your account secure.
</DialogDescription>
</DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.currentPassword}
onChange={handleInputChange}
placeholder="Enter current password"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.newPassword}
onChange={handleInputChange}
placeholder="Enter new password (min. 6 characters)"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -120,7 +120,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Re-enter new password"
className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
/>
</div>
@@ -136,7 +136,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
<Button
type="submit"
disabled={loading}
className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6 disabled:opacity-50"
className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 disabled:opacity-50"
>
{loading ? 'Changing...' : 'Change Password'}
</Button>