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

30
src/components/CreateStaffDialog.js
View File

@@ -101,11 +101,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[600px] rounded-2xl">
<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 Staff 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 staff account with direct login access. User will be created immediately.
</DialogDescription>
</DialogHeader>
@@ -114,7 +114,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
<div className="grid gap-6 py-4">
{/* Email */}
<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
@@ -122,7 +122,7 @@ const CreateStaffDialog = ({ 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="staff@example.com"
/>
{errors.email && (
@@ -132,7 +132,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Password */}
<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
@@ -140,7 +140,7 @@ const CreateStaffDialog = ({ 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 && (
@@ -150,14 +150,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* First Name */}
<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 && (
@@ -167,14 +167,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Last Name */}
<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 && (
@@ -184,7 +184,7 @@ const CreateStaffDialog = ({ 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
@@ -192,7 +192,7 @@ const CreateStaffDialog = ({ 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 && (
@@ -202,11 +202,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
{/* Role */}
<div className="grid gap-2">
<Label htmlFor="role" className="text-[#422268]">
<Label htmlFor="role" className="text-var(--purple-ink)">
Role <span className="text-red-500">*</span>
</Label>
<Select value={formData.role} onValueChange={(value) => handleChange('role', value)}>
<SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
<SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -229,7 +229,7 @@ const CreateStaffDialog = ({ 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 ? (