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:
@@ -370,15 +370,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
const Step1Upload = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">Upload WordPress CSV Export</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Upload WordPress CSV Export</h3>
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="p-6 border-2 border-dashed border-[#ddd8eb] bg-[#f9f5ff]">
|
||||
<Card className="p-6 border-2 border-dashed border-var(--neutral-800) bg-var(--lavender-400)">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Upload className="h-12 w-12 text-[#664fa3]" />
|
||||
<Upload className="h-12 w-12 text-var(--purple-lavender)" />
|
||||
<div className="text-center">
|
||||
<Input
|
||||
type="file"
|
||||
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
className="max-w-xs"
|
||||
/>
|
||||
{uploadedFile && (
|
||||
<p className="text-sm text-[#664fa3] mt-2">
|
||||
<p className="text-sm text-var(--purple-lavender) mt-2">
|
||||
Selected: {uploadedFile.name}
|
||||
</p>
|
||||
)}
|
||||
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploading}
|
||||
className="w-full bg-[#664fa3] hover:bg-[#422268]"
|
||||
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
@@ -465,8 +465,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
const Step2FieldMapping = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">Field Mapping</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Field Mapping</h3>
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
WordPress fields have been automatically mapped to LOAF platform fields.
|
||||
</p>
|
||||
</div>
|
||||
@@ -537,20 +537,20 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
const Step3ReviewStatus = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">Review & Adjust User Status</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Review & Adjust User Status</h3>
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
Review suggested status mappings and override as needed before import.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bulk edit toolbar */}
|
||||
<Card className="p-4 bg-[#f9f5ff] border-[#ddd8eb]">
|
||||
<Card className="p-4 bg-var(--lavender-400) border-var(--neutral-800)">
|
||||
<div className="flex items-center gap-4">
|
||||
<Checkbox
|
||||
checked={selectedRows.size === previewData.length && previewData.length > 0}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
/>
|
||||
<span className="text-sm text-[#664fa3] font-medium">
|
||||
<span className="text-sm text-var(--purple-lavender) font-medium">
|
||||
{selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
|
||||
</span>
|
||||
{selectedRows.size > 0 && (
|
||||
@@ -572,13 +572,13 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
{/* Data table */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#664fa3]" />
|
||||
<Loader2 className="h-8 w-8 animate-spin text-var(--purple-lavender)" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-[#f9f5ff]">
|
||||
<TableRow className="bg-var(--lavender-400)">
|
||||
<TableHead className="w-12">
|
||||
<Checkbox checked={false} />
|
||||
</TableHead>
|
||||
@@ -606,7 +606,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
{row.first_name} {row.last_name}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="bg-[#ddd8eb] text-[#422268]">
|
||||
<Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
|
||||
{row.wordpress_roles?.join(', ') || 'N/A'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
Page {currentPage} of {totalPages}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
@@ -689,41 +689,41 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">Import Preview</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Preview</h3>
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
Review the final import settings before execution.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<Card className="p-6">
|
||||
<p className="text-sm text-[#664fa3]">Total Users</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]">{analysisResult?.total_rows}</p>
|
||||
<p className="text-sm text-var(--purple-lavender)">Total Users</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.total_rows}</p>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<p className="text-sm text-[#664fa3]">Status Overrides</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]">{overrideCount}</p>
|
||||
<p className="text-sm text-var(--purple-lavender)">Status Overrides</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)">{overrideCount}</p>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<p className="text-sm text-[#664fa3]">Expected Imports</p>
|
||||
<p className="text-3xl font-semibold text-[#422268]">{analysisResult?.valid_rows}</p>
|
||||
<p className="text-sm text-var(--purple-lavender)">Expected Imports</p>
|
||||
<p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.valid_rows}</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="p-6">
|
||||
<h4 className="font-semibold text-[#422268] mb-4">Import Options</h4>
|
||||
<h4 className="font-semibold text-var(--purple-ink) mb-4">Import Options</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="text-sm text-[#664fa3]">Send password reset emails to all imported users</span>
|
||||
<span className="text-sm text-var(--purple-lavender)">Send password reset emails to all imported users</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="text-sm text-[#664fa3]">Skip rows with errors and continue import</span>
|
||||
<span className="text-sm text-var(--purple-lavender)">Skip rows with errors and continue import</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-5 w-5 text-green-600" />
|
||||
<span className="text-sm text-[#664fa3]">Full rollback capability available after import</span>
|
||||
<span className="text-sm text-var(--purple-lavender)">Full rollback capability available after import</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -748,10 +748,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
const Step5Execute = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
|
||||
{importing ? 'Import in Progress...' : 'Ready to Import'}
|
||||
</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
{importing
|
||||
? 'Please wait while users are imported. This may take a few minutes.'
|
||||
: 'Click "Start Import" to begin importing users.'}
|
||||
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
{importing && (
|
||||
<div className="space-y-4">
|
||||
<Progress value={importProgress} className="w-full" />
|
||||
<p className="text-center text-sm text-[#664fa3]">
|
||||
<p className="text-center text-sm text-var(--purple-lavender)">
|
||||
{importProgress.toFixed(1)}% complete
|
||||
</p>
|
||||
</div>
|
||||
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
{!importing && !importResults && (
|
||||
<Button
|
||||
onClick={handleExecuteImport}
|
||||
className="w-full bg-[#664fa3] hover:bg-[#422268] py-6 text-lg"
|
||||
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink) py-6 text-lg"
|
||||
>
|
||||
<Play className="mr-2 h-5 w-5" />
|
||||
Start Import
|
||||
@@ -786,8 +786,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
const Step6Results = () => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#422268] mb-2">Import Complete</h3>
|
||||
<p className="text-sm text-[#664fa3]">
|
||||
<h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Complete</h3>
|
||||
<p className="text-sm text-var(--purple-lavender)">
|
||||
Review the import results and download error reports if needed.
|
||||
</p>
|
||||
</div>
|
||||
@@ -850,11 +850,11 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<div className="p-3 bg-red-100 rounded-full">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<DialogTitle className="text-2xl font-semibold text-[#422268]">
|
||||
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
|
||||
Confirm Rollback
|
||||
</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription className="text-[#664fa3]">
|
||||
<DialogDescription className="text-var(--purple-lavender)">
|
||||
This will permanently delete{' '}
|
||||
<strong>{importResults?.successful_rows} users</strong> that were imported.
|
||||
This action cannot be undone.
|
||||
@@ -898,10 +898,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold text-[#422268]">
|
||||
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
|
||||
WordPress Import Wizard
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-[#664fa3]">
|
||||
<DialogDescription className="text-var(--purple-lavender)">
|
||||
Import WordPress users with interactive status review and full rollback capability
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<div
|
||||
className={`
|
||||
w-10 h-10 rounded-full flex items-center justify-center
|
||||
${isCurrent ? 'bg-[#664fa3] text-white' : ''}
|
||||
${isCurrent ? 'bg-var(--purple-lavender) text-white' : ''}
|
||||
${isCompleted ? 'bg-green-600 text-white' : ''}
|
||||
${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
|
||||
`}
|
||||
@@ -930,7 +930,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<StepIcon className="h-5 w-5" />
|
||||
)}
|
||||
</div>
|
||||
<p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-[#422268]' : 'text-gray-600'}`}>
|
||||
<p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-var(--purple-ink)' : 'text-gray-600'}`}>
|
||||
{step.title}
|
||||
</p>
|
||||
</div>
|
||||
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
<Button
|
||||
onClick={handleNext}
|
||||
disabled={!canProceed()}
|
||||
className="bg-[#664fa3] hover:bg-[#422268]"
|
||||
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="h-4 w-4 ml-2" />
|
||||
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
|
||||
onOpenChange(false);
|
||||
if (onSuccess) onSuccess();
|
||||
}}
|
||||
className="bg-[#664fa3] hover:bg-[#422268]"
|
||||
className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user