refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming
- 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:
@@ -121,11 +121,11 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<UserPlus className="h-6 w-6" />
|
||||
Create Member
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Create a new member account with direct login access. Member will be created immediately.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@@ -135,7 +135,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
{/* Email & Password Row */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email" className="text-[#422268]">
|
||||
<Label htmlFor="email" className="text-var(--purple-ink)">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
@@ -143,7 +143,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="member@example.com"
|
||||
/>
|
||||
{errors.email && (
|
||||
@@ -152,7 +152,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password" className="text-[#422268]">
|
||||
<Label htmlFor="password" className="text-var(--purple-ink)">
|
||||
Password <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
@@ -160,7 +160,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleChange('password', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="Minimum 8 characters"
|
||||
/>
|
||||
{errors.password && (
|
||||
@@ -172,14 +172,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
{/* Name Row */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="first_name" className="text-[#422268]">
|
||||
<Label htmlFor="first_name" className="text-var(--purple-ink)">
|
||||
First Name <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="first_name"
|
||||
value={formData.first_name}
|
||||
onChange={(e) => handleChange('first_name', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="John"
|
||||
/>
|
||||
{errors.first_name && (
|
||||
@@ -188,14 +188,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="last_name" className="text-[#422268]">
|
||||
<Label htmlFor="last_name" className="text-var(--purple-ink)">
|
||||
Last Name <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="last_name"
|
||||
value={formData.last_name}
|
||||
onChange={(e) => handleChange('last_name', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
{errors.last_name && (
|
||||
@@ -206,7 +206,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
|
||||
{/* Phone */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone" className="text-[#422268]">
|
||||
<Label htmlFor="phone" className="text-var(--purple-ink)">
|
||||
Phone <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
@@ -214,7 +214,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
{errors.phone && (
|
||||
@@ -224,14 +224,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
|
||||
{/* Address */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="address" className="text-[#422268]">
|
||||
<Label htmlFor="address" className="text-var(--purple-ink)">
|
||||
Address
|
||||
</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => handleChange('address', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="123 Main St"
|
||||
/>
|
||||
</div>
|
||||
@@ -239,35 +239,35 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
{/* City, State, Zipcode Row */}
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="city" className="text-[#422268]">City</Label>
|
||||
<Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleChange('city', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="San Francisco"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="state" className="text-[#422268]">State</Label>
|
||||
<Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleChange('state', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="CA"
|
||||
maxLength={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="zipcode" className="text-[#422268]">Zipcode</Label>
|
||||
<Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
|
||||
<Input
|
||||
id="zipcode"
|
||||
value={formData.zipcode}
|
||||
onChange={(e) => handleChange('zipcode', e.target.value)}
|
||||
className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
|
||||
className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
|
||||
placeholder="94102"
|
||||
/>
|
||||
</div>
|
||||
@@ -276,24 +276,24 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
{/* Dates Row */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="date_of_birth" className="text-[#422268]">Date of Birth</Label>
|
||||
<Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
|
||||
<Input
|
||||
id="date_of_birth"
|
||||
type="date"
|
||||
value={formData.date_of_birth}
|
||||
onChange={(e) => handleChange('date_of_birth', e.target.value)}
|
||||
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>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="member_since" className="text-[#422268]">Member Since</Label>
|
||||
<Label htmlFor="member_since" className="text-var(--purple-ink)">Member Since</Label>
|
||||
<Input
|
||||
id="member_since"
|
||||
type="date"
|
||||
value={formData.member_since}
|
||||
onChange={(e) => handleChange('member_since', e.target.value)}
|
||||
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>
|
||||
</div>
|
||||
@@ -311,7 +311,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
|
||||
className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
|
||||
Reference in New Issue
Block a user