paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(branding): comprehensive sweep — replace remaining primary-* legacy colors with accent tokens

Browse Source
This commit is contained in:
Luca
2026-05-06 01:16:52 +02:00
parent fc2bce3a01
commit 578a1745b8
64 changed files with 211 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/admin/AdminGuestDetail.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export const AdminGuestDetail: React.FC<AdminGuestDetailProps> = ({ eventId, gue
onClick={() => setTab(k)} onClick={() => setTab(k)}
className={`px-3 py-2 text-sm font-medium border-b-2 transition ${ className={`px-3 py-2 text-sm font-medium border-b-2 transition ${
tab === k tab === k
? 'border-primary-500 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100' : 'border-transparent text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100'
}`} }`}
> >
frontend/src/components/admin/AdminGuestsList.tsx
+3 -3
View File
@@ -245,7 +245,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
type="checkbox" type="checkbox"
checked={mergeSelection.includes(guest.id)} checked={mergeSelection.includes(guest.id)}
onChange={() => toggleMergeSelection(guest.id)} onChange={() => toggleMergeSelection(guest.id)}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent rounded focus:ring-primary-500"
/> />
</td> </td>
)} )}
@@ -278,7 +278,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
<button <button
type="button" type="button"
onClick={() => setSelectedGuest(guest)} onClick={() => setSelectedGuest(guest)}
className="p-1 text-neutral-500 hover:text-primary-600" className="p-1 text-neutral-500 hover:text-accent"
title={t('admin.guests.view', 'View details')} title={t('admin.guests.view', 'View details')}
> >
<Eye className="w-4 h-4" /> <Eye className="w-4 h-4" />
@@ -286,7 +286,7 @@ export const AdminGuestsList: React.FC<AdminGuestsListProps> = ({ eventId, event
<div className="relative group"> <div className="relative group">
<button <button
type="button" type="button"
className="p-1 text-neutral-500 hover:text-primary-600" className="p-1 text-neutral-500 hover:text-accent"
title={t('admin.guests.export', 'Export')} title={t('admin.guests.export', 'Export')}
> >
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
frontend/src/components/admin/AdminHeader.tsx
+4 -4
View File
@@ -149,7 +149,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
{unreadCount > 0 && ( {unreadCount > 0 && (
<button <button
onClick={() => markAllAsReadMutation.mutate()} onClick={() => markAllAsReadMutation.mutate()}
className="text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 flex items-center gap-1" className="text-xs text-accent hover:opacity-80 flex items-center gap-1"
title={t('admin.markAllRead')} title={t('admin.markAllRead')}
> >
<CheckCircle className="w-3 h-3" /> <CheckCircle className="w-3 h-3" />
@@ -178,7 +178,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
<div <div
key={notification.id} key={notification.id}
className={`px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer border-l-4 ${ className={`px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer border-l-4 ${
notification.isRead ? 'border-transparent opacity-75' : 'border-primary-500' notification.isRead ? 'border-transparent opacity-75' : 'border-accent-dark'
}`} }`}
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
@@ -203,7 +203,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
<div className="px-4 py-2 border-t border-neutral-100 dark:border-neutral-700 text-center"> <div className="px-4 py-2 border-t border-neutral-100 dark:border-neutral-700 text-center">
<button <button
onClick={() => setShowNotifications(false)} onClick={() => setShowNotifications(false)}
className="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300" className="text-sm text-accent hover:opacity-80"
> >
{t('admin.close')} {t('admin.close')}
</button> </button>
@@ -223,7 +223,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{user?.username}</p> <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{user?.username}</p>
<p className="text-xs text-neutral-500 dark:text-neutral-400">{user?.email}</p> <p className="text-xs text-neutral-500 dark:text-neutral-400">{user?.email}</p>
</div> </div>
<div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-accent-dark rounded-full flex items-center justify-center">
<User className="w-5 h-5 text-white" /> <User className="w-5 h-5 text-white" />
</div> </div>
</button> </button>
frontend/src/components/admin/AdminLayout.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const AdminLayout: React.FC = () => {
return ( return (
<div className="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center"> <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950 flex items-center justify-center">
<div className="text-center"> <div className="text-center">
<div className="w-16 h-16 border-4 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div> <div className="w-16 h-16 border-4 border-accent-dark border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
<p className="text-neutral-600">Loading...</p> <p className="text-neutral-600">Loading...</p>
</div> </div>
</div> </div>
frontend/src/components/admin/AdminPhotoGrid.tsx
+2 -2
View File
@@ -284,7 +284,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
> >
<div className={`w-6 h-6 rounded border-2 flex items-center justify-center ${ <div className={`w-6 h-6 rounded border-2 flex items-center justify-center ${
selectedPhotos.has(photo.id) selectedPhotos.has(photo.id)
? 'bg-primary-600 border-primary-600' ? 'bg-accent-dark border-accent-dark'
: 'bg-white/90 border-white' : 'bg-white/90 border-white'
}`}> }`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />} {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
@@ -419,7 +419,7 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
)} )}
{commentCount > 0 && ( {commentCount > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${commentCount} comments`}> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${commentCount} comments`}>
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-neutral-700">{commentCount}</span> <span className="text-xs font-medium text-neutral-700">{commentCount}</span>
</div> </div>
)} )}
frontend/src/components/admin/AdminPhotoViewer.tsx
+2 -2
View File
@@ -266,7 +266,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
</span> </span>
<button <button
onClick={() => setShowCategoryMenu(!showCategoryMenu)} onClick={() => setShowCategoryMenu(!showCategoryMenu)}
className="text-xs text-primary-400 hover:text-primary-300" className="text-xs text-accent hover:text-accent-dark"
> >
Change Change
</button> </button>
@@ -393,7 +393,7 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
<div className="space-y-2"> <div className="space-y-2">
<button <button
onClick={() => setExpandedComments(!expandedComments)} onClick={() => setExpandedComments(!expandedComments)}
className="text-xs text-primary-400 hover:text-primary-300 mb-2" className="text-xs text-accent hover:text-accent-dark mb-2"
> >
{expandedComments ? 'Hide' : 'Show'} Comments ({comments.length}) {expandedComments ? 'Hide' : 'Show'} Comments ({comments.length})
</button> </button>
frontend/src/components/admin/AdminSidebar.tsx
+1 -1
View File
@@ -141,7 +141,7 @@ const StorageInfo: React.FC = () => {
? Math.round((storageInfo.total_used / limitInUse) * 100) ? Math.round((storageInfo.total_used / limitInUse) * 100)
: 0; : 0;
const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse; const isOverSoftLimit = limitInUse && storageInfo.total_used >= limitInUse;
const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-primary-600'; const progressBarClass = isOverSoftLimit ? 'bg-red-600' : 'bg-accent-dark';
const containerClass = isOverSoftLimit const containerClass = isOverSoftLimit
? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800' ? 'bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800'
: 'bg-neutral-100 dark:bg-neutral-800'; : 'bg-neutral-100 dark:bg-neutral-800';
frontend/src/components/admin/BackupConfiguration.jsx
+1 -1
View File
@@ -184,7 +184,7 @@ export const BackupConfiguration = ({ config, onSave, isSaving }) => {
onClick={() => handleChange('backup_destination_type', type.id)} onClick={() => handleChange('backup_destination_type', type.id)}
className={`p-4 rounded-lg border-2 transition-all ${ className={`p-4 rounded-lg border-2 transition-all ${
formData.backup_destination_type === type.id formData.backup_destination_type === type.id
? 'border-primary bg-primary-50 dark:bg-primary-900/30' ? 'border-primary bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
frontend/src/components/admin/BackupHistory.jsx
+1 -1
View File
@@ -385,7 +385,7 @@ export const BackupHistory = () => {
onClick={() => setCurrentPage(pageNum)} onClick={() => setCurrentPage(pageNum)}
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${ className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
currentPage === pageNum currentPage === pageNum
? 'z-10 bg-primary-50 dark:bg-primary-900/30 border-primary text-primary' ? 'z-10 bg-accent-dark/15 border-primary text-primary'
: 'bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700' : 'bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700'
}`} }`}
> >
frontend/src/components/admin/BulkCategoryModal.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export const BulkCategoryModal: React.FC<BulkCategoryModalProps> = ({
id="category-select" id="category-select"
value={selectedCategoryId ?? ''} value={selectedCategoryId ?? ''}
onChange={(e) => setSelectedCategoryId(e.target.value === '' ? null : Number(e.target.value))} onChange={(e) => setSelectedCategoryId(e.target.value === '' ? null : Number(e.target.value))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
disabled={isLoading} disabled={isLoading}
> >
<option value="">{t('photos.uncategorized', 'Uncategorized')}</option> <option value="">{t('photos.uncategorized', 'Uncategorized')}</option>
frontend/src/components/admin/CMSEditor.tsx
+4 -4
View File
@@ -145,7 +145,7 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
disabled={disabled} disabled={disabled}
className={`p-2 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${ className={`p-2 rounded hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors ${
active active
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-700 dark:text-neutral-200'
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
title={title} title={title}
@@ -179,7 +179,7 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
const viewModeChipClass = (mode: typeof viewMode) => const viewModeChipClass = (mode: typeof viewMode) =>
`px-3 py-1.5 text-sm font-medium rounded transition-colors ${ `px-3 py-1.5 text-sm font-medium rounded transition-colors ${
viewMode === mode viewMode === mode
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700'
}`; }`;
@@ -428,14 +428,14 @@ export const CMSEditor: React.FC<CMSEditorProps> = ({ content, onChange, onSave,
{/* Link Dialog */} {/* Link Dialog */}
{showLinkDialog && ( {showLinkDialog && (
<div className="p-3 bg-primary-50 dark:bg-primary-900/30 border-b border-primary-200 dark:border-primary-800 flex items-center gap-2"> <div className="p-3 bg-accent-dark/15 border-b border-accent-dark/30 flex items-center gap-2">
<input <input
type="url" type="url"
value={linkUrl} value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)} onChange={(e) => setLinkUrl(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addLink()} onKeyPress={(e) => e.key === 'Enter' && addLink()}
placeholder="Enter URL..." placeholder="Enter URL..."
className="flex-1 px-3 py-1 border border-primary-300 dark:border-primary-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500" className="flex-1 px-3 py-1 border border-accent-dark/30 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
autoFocus autoFocus
/> />
<Button size="sm" onClick={addLink}>Add Link</Button> <Button size="sm" onClick={addLink}>Add Link</Button>
frontend/src/components/admin/CategoryManager.tsx
+2 -2
View File
@@ -93,7 +93,7 @@ export const CategoryManager: React.FC = () => {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex justify-center items-center py-8"> <div className="flex justify-center items-center py-8">
<Loader2 className="w-6 h-6 animate-spin text-primary-600" /> <Loader2 className="w-6 h-6 animate-spin text-accent" />
</div> </div>
); );
} }
@@ -205,7 +205,7 @@ export const CategoryManager: React.FC = () => {
<div className="flex gap-1"> <div className="flex gap-1">
<button <button
onClick={() => startEdit(category)} onClick={() => startEdit(category)}
className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded transition-colors" className="p-1.5 text-neutral-600 dark:text-neutral-400 hover:text-accent dark:hover:text-accent hover:bg-accent-dark/15 rounded transition-colors"
title={t('common.edit')} title={t('common.edit')}
> >
<Edit2 className="w-4 h-4" /> <Edit2 className="w-4 h-4" />
frontend/src/components/admin/CssTemplateEditor.tsx
+4 -4
View File
@@ -108,7 +108,7 @@ export const CssTemplateEditor: React.FC = () => {
onClick={() => setActiveSlot(slot)} onClick={() => setActiveSlot(slot)}
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${ className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
activeSlot === slot activeSlot === slot
? 'border-primary-600 text-primary-600' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -138,7 +138,7 @@ export const CssTemplateEditor: React.FC = () => {
value={activeTemplate.name} value={activeTemplate.name}
onChange={(e) => updateLocalTemplate({ name: e.target.value })} onChange={(e) => updateLocalTemplate({ name: e.target.value })}
maxLength={50} maxLength={50}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
/> />
</div> </div>
@@ -149,7 +149,7 @@ export const CssTemplateEditor: React.FC = () => {
type="checkbox" type="checkbox"
checked={activeTemplate.is_enabled} checked={activeTemplate.is_enabled}
onChange={(e) => updateLocalTemplate({ is_enabled: e.target.checked })} onChange={(e) => updateLocalTemplate({ is_enabled: e.target.checked })}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 text-accent focus:ring-primary-500"
/> />
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300"> <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('cssTemplates.enableTemplate', 'Enable this template')} {t('cssTemplates.enableTemplate', 'Enable this template')}
@@ -169,7 +169,7 @@ export const CssTemplateEditor: React.FC = () => {
<textarea <textarea
value={activeTemplate.css_content} value={activeTemplate.css_content}
onChange={(e) => updateLocalTemplate({ css_content: e.target.value })} onChange={(e) => updateLocalTemplate({ css_content: e.target.value })}
className="w-full h-96 px-4 py-3 font-mono text-sm border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-neutral-900 text-green-400" className="w-full h-96 px-4 py-3 font-mono text-sm border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark bg-neutral-900 text-green-400"
spellCheck={false} spellCheck={false}
placeholder="/* Enter your custom CSS here */" placeholder="/* Enter your custom CSS here */"
/> />
frontend/src/components/admin/EmailPreviewModal.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const EmailPreviewModal: React.FC<EmailPreviewModalProps> = ({
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700"> <div className="flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Mail className="w-6 h-6 text-primary-600" /> <Mail className="w-6 h-6 text-accent" />
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Email Preview</h2> <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">Email Preview</h2>
</div> </div>
<button <button
frontend/src/components/admin/EmailTemplateEditor.tsx
+6 -6
View File
@@ -146,7 +146,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
disabled={disabled} disabled={disabled}
className={`p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-600 transition-colors ${ className={`p-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-600 transition-colors ${
active active
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'text-neutral-700 dark:text-neutral-300' : 'text-neutral-700 dark:text-neutral-300'
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
title={title} title={title}
@@ -304,7 +304,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
onClick={() => setShowVariables(!showVariables)} onClick={() => setShowVariables(!showVariables)}
className={`flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${ className={`flex items-center gap-1 px-2 py-1 text-xs font-medium rounded transition-colors ${
showVariables showVariables
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600' : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600'
}`} }`}
type="button" type="button"
@@ -322,7 +322,7 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
className="w-full text-left px-3 py-1.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors" className="w-full text-left px-3 py-1.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
type="button" type="button"
> >
<code className="text-primary-600 dark:text-primary-400">{`{{${variable}}}`}</code> <code className="text-accent">{`{{${variable}}}`}</code>
</button> </button>
))} ))}
</div> </div>
@@ -348,19 +348,19 @@ export const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({
{/* Link Dialog */} {/* Link Dialog */}
{showLinkDialog && ( {showLinkDialog && (
<div className="p-3 bg-primary-50 dark:bg-primary-900/20 border-b border-primary-200 dark:border-primary-800 flex items-center gap-2"> <div className="p-3 bg-accent-dark/15 border-b border-accent-dark/30 flex items-center gap-2">
<input <input
type="url" type="url"
value={linkUrl} value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)} onChange={(e) => setLinkUrl(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && addLink()} onKeyDown={(e) => e.key === 'Enter' && addLink()}
placeholder={t('email.editor.enterUrl')} placeholder={t('email.editor.enterUrl')}
className="flex-1 px-3 py-1 text-sm border border-primary-300 dark:border-primary-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500" className="flex-1 px-3 py-1 text-sm border border-accent-dark/30 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md focus:ring-2 focus:ring-primary-500"
autoFocus autoFocus
/> />
<button <button
onClick={addLink} onClick={addLink}
className="px-3 py-1 text-sm bg-accent-dark text-white rounded-md hover:bg-primary-700" className="px-3 py-1 text-sm bg-accent-dark text-white rounded-md hover:opacity-90"
type="button" type="button"
> >
{t('email.editor.addLink')} {t('email.editor.addLink')}
frontend/src/components/admin/EventCategoryManager.tsx
+7 -7
View File
@@ -102,7 +102,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex justify-center items-center py-4"> <div className="flex justify-center items-center py-4">
<Loader2 className="w-5 h-5 animate-spin text-primary-600" /> <Loader2 className="w-5 h-5 animate-spin text-accent" />
</div> </div>
); );
} }
@@ -185,7 +185,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
{/* Hero photo thumbnail */} {/* Hero photo thumbnail */}
<button <button
onClick={() => setHeroPickerCategoryId(category.id)} onClick={() => setHeroPickerCategoryId(category.id)}
className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center" className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-accent-dark transition-colors flex items-center justify-center"
title={t('categories.setCoverPhoto')} title={t('categories.setCoverPhoto')}
> >
{heroPhoto ? ( {heroPhoto ? (
@@ -195,7 +195,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : category.hero_photo_id ? ( ) : category.hero_photo_id ? (
<ImageIcon className="w-4 h-4 text-primary-400" /> <ImageIcon className="w-4 h-4 text-accent" />
) : ( ) : (
<ImageIcon className="w-4 h-4 text-neutral-300" /> <ImageIcon className="w-4 h-4 text-neutral-300" />
)} )}
@@ -234,7 +234,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
<div key={cat.id} className="flex items-center gap-3 px-3 py-2 bg-neutral-50 dark:bg-neutral-800 rounded-md"> <div key={cat.id} className="flex items-center gap-3 px-3 py-2 bg-neutral-50 dark:bg-neutral-800 rounded-md">
<button <button
onClick={() => setHeroPickerCategoryId(cat.id)} onClick={() => setHeroPickerCategoryId(cat.id)}
className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-primary-400 transition-colors flex items-center justify-center" className="flex-shrink-0 w-10 h-10 rounded border border-neutral-200 dark:border-neutral-700 overflow-hidden bg-neutral-100 dark:bg-neutral-700 hover:border-accent-dark transition-colors flex items-center justify-center"
title={t('categories.setCoverPhoto')} title={t('categories.setCoverPhoto')}
> >
{heroPhoto ? ( {heroPhoto ? (
@@ -244,7 +244,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : cat.hero_photo_id ? ( ) : cat.hero_photo_id ? (
<ImageIcon className="w-4 h-4 text-primary-400" /> <ImageIcon className="w-4 h-4 text-accent" />
) : ( ) : (
<ImageIcon className="w-4 h-4 text-neutral-300" /> <ImageIcon className="w-4 h-4 text-neutral-300" />
)} )}
@@ -288,7 +288,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
onClick={() => handleSelectHeroPhoto(heroPickerCategoryId, photo.id)} onClick={() => handleSelectHeroPhoto(heroPickerCategoryId, photo.id)}
className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${ className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
isSelected isSelected
? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2' ? 'border-accent-dark ring-2 ring-primary-500 ring-offset-2'
: 'border-transparent hover:border-neutral-300' : 'border-transparent hover:border-neutral-300'
}`} }`}
> >
@@ -300,7 +300,7 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
/> />
</div> </div>
{isSelected && ( {isSelected && (
<div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1"> <div className="absolute top-2 right-2 bg-accent-dark/150 text-white rounded-full p-1">
<Check className="w-4 h-4" /> <Check className="w-4 h-4" />
</div> </div>
)} )}
frontend/src/components/admin/EventRenameDialog.tsx
+2 -2
View File
@@ -198,7 +198,7 @@ export const EventRenameDialog: React.FC<EventRenameDialogProps> = ({
// Renaming in progress // Renaming in progress
<div className="space-y-4 py-8"> <div className="space-y-4 py-8">
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<Loader2 className="w-10 h-10 text-primary-600 animate-spin" /> <Loader2 className="w-10 h-10 text-accent animate-spin" />
<p className="text-neutral-700 font-medium">{renameStatus}</p> <p className="text-neutral-700 font-medium">{renameStatus}</p>
</div> </div>
</div> </div>
@@ -258,7 +258,7 @@ export const EventRenameDialog: React.FC<EventRenameDialogProps> = ({
type="checkbox" type="checkbox"
checked={resendEmail} checked={resendEmail}
onChange={(e) => setResendEmail(e.target.checked)} onChange={(e) => setResendEmail(e.target.checked)}
className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500" className="mt-1 w-4 h-4 text-accent border-neutral-300 rounded focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-700 flex items-center gap-1"> <span className="text-sm font-medium text-neutral-700 flex items-center gap-1">
frontend/src/components/admin/FeedbackModerationPanel.tsx
+2 -2
View File
@@ -191,7 +191,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
{pendingComments.length > maxItems && !showAll && ( {pendingComments.length > maxItems && !showAll && (
<button <button
onClick={() => setShowAll(true)} onClick={() => setShowAll(true)}
className="w-full text-center py-2 text-sm text-primary-600 hover:text-primary-700 font-medium" className="w-full text-center py-2 text-sm text-accent hover:opacity-80 font-medium"
> >
{t('feedback.showAll', 'Show all {{count}} pending comments', { count: pendingComments.length })} {t('feedback.showAll', 'Show all {{count}} pending comments', { count: pendingComments.length })}
</button> </button>
@@ -203,7 +203,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
<div className="mt-4 pt-4 border-t border-neutral-200"> <div className="mt-4 pt-4 border-t border-neutral-200">
<a <a
href={`/admin/events/${eventId}/feedback`} href={`/admin/events/${eventId}/feedback`}
className="text-sm text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1" className="text-sm text-accent hover:opacity-80 font-medium flex items-center gap-1"
> >
<MessageSquare className="w-4 h-4" /> <MessageSquare className="w-4 h-4" />
{t('feedback.viewAllFeedback', 'View all feedback & settings')} {t('feedback.viewAllFeedback', 'View all feedback & settings')}
frontend/src/components/admin/FeedbackSettings.tsx
+15 -15
View File
@@ -61,7 +61,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.feedback_enabled} checked={settings.feedback_enabled}
onChange={() => handleToggle('feedback_enabled')} onChange={() => handleToggle('feedback_enabled')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300"> <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('feedback.settings.enableFeedback', 'Enable feedback')} {t('feedback.settings.enableFeedback', 'Enable feedback')}
@@ -80,7 +80,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
<label <label
className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${ className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${
(settings.identity_mode || 'simple') === 'simple' (settings.identity_mode || 'simple') === 'simple'
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' ? 'border-accent-dark bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800' : 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800'
}`} }`}
> >
@@ -90,7 +90,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
value="simple" value="simple"
checked={(settings.identity_mode || 'simple') === 'simple'} checked={(settings.identity_mode || 'simple') === 'simple'}
onChange={() => onChange({ ...settings, identity_mode: 'simple' })} onChange={() => onChange({ ...settings, identity_mode: 'simple' })}
className="mt-0.5 w-4 h-4 text-primary-600 focus:ring-primary-500" className="mt-0.5 w-4 h-4 text-accent focus:ring-primary-500"
/> />
<User className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" /> <User className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -109,7 +109,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
<label <label
className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${ className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition ${
settings.identity_mode === 'guest' settings.identity_mode === 'guest'
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' ? 'border-accent-dark bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800' : 'border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800'
}`} }`}
> >
@@ -119,7 +119,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
value="guest" value="guest"
checked={settings.identity_mode === 'guest'} checked={settings.identity_mode === 'guest'}
onChange={() => onChange({ ...settings, identity_mode: 'guest' })} onChange={() => onChange({ ...settings, identity_mode: 'guest' })}
className="mt-0.5 w-4 h-4 text-primary-600 focus:ring-primary-500" className="mt-0.5 w-4 h-4 text-accent focus:ring-primary-500"
/> />
<Users className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" /> <Users className="w-5 h-5 mt-0.5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -150,7 +150,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.allow_ratings} checked={settings.allow_ratings}
onChange={() => handleToggle('allow_ratings')} onChange={() => handleToggle('allow_ratings')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<Star className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <Star className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -168,7 +168,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.allow_likes} checked={settings.allow_likes}
onChange={() => handleToggle('allow_likes')} onChange={() => handleToggle('allow_likes')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<Heart className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <Heart className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -186,7 +186,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.allow_comments} checked={settings.allow_comments}
onChange={() => handleToggle('allow_comments')} onChange={() => handleToggle('allow_comments')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<MessageSquare className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <MessageSquare className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -204,7 +204,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.allow_favorites} checked={settings.allow_favorites}
onChange={() => handleToggle('allow_favorites')} onChange={() => handleToggle('allow_favorites')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<Bookmark className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <Bookmark className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -232,7 +232,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.require_name_email} checked={settings.require_name_email}
onChange={() => handleToggle('require_name_email')} onChange={() => handleToggle('require_name_email')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<div className="flex-1"> <div className="flex-1">
<div className="text-sm font-medium text-neutral-900 dark:text-neutral-100"> <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -250,7 +250,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
checked={settings.moderate_comments} checked={settings.moderate_comments}
onChange={() => handleToggle('moderate_comments')} onChange={() => handleToggle('moderate_comments')}
disabled={!settings.allow_comments} disabled={!settings.allow_comments}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 disabled:opacity-50" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 disabled:opacity-50"
/> />
<Shield className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <Shield className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -268,7 +268,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.show_feedback_to_guests} checked={settings.show_feedback_to_guests}
onChange={() => handleToggle('show_feedback_to_guests')} onChange={() => handleToggle('show_feedback_to_guests')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<Eye className="w-5 h-5 text-neutral-600 dark:text-neutral-400" /> <Eye className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
<div className="flex-1"> <div className="flex-1">
@@ -292,7 +292,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
type="checkbox" type="checkbox"
checked={settings.enable_rate_limiting} checked={settings.enable_rate_limiting}
onChange={() => handleToggle('enable_rate_limiting')} onChange={() => handleToggle('enable_rate_limiting')}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500"
/> />
<div className="flex-1"> <div className="flex-1">
<div className="text-sm font-medium text-neutral-900 dark:text-neutral-100"> <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -316,7 +316,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
max="60" max="60"
value={settings.rate_limit_window_minutes || 15} value={settings.rate_limit_window_minutes || 15}
onChange={(e) => handleNumberChange('rate_limit_window_minutes', e.target.value)} onChange={(e) => handleNumberChange('rate_limit_window_minutes', e.target.value)}
className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-accent-dark"
/> />
</div> </div>
<div> <div>
@@ -329,7 +329,7 @@ export const FeedbackSettings: React.FC<FeedbackSettingsProps> = ({
max="100" max="100"
value={settings.rate_limit_max_requests || 10} value={settings.rate_limit_max_requests || 10}
onChange={(e) => handleNumberChange('rate_limit_max_requests', e.target.value)} onChange={(e) => handleNumberChange('rate_limit_max_requests', e.target.value)}
className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-1.5 text-sm border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-primary-500 focus:border-accent-dark"
/> />
</div> </div>
</div> </div>
frontend/src/components/admin/FocalPointPicker.tsx
+1 -1
View File
@@ -102,7 +102,7 @@ export const FocalPointPicker: React.FC<FocalPointPickerProps> = ({
onClick={() => onChange(p.value)} onClick={() => onChange(p.value)}
className={ className={
keywordToPercent(currentValue) === p.value keywordToPercent(currentValue) === p.value
? 'bg-primary-50 border-primary-300 text-primary-700' ? 'bg-accent-dark/15 border-accent-dark/30 text-accent-dark'
: '' : ''
} }
> >
frontend/src/components/admin/GalleryPreview.tsx
+1 -1
View File
@@ -166,7 +166,7 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
</div> </div>
<div className="flex justify-center gap-1 mt-3"> <div className="flex justify-center gap-1 mt-3">
{[0, 1, 2, 3].map((idx) => ( {[0, 1, 2, 3].map((idx) => (
<div key={idx} className={`w-2 h-2 rounded-full ${idx === 0 ? 'bg-primary-600' : 'bg-neutral-300'}`} /> <div key={idx} className={`w-2 h-2 rounded-full ${idx === 0 ? 'bg-accent-dark' : 'bg-neutral-300'}`} />
))} ))}
</div> </div>
</div> </div>
frontend/src/components/admin/GuestInviteDialog.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ export const GuestInviteDialog: React.FC<GuestInviteDialogProps> = ({ eventId, o
<button <button
type="button" type="button"
onClick={() => copy(invite)} onClick={() => copy(invite)}
className="p-1.5 text-neutral-500 hover:text-primary-600" className="p-1.5 text-neutral-500 hover:text-accent"
title={t('admin.guests.copyLink', 'Copy link')} title={t('admin.guests.copyLink', 'Copy link')}
> >
{copiedId === invite.id ? ( {copiedId === invite.id ? (
frontend/src/components/admin/GuestSelectionsAggregate.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export const GuestSelectionsAggregate: React.FC<GuestSelectionsAggregateProps> =
alt={p.filename} alt={p.filename}
className="w-full aspect-square object-cover rounded" className="w-full aspect-square object-cover rounded"
/> />
<div className="absolute top-2 right-2 bg-primary-600 text-white text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1 shadow"> <div className="absolute top-2 right-2 bg-accent-dark text-white text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1 shadow">
<Users className="w-3 h-3" /> <Users className="w-3 h-3" />
{p.picker_count} {p.picker_count}
</div> </div>
frontend/src/components/admin/HeroPhotoSelector.tsx
+2 -2
View File
@@ -132,7 +132,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
onClick={() => handleSelect(photo.id)} onClick={() => handleSelect(photo.id)}
className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${ className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
photo.id === selectedPhotoId photo.id === selectedPhotoId
? 'border-primary-500 ring-2 ring-primary-500 ring-offset-2' ? 'border-accent-dark ring-2 ring-primary-500 ring-offset-2'
: 'border-transparent hover:border-neutral-300' : 'border-transparent hover:border-neutral-300'
}`} }`}
> >
@@ -144,7 +144,7 @@ export const HeroPhotoSelector: React.FC<HeroPhotoSelectorProps> = ({
/> />
</div> </div>
{photo.id === selectedPhotoId && ( {photo.id === selectedPhotoId && (
<div className="absolute top-2 right-2 bg-primary-500 text-white rounded-full p-1"> <div className="absolute top-2 right-2 bg-accent-dark/150 text-white rounded-full p-1">
<Check className="w-4 h-4" /> <Check className="w-4 h-4" />
</div> </div>
)} )}
frontend/src/components/admin/PasswordResetModal.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ export const PasswordResetModal: React.FC<PasswordResetModalProps> = ({
type="checkbox" type="checkbox"
checked={sendEmail} checked={sendEmail}
onChange={(e) => setSendEmail(e.target.checked)} onChange={(e) => setSendEmail(e.target.checked)}
className="w-4 h-4 text-primary-600 bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 focus:ring-2" className="w-4 h-4 text-accent bg-neutral-100 border-neutral-300 rounded focus:ring-primary-500 focus:ring-2"
/> />
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
frontend/src/components/admin/PhotoExportMenu.tsx
+1 -1
View File
@@ -126,7 +126,7 @@ export const PhotoExportMenu: React.FC<PhotoExportMenuProps> = ({
)} )}
{t('export.button', 'Export')} {t('export.button', 'Export')}
{hasSelection && ( {hasSelection && (
<span className="bg-primary-100 text-primary-700 text-xs px-2 py-0.5 rounded-full"> <span className="bg-accent-dark/15 text-accent-dark text-xs px-2 py-0.5 rounded-full">
{selectedPhotoIds.length} {selectedPhotoIds.length}
</span> </span>
)} )}
frontend/src/components/admin/PhotoFilterPanel.tsx
+4 -4
View File
@@ -85,7 +85,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
<select <select
value={filters.minRating ?? ''} value={filters.minRating ?? ''}
onChange={(e) => handleRatingChange(e.target.value === '' ? null : parseFloat(e.target.value))} onChange={(e) => handleRatingChange(e.target.value === '' ? null : parseFloat(e.target.value))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
disabled={isLoading} disabled={isLoading}
> >
{RATING_OPTIONS.map(option => ( {RATING_OPTIONS.map(option => (
@@ -103,7 +103,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
type="checkbox" type="checkbox"
checked={filters.hasLikes || false} checked={filters.hasLikes || false}
onChange={() => handleCheckboxChange('hasLikes')} onChange={() => handleCheckboxChange('hasLikes')}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 text-accent focus:ring-primary-500"
disabled={isLoading} disabled={isLoading}
/> />
<Heart className="w-4 h-4 text-red-500" /> <Heart className="w-4 h-4 text-red-500" />
@@ -120,7 +120,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
type="checkbox" type="checkbox"
checked={filters.hasFavorites || false} checked={filters.hasFavorites || false}
onChange={() => handleCheckboxChange('hasFavorites')} onChange={() => handleCheckboxChange('hasFavorites')}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 text-accent focus:ring-primary-500"
disabled={isLoading} disabled={isLoading}
/> />
<Bookmark className="w-4 h-4 text-yellow-500" /> <Bookmark className="w-4 h-4 text-yellow-500" />
@@ -137,7 +137,7 @@ export const PhotoFilterPanel: React.FC<PhotoFilterPanelProps> = ({
type="checkbox" type="checkbox"
checked={filters.hasComments || false} checked={filters.hasComments || false}
onChange={() => handleCheckboxChange('hasComments')} onChange={() => handleCheckboxChange('hasComments')}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 text-accent focus:ring-primary-500"
disabled={isLoading} disabled={isLoading}
/> />
<MessageCircle className="w-4 h-4 text-blue-500" /> <MessageCircle className="w-4 h-4 text-blue-500" />
frontend/src/components/admin/PhotoFilters.tsx
+3 -3
View File
@@ -60,7 +60,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
const numeric = Number(raw); const numeric = Number(raw);
onCategoryChange(Number.isNaN(numeric) ? raw : numeric); onCategoryChange(Number.isNaN(numeric) ? raw : numeric);
}} }}
className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="">{t('gallery.allCategories', 'All Categories')}</option> <option value="">{t('gallery.allCategories', 'All Categories')}</option>
<option value="0">{t('gallery.uncategorized', 'Uncategorized')}</option> <option value="0">{t('gallery.uncategorized', 'Uncategorized')}</option>
@@ -78,7 +78,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
<select <select
value={mediaType} value={mediaType}
onChange={(e) => onMediaTypeChange(e.target.value as 'all' | 'photo' | 'video')} onChange={(e) => onMediaTypeChange(e.target.value as 'all' | 'photo' | 'video')}
className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="all">{t('gallery.allMedia', 'All media')}</option> <option value="all">{t('gallery.allMedia', 'All media')}</option>
<option value="photo">{t('gallery.photosOnly', 'Photos only')}</option> <option value="photo">{t('gallery.photosOnly', 'Photos only')}</option>
@@ -92,7 +92,7 @@ export const PhotoFilters: React.FC<PhotoFiltersProps> = ({
<select <select
value={sortBy} value={sortBy}
onChange={(e) => onSortChange(e.target.value as 'date' | 'name' | 'size' | 'rating', sortOrder)} onChange={(e) => onSortChange(e.target.value as 'date' | 'name' | 'size' | 'rating', sortOrder)}
className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="date">{t('gallery.sortByDate', 'Sort by Date')}</option> <option value="date">{t('gallery.sortByDate', 'Sort by Date')}</option>
<option value="name">{t('gallery.sortByName', 'Sort by Name')}</option> <option value="name">{t('gallery.sortByName', 'Sort by Name')}</option>
frontend/src/components/admin/PhotoUpload.tsx
+4 -4
View File
@@ -342,7 +342,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
id="replace-by-name" id="replace-by-name"
checked={replaceByName} checked={replaceByName}
onChange={(e) => setReplaceByName(e.target.checked)} onChange={(e) => setReplaceByName(e.target.checked)}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 text-accent focus:ring-primary-500"
/> />
<label htmlFor="replace-by-name" className="text-sm text-neutral-700 dark:text-neutral-300"> <label htmlFor="replace-by-name" className="text-sm text-neutral-700 dark:text-neutral-300">
{t('upload.replaceByName', 'Replace existing photos with same name')} {t('upload.replaceByName', 'Replace existing photos with same name')}
@@ -353,8 +353,8 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
<div <div
className={clsx( className={clsx(
"border-2 border-dashed rounded-lg p-8 text-center transition-colors", "border-2 border-dashed rounded-lg p-8 text-center transition-colors",
"hover:border-primary-400 hover:bg-primary-50/50", "hover:border-accent-dark hover:bg-accent-dark/15",
selectedFiles.length > 0 ? "border-primary-400 bg-primary-50/30 dark:bg-primary-900/20" : "border-neutral-300 dark:border-neutral-600" selectedFiles.length > 0 ? "border-accent-dark bg-accent-dark/15" : "border-neutral-300 dark:border-neutral-600"
)} )}
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
> >
@@ -496,7 +496,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
</div> </div>
<div className="w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-2"> <div className="w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-2">
<div <div
className="bg-primary-600 h-2 rounded-full transition-all duration-300" className="bg-accent-dark h-2 rounded-full transition-all duration-300"
style={{ width: `${uploadProgress}%` }} style={{ width: `${uploadProgress}%` }}
/> />
</div> </div>
frontend/src/components/admin/RestoreWizard.jsx
+5 -5
View File
@@ -196,7 +196,7 @@ export const RestoreWizard = () => {
onClick={() => setRestoreData(prev => ({ ...prev, source: 'local' }))} onClick={() => setRestoreData(prev => ({ ...prev, source: 'local' }))}
className={`p-6 rounded-lg border-2 transition-all ${ className={`p-6 rounded-lg border-2 transition-all ${
restoreData.source === 'local' restoreData.source === 'local'
? 'border-primary bg-primary-50 dark:bg-primary-900/30' ? 'border-primary bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
@@ -211,7 +211,7 @@ export const RestoreWizard = () => {
onClick={() => setRestoreData(prev => ({ ...prev, source: 's3' }))} onClick={() => setRestoreData(prev => ({ ...prev, source: 's3' }))}
className={`p-6 rounded-lg border-2 transition-all ${ className={`p-6 rounded-lg border-2 transition-all ${
restoreData.source === 's3' restoreData.source === 's3'
? 'border-primary bg-primary-50 dark:bg-primary-900/30' ? 'border-primary bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
@@ -226,7 +226,7 @@ export const RestoreWizard = () => {
onClick={() => setRestoreData(prev => ({ ...prev, source: 'upload' }))} onClick={() => setRestoreData(prev => ({ ...prev, source: 'upload' }))}
className={`p-6 rounded-lg border-2 transition-all ${ className={`p-6 rounded-lg border-2 transition-all ${
restoreData.source === 'upload' restoreData.source === 'upload'
? 'border-primary bg-primary-50 dark:bg-primary-900/30' ? 'border-primary bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
@@ -312,7 +312,7 @@ export const RestoreWizard = () => {
key={backup.id} key={backup.id}
className={`p-4 cursor-pointer transition-all ${ className={`p-4 cursor-pointer transition-all ${
restoreData.selectedBackup?.id === backup.id restoreData.selectedBackup?.id === backup.id
? 'ring-2 ring-primary bg-primary-50 dark:bg-primary-900/30' ? 'ring-2 ring-primary bg-accent-dark/15'
: 'hover:shadow-md' : 'hover:shadow-md'
}`} }`}
onClick={() => setRestoreData(prev => ({ ...prev, selectedBackup: backup }))} onClick={() => setRestoreData(prev => ({ ...prev, selectedBackup: backup }))}
@@ -388,7 +388,7 @@ export const RestoreWizard = () => {
onClick={() => setRestoreData(prev => ({ ...prev, restoreType: type.id }))} onClick={() => setRestoreData(prev => ({ ...prev, restoreType: type.id }))}
className={`p-4 rounded-lg border-2 text-left transition-all ${ className={`p-4 rounded-lg border-2 text-left transition-all ${
restoreData.restoreType === type.id restoreData.restoreType === type.id
? 'border-primary bg-primary-50 dark:bg-primary-900/30' ? 'border-primary bg-accent-dark/15'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
frontend/src/components/admin/ThemeCustomizer.tsx
+3 -3
View File
@@ -100,14 +100,14 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
onClick={() => handlePresetSelect(key)} onClick={() => handlePresetSelect(key)}
className={`relative p-4 rounded-lg border-2 transition-all ${ className={`relative p-4 rounded-lg border-2 transition-all ${
selectedPreset === key selectedPreset === key
? 'border-primary-600 bg-primary-50' ? 'tile-selected'
: 'border-neutral-200 hover:border-neutral-300' : 'border-neutral-200 hover:border-neutral-300'
}`} }`}
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className="font-medium text-sm">{theme.name}</span> <span className="font-medium text-sm">{theme.name}</span>
{selectedPreset === key && ( {selectedPreset === key && (
<Check className="w-4 h-4 text-primary-600" /> <Check className="w-4 h-4 text-accent" />
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -247,7 +247,7 @@ export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
onClick={() => handleChange('borderRadius', radius)} onClick={() => handleChange('borderRadius', radius)}
className={`px-4 py-2 rounded-lg border-2 transition-all ${ className={`px-4 py-2 rounded-lg border-2 transition-all ${
localTheme.borderRadius === radius localTheme.borderRadius === radius
? 'border-primary-600 bg-primary-50' ? 'tile-selected'
: 'border-neutral-200 hover:border-neutral-300' : 'border-neutral-200 hover:border-neutral-300'
}`} }`}
> >
frontend/src/components/admin/ThemeEditorModal.tsx
+2 -2
View File
@@ -169,7 +169,7 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
onClick={() => setPreviewLayout(layout)} onClick={() => setPreviewLayout(layout)}
className={`relative p-3 rounded-lg border-2 transition-all ${ className={`relative p-3 rounded-lg border-2 transition-all ${
(previewLayout || theme.galleryLayout || 'grid') === layout (previewLayout || theme.galleryLayout || 'grid') === layout
? 'border-primary-600 bg-primary-50 dark:bg-primary-900/40' ? 'tile-selected'
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 bg-white dark:bg-neutral-900' : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 bg-white dark:bg-neutral-900'
}`} }`}
> >
@@ -185,7 +185,7 @@ export const ThemeEditorModal: React.FC<ThemeEditorModalProps> = ({
</span> </span>
</div> </div>
{(previewLayout || theme.galleryLayout || 'grid') === layout && ( {(previewLayout || theme.galleryLayout || 'grid') === layout && (
<Check className="absolute top-1 right-1 w-3 h-3 text-primary-600" /> <Check className="absolute top-1 right-1 w-3 h-3 text-accent" />
)} )}
</button> </button>
))} ))}
frontend/src/components/admin/WelcomeMessageEditor.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const WelcomeMessageEditor: React.FC<WelcomeMessageEditorProps> = ({
onChange={handleChange} onChange={handleChange}
placeholder={placeholder} placeholder={placeholder}
rows={rows} rows={rows}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none font-mono text-sm" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark transition-colors resize-none font-mono text-sm"
/> />
<div className="absolute top-2 right-2 text-neutral-400" title="Line breaks will be preserved in emails"> <div className="absolute top-2 right-2 text-neutral-400" title="Line breaks will be preserved in emails">
<HelpCircle className="w-4 h-4" aria-hidden="true" /> <HelpCircle className="w-4 h-4" aria-hidden="true" />
frontend/src/components/admin/WordFilterManager.tsx
+1 -1
View File
@@ -300,7 +300,7 @@ export const WordFilterManager: React.FC = () => {
type="checkbox" type="checkbox"
checked={filter.is_active} checked={filter.is_active}
onChange={() => handleToggleActive(filter)} onChange={() => handleToggleActive(filter)}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent rounded focus:ring-primary-500"
/> />
<span className="font-medium text-neutral-900 dark:text-neutral-100">{filter.word}</span> <span className="font-medium text-neutral-900 dark:text-neutral-100">{filter.word}</span>
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getSeverityBadgeClass(filter.severity)}`}> <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${getSeverityBadgeClass(filter.severity)}`}>
frontend/src/components/common/LanguageSelector.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ export const LanguageSelector: React.FC = () => {
onClick={() => handleLanguageChange(language.code)} onClick={() => handleLanguageChange(language.code)}
className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center gap-3 ${ className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-700 flex items-center gap-3 ${
language.code === i18n.language language.code === i18n.language
? 'text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30' ? 'text-accent bg-accent-dark/15'
: 'text-neutral-700 dark:text-neutral-300' : 'text-neutral-700 dark:text-neutral-300'
}`} }`}
> >
frontend/src/components/common/Loading.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export const Loading: React.FC<LoadingProps> = ({
const content = ( const content = (
<div className={clsx('flex flex-col items-center justify-center', className)}> <div className={clsx('flex flex-col items-center justify-center', className)}>
<Loader2 className={clsx('animate-spin text-primary-600', sizeStyles[size])} /> <Loader2 className={clsx('animate-spin text-accent', sizeStyles[size])} />
{text && ( {text && (
<p className="mt-4 text-sm text-neutral-600">{text}</p> <p className="mt-4 text-sm text-neutral-600">{text}</p>
)} )}
frontend/src/components/common/SkipLink.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export const SkipLink: React.FC = () => {
return ( return (
<a <a
href="#main-content" href="#main-content"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary-600 text-white px-4 py-2 rounded-lg z-50 focus:outline-none focus:ring-2 focus:ring-primary-700" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-accent-dark text-white px-4 py-2 rounded-lg z-50 focus:outline-none focus:ring-2 focus:ring-primary-700"
> >
Skip to main content Skip to main content
</a> </a>
frontend/src/components/gallery/DownloadProgress.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ export const DownloadProgress: React.FC<DownloadProgressProps> = ({
<div className="fixed bottom-4 right-4 bg-surface rounded-lg shadow-lg border border-surface p-4 min-w-[300px] z-50"> <div className="fixed bottom-4 right-4 bg-surface rounded-lg shadow-lg border border-surface p-4 min-w-[300px] z-50">
<div className="flex items-start justify-between mb-2"> <div className="flex items-start justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Download className="w-5 h-5 text-primary-600 animate-bounce" /> <Download className="w-5 h-5 text-accent animate-bounce" />
<div> <div>
<p className="text-sm font-medium text-theme">{t('download.downloading')}</p> <p className="text-sm font-medium text-theme">{t('download.downloading')}</p>
{fileName && ( {fileName && (
@@ -43,7 +43,7 @@ export const DownloadProgress: React.FC<DownloadProgressProps> = ({
<div className="w-full bg-black/10 rounded-full h-2"> <div className="w-full bg-black/10 rounded-full h-2">
<div <div
className="bg-primary-600 h-2 rounded-full transition-all duration-300" className="bg-accent-dark h-2 rounded-full transition-all duration-300"
style={{ width: `${progress}%` }} style={{ width: `${progress}%` }}
/> />
</div> </div>
frontend/src/components/gallery/GalleryFilter.tsx
+3 -3
View File
@@ -168,7 +168,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
<Heart className="w-3 h-3 sm:w-4 sm:h-4" /> <Heart className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.liked', 'Liked')}</span> <span className="hidden sm:inline">{t('gallery.liked', 'Liked')}</span>
{likeCount > 0 && ( {likeCount > 0 && (
<span className="bg-primary-100 text-primary-700 px-1.5 rounded"> <span className="bg-accent-dark/15 text-accent-dark px-1.5 rounded">
{likeCount} {likeCount}
</span> </span>
)} )}
@@ -183,7 +183,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
<Bookmark className="w-3 h-3 sm:w-4 sm:h-4" /> <Bookmark className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.favorited', 'Saved')}</span> <span className="hidden sm:inline">{t('gallery.favorited', 'Saved')}</span>
{favoriteCount > 0 && ( {favoriteCount > 0 && (
<span className="bg-primary-100 text-primary-700 px-1.5 rounded"> <span className="bg-accent-dark/15 text-accent-dark px-1.5 rounded">
{favoriteCount} {favoriteCount}
</span> </span>
)} )}
@@ -198,7 +198,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
<Star className="w-3 h-3 sm:w-4 sm:h-4" /> <Star className="w-3 h-3 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">{t('gallery.rated', 'Rated')}</span> <span className="hidden sm:inline">{t('gallery.rated', 'Rated')}</span>
{ratedCount > 0 && ( {ratedCount > 0 && (
<span className="bg-primary-100 text-primary-700 px-1.5 rounded"> <span className="bg-accent-dark/15 text-accent-dark px-1.5 rounded">
{ratedCount} {ratedCount}
</span> </span>
)} )}
frontend/src/components/gallery/PhotoComments.tsx
+1 -1
View File
@@ -179,7 +179,7 @@ export const PhotoComments: React.FC<PhotoCommentsProps> = ({
value={commentText} value={commentText}
onChange={(e) => setCommentText(e.target.value)} onChange={(e) => setCommentText(e.target.value)}
placeholder={t('feedback.writeComment', 'Write a comment...')} placeholder={t('feedback.writeComment', 'Write a comment...')}
className={`w-full px-3 py-2 text-sm border rounded-lg resize-vertical min-h-[100px] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 ${ className={`w-full px-3 py-2 text-sm border rounded-lg resize-vertical min-h-[100px] focus:ring-2 focus:ring-primary-500 focus:border-accent-dark ${
errors.comment_text ? 'border-red-500' : 'border-surface' errors.comment_text ? 'border-red-500' : 'border-surface'
}`} }`}
rows={4} rows={4}
frontend/src/components/gallery/PhotoGrid.tsx
+2 -2
View File
@@ -298,7 +298,7 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
<div className="absolute top-2 left-2 flex gap-1 z-10"> <div className="absolute top-2 left-2 flex gap-1 z-10">
{(photo.comment_count ?? 0) > 0 && ( {(photo.comment_count ?? 0) > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}>
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-muted-theme">{photo.comment_count ?? 0}</span> <span className="text-xs font-medium text-muted-theme">{photo.comment_count ?? 0}</span>
</div> </div>
)} )}
@@ -341,7 +341,7 @@ const PhotoThumbnail: React.FC<PhotoThumbnailProps> = ({
{/* Selection checkbox - Larger on mobile for easier tapping */} {/* Selection checkbox - Larger on mobile for easier tapping */}
{isSelectionMode && ( {isSelectionMode && (
<div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100'} transition-opacity`}> <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 sm:opacity-0 sm:group-hover:opacity-100'} transition-opacity`}>
<div className={`w-7 h-7 sm:w-6 sm:h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-7 h-7 sm:w-6 sm:h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
{isSelected && <Check className="w-4 h-4 text-white" />} {isSelected && <Check className="w-4 h-4 text-white" />}
</div> </div>
</div> </div>
frontend/src/components/gallery/PhotoLightbox.tsx
+1 -1
View File
@@ -677,7 +677,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
> >
<MessageSquare className="w-5 h-5 text-white" /> <MessageSquare className="w-5 h-5 text-white" />
{((currentPhoto.comment_count ?? 0) > 0 || (currentPhoto.average_rating ?? 0) > 0) && ( {((currentPhoto.comment_count ?? 0) > 0 || (currentPhoto.average_rating ?? 0) > 0) && (
<span className="absolute -top-1 -right-1 bg-primary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"> <span className="absolute -top-1 -right-1 bg-accent-dark/150 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
{(currentPhoto.comment_count ?? 0) > 0 ? currentPhoto.comment_count ?? 0 : '★'} {(currentPhoto.comment_count ?? 0) > 0 ? currentPhoto.comment_count ?? 0 : '★'}
</span> </span>
)} )}
frontend/src/components/gallery/UserPhotoUpload.tsx
+2 -2
View File
@@ -157,7 +157,7 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
{/* Upload Area */} {/* Upload Area */}
<div className="mb-4 sm:mb-6"> <div className="mb-4 sm:mb-6">
<label className="block"> <label className="block">
<div className="border-2 border-dashed border-surface rounded-lg p-6 sm:p-8 text-center hover:border-primary-500 transition-colors cursor-pointer"> <div className="border-2 border-dashed border-surface rounded-lg p-6 sm:p-8 text-center hover:border-accent-dark transition-colors cursor-pointer">
<Upload className="w-10 h-10 sm:w-12 sm:h-12 text-neutral-400 mx-auto mb-3" /> <Upload className="w-10 h-10 sm:w-12 sm:h-12 text-neutral-400 mx-auto mb-3" />
<p className="text-sm font-medium text-muted-theme mb-1"> <p className="text-sm font-medium text-muted-theme mb-1">
{t('upload.clickToUpload')} {t('upload.clickToUpload')}
@@ -210,7 +210,7 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
<div className="w-20"> <div className="w-20">
<div className="bg-neutral-200 rounded-full h-2"> <div className="bg-neutral-200 rounded-full h-2">
<div <div
className="bg-primary-600 h-2 rounded-full transition-all" className="bg-accent-dark h-2 rounded-full transition-all"
style={{ width: `${uploadProgress[file.name]}%` }} style={{ width: `${uploadProgress[file.name]}%` }}
/> />
</div> </div>
frontend/src/components/gallery/layouts/GridGalleryLayout.tsx
+2 -2
View File
@@ -321,7 +321,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
className={`absolute top-2 right-2 z-20 transition-opacity ${checkboxVisibilityClass} md:group-hover:opacity-100`} className={`absolute top-2 right-2 z-20 transition-opacity ${checkboxVisibilityClass} md:group-hover:opacity-100`}
onClick={(e) => { e.stopPropagation(); onToggleSelect(); }} onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{isSelected && <Check className="w-4 h-4 text-white" />} {isSelected && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
@@ -341,7 +341,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
)} )}
{commentCount > 0 && ( {commentCount > 0 && (
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented"> <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
</span> </span>
)} )}
</div> </div>
frontend/src/components/gallery/layouts/JustifiedGalleryLayout.tsx
+2 -2
View File
@@ -370,7 +370,7 @@ const JustifiedPhoto: React.FC<JustifiedPhotoProps> = ({
> >
<div <div
className={`w-6 h-6 rounded-full border-2 ${ className={`w-6 h-6 rounded-full border-2 ${
isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white' isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'
} flex items-center justify-center transition-colors`} } flex items-center justify-center transition-colors`}
> >
{isSelected && <Check className="w-4 h-4 text-white" />} {isSelected && <Check className="w-4 h-4 text-white" />}
@@ -403,7 +403,7 @@ const JustifiedPhoto: React.FC<JustifiedPhotoProps> = ({
className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm"
title="Commented" title="Commented"
> >
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
</span> </span>
)} )}
</div> </div>
frontend/src/components/gallery/layouts/MasonryGalleryLayout.tsx
+8 -8
View File
@@ -102,7 +102,7 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
<div className="absolute top-2 left-2 flex gap-1 z-10"> <div className="absolute top-2 left-2 flex gap-1 z-10">
{(photo.comment_count ?? 0) > 0 && ( {(photo.comment_count ?? 0) > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count ?? 0} comments`}>
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span> <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
</div> </div>
)} )}
@@ -245,7 +245,7 @@ const MasonryPhoto: React.FC<MasonryPhotoProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onToggleSelect(); }} onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{isSelected && <Check className="w-4 h-4 text-white" />} {isSelected && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
@@ -486,7 +486,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<div className="absolute top-2 left-2 flex gap-1 z-10"> <div className="absolute top-2 left-2 flex gap-1 z-10">
{(photo.comment_count ?? 0) > 0 && ( {(photo.comment_count ?? 0) > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1"> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span> <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
</div> </div>
)} )}
@@ -542,7 +542,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }} onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />} {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
@@ -602,7 +602,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<div className="absolute top-2 left-2 flex gap-1 z-10"> <div className="absolute top-2 left-2 flex gap-1 z-10">
{(photo.comment_count ?? 0) > 0 && ( {(photo.comment_count ?? 0) > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1"> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span> <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
</div> </div>
)} )}
@@ -658,7 +658,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }} onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />} {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
@@ -727,7 +727,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
<div className="absolute top-2 left-2 flex gap-1 z-10"> <div className="absolute top-2 left-2 flex gap-1 z-10">
{(photo.comment_count ?? 0) > 0 && ( {(photo.comment_count ?? 0) > 0 && (
<div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1"> <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1">
<MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" /> <MessageSquare className="w-3.5 h-3.5 text-accent" fill="currentColor" />
<span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span> <span className="text-xs font-medium text-neutral-700">{photo.comment_count ?? 0}</span>
</div> </div>
)} )}
@@ -783,7 +783,7 @@ export const MasonryGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }} onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />} {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx
+1 -1
View File
@@ -180,7 +180,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onToggleSelect(); }} onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{isSelected && <Check className="w-4 h-4 text-white" />} {isSelected && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
frontend/src/components/gallery/layouts/TimelineGalleryLayout.tsx
+3 -3
View File
@@ -86,8 +86,8 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
{/* Date marker */} {/* Date marker */}
{showDates && ( {showDates && (
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-4 mb-6">
<div className="hidden lg:flex items-center justify-center w-16 h-16 bg-white border-4 border-primary-600 rounded-full z-10"> <div className="hidden lg:flex items-center justify-center w-16 h-16 bg-white border-4 border-accent-dark rounded-full z-10">
<Calendar className="w-6 h-6 text-primary-600" /> <Calendar className="w-6 h-6 text-accent" />
</div> </div>
<h3 className="text-xl font-semibold text-theme"> <h3 className="text-xl font-semibold text-theme">
{group.label} {group.label}
@@ -218,7 +218,7 @@ export const TimelineGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
}`} }`}
onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }} onClick={(e) => { e.stopPropagation(); onPhotoSelect && onPhotoSelect(photo.id); }}
> >
<div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}> <div className={`w-6 h-6 rounded-full border-2 ${selectedPhotos.has(photo.id) ? 'bg-accent-dark border-accent-dark' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
{selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />} {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
</div> </div>
</button> </button>
frontend/src/pages/admin/AdminDashboard.tsx
+1 -1
View File
@@ -225,7 +225,7 @@ export const AdminDashboard: React.FC = () => {
{expiringTotal > 5 && ( {expiringTotal > 5 && (
<button <button
onClick={() => navigate('/admin/events?filter=expiring')} onClick={() => navigate('/admin/events?filter=expiring')}
className="w-full mt-4 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium" className="w-full mt-4 text-sm text-accent hover:opacity-80 font-medium"
> >
{t('admin.viewAllExpiringEvents', { count: expiringTotal })} → {t('admin.viewAllExpiringEvents', { count: expiringTotal })} →
</button> </button>
frontend/src/pages/admin/AdminLoginPage.tsx
+1 -1
View File
@@ -203,7 +203,7 @@ export const AdminLoginPage: React.FC = () => {
<label className="flex items-center"> <label className="flex items-center">
<input <input
type="checkbox" type="checkbox"
className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 rounded focus:ring-primary-500"
/> />
<span className="ml-2 text-sm text-neutral-700">{t('adminLogin.rememberMe')}</span> <span className="ml-2 text-sm text-neutral-700">{t('adminLogin.rememberMe')}</span>
</label> </label>
frontend/src/pages/admin/AnalyticsPage.tsx
+1 -1
View File
@@ -454,7 +454,7 @@ export const AnalyticsPage: React.FC = () => {
? 'bg-red-600' ? 'bg-red-600'
: usagePercent >= 90 : usagePercent >= 90
? 'bg-amber-500' ? 'bg-amber-500'
: 'bg-primary-600'; : 'bg-accent-dark';
const limitDescriptor = storageInfo const limitDescriptor = storageInfo
? storageInfo.soft_limit_configured ? storageInfo.soft_limit_configured
? t('admin.storageSoftLimitConfigured', { limit: limitDisplay }) ? t('admin.storageSoftLimitConfigured', { limit: limitDisplay })
frontend/src/pages/admin/ArchivesPage.tsx
+3 -3
View File
@@ -150,7 +150,7 @@ export const ArchivesPage: React.FC = () => {
<p className="text-sm text-neutral-600 dark:text-neutral-400">{t('archives.totalArchives')}</p> <p className="text-sm text-neutral-600 dark:text-neutral-400">{t('archives.totalArchives')}</p>
<p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">{archives.length}</p> <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">{archives.length}</p>
</div> </div>
<Archive className="w-8 h-8 text-primary-600" /> <Archive className="w-8 h-8 text-accent" />
</div> </div>
</Card> </Card>
@@ -212,7 +212,7 @@ export const ArchivesPage: React.FC = () => {
<select <select
value={filterType} value={filterType}
onChange={(e) => setFilterType(e.target.value)} onChange={(e) => setFilterType(e.target.value)}
className="px-4 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="px-4 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="all">{t('archives.allTypes')}</option> <option value="all">{t('archives.allTypes')}</option>
<option value="wedding">{t('archives.wedding')}</option> <option value="wedding">{t('archives.wedding')}</option>
@@ -225,7 +225,7 @@ export const ArchivesPage: React.FC = () => {
<select <select
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)} onChange={(e) => setSortBy(e.target.value as any)}
className="px-4 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="px-4 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="date">{t('archives.sortByDate')}</option> <option value="date">{t('archives.sortByDate')}</option>
<option value="name">{t('archives.sortByName')}</option> <option value="name">{t('archives.sortByName')}</option>
frontend/src/pages/admin/BackupManagement.jsx
+1 -1
View File
@@ -197,7 +197,7 @@ export const BackupManagement = () => {
className={` className={`
py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2
${activeTab === tab.id ${activeTab === tab.id
? 'border-primary-600 dark:border-primary-400 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600'
} }
`} `}
frontend/src/pages/admin/BrandingPage.tsx
+5 -5
View File
@@ -527,7 +527,7 @@ export const BrandingPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={brandingSettings.logo_display_header !== false} checked={brandingSettings.logo_display_header !== false}
onChange={(e) => handleBrandingChange('logo_display_header', e.target.checked)} onChange={(e) => handleBrandingChange('logo_display_header', e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100"> <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -544,7 +544,7 @@ export const BrandingPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={brandingSettings.logo_display_hero !== false} checked={brandingSettings.logo_display_hero !== false}
onChange={(e) => handleBrandingChange('logo_display_hero', e.target.checked)} onChange={(e) => handleBrandingChange('logo_display_hero', e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100"> <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -567,7 +567,7 @@ export const BrandingPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={brandingSettings.hide_powered_by === true} checked={brandingSettings.hide_powered_by === true}
onChange={(e) => handleBrandingChange('hide_powered_by', e.target.checked)} onChange={(e) => handleBrandingChange('hide_powered_by', e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100"> <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
@@ -586,7 +586,7 @@ export const BrandingPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={brandingSettings.watermark_enabled} checked={brandingSettings.watermark_enabled}
onChange={(e) => handleBrandingChange('watermark_enabled', e.target.checked)} onChange={(e) => handleBrandingChange('watermark_enabled', e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{t('branding.enableWatermarks')}</span> <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{t('branding.enableWatermarks')}</span>
@@ -748,7 +748,7 @@ export const BrandingPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={isPreviewMode} checked={isPreviewMode}
onChange={(e) => setIsPreviewMode(e.target.checked)} onChange={(e) => setIsPreviewMode(e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('branding.applyLivePreview')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('branding.applyLivePreview')}</span>
</label> </label>
frontend/src/pages/admin/CMSPage.tsx
+12 -12
View File
@@ -381,7 +381,7 @@ export const CMSPage: React.FC = () => {
<Card className="space-y-6"> <Card className="space-y-6">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div> <div>
<div className="flex items-center gap-2 text-primary-600 mb-1"> <div className="flex items-center gap-2 text-accent mb-1">
<Globe className="w-5 h-5" /> <Globe className="w-5 h-5" />
<span className="text-sm font-semibold uppercase tracking-wide">{t('settings.publicSite.badge')}</span> <span className="text-sm font-semibold uppercase tracking-wide">{t('settings.publicSite.badge')}</span>
</div> </div>
@@ -398,7 +398,7 @@ export const CMSPage: React.FC = () => {
<span <span
aria-hidden="true" aria-hidden="true"
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
publicSiteEnabled ? 'bg-primary-600' : 'bg-neutral-300' publicSiteEnabled ? 'bg-accent-dark' : 'bg-neutral-300'
}`} }`}
> >
<span <span
@@ -422,11 +422,11 @@ export const CMSPage: React.FC = () => {
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2"> <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2">
<Sparkles className="w-4 h-4 text-primary-500" /> <Sparkles className="w-4 h-4 text-accent" />
{t('settings.publicSite.htmlLabel')} {t('settings.publicSite.htmlLabel')}
</label> </label>
<textarea <textarea
className="w-full h-64 font-mono text-sm rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 dark:disabled:bg-neutral-700 disabled:text-neutral-500 dark:disabled:text-neutral-400" className="w-full h-64 font-mono text-sm rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-accent-dark disabled:bg-neutral-100 dark:disabled:bg-neutral-700 disabled:text-neutral-500 dark:disabled:text-neutral-400"
value={publicSiteHtml} value={publicSiteHtml}
onChange={(event) => setPublicSiteHtml(event.target.value)} onChange={(event) => setPublicSiteHtml(event.target.value)}
disabled={!publicSiteEnabled} disabled={!publicSiteEnabled}
@@ -439,11 +439,11 @@ export const CMSPage: React.FC = () => {
<div> <div>
<label className="flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2"> <label className="flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-neutral-200 mb-2">
<ShieldCheck className="w-4 h-4 text-primary-500" /> <ShieldCheck className="w-4 h-4 text-accent" />
{t('settings.publicSite.cssLabel')} {t('settings.publicSite.cssLabel')}
</label> </label>
<textarea <textarea
className="w-full h-48 font-mono text-sm rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-neutral-100 dark:disabled:bg-neutral-700 disabled:text-neutral-500 dark:disabled:text-neutral-400" className="w-full h-48 font-mono text-sm rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-accent-dark disabled:bg-neutral-100 dark:disabled:bg-neutral-700 disabled:text-neutral-500 dark:disabled:text-neutral-400"
value={publicSiteCss} value={publicSiteCss}
onChange={(event) => setPublicSiteCss(event.target.value)} onChange={(event) => setPublicSiteCss(event.target.value)}
disabled={!publicSiteEnabled} disabled={!publicSiteEnabled}
@@ -525,7 +525,7 @@ export const CMSPage: React.FC = () => {
}} }}
className={`w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 ${ className={`w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 ${
selectedPage === page.slug selectedPage === page.slug
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 border border-primary-300 dark:border-primary-700' ? 'bg-accent-dark/15 text-accent-dark border border-accent-dark/30'
: 'bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100' : 'bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100'
}`} }`}
> >
@@ -554,7 +554,7 @@ export const CMSPage: React.FC = () => {
href={`${window.location.origin}/${selectedPage}?lang=en`} href={`${window.location.origin}/${selectedPage}?lang=en`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center gap-2 text-primary-600 hover:text-primary-700" className="flex items-center gap-2 text-accent hover:opacity-80"
> >
<Globe className="w-4 h-4" /> <Globe className="w-4 h-4" />
{t('cms.englishVersion')} {t('cms.englishVersion')}
@@ -563,7 +563,7 @@ export const CMSPage: React.FC = () => {
href={`${window.location.origin}/${selectedPage}?lang=de`} href={`${window.location.origin}/${selectedPage}?lang=de`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center gap-2 text-primary-600 hover:text-primary-700" className="flex items-center gap-2 text-accent hover:opacity-80"
> >
<Globe className="w-4 h-4" /> <Globe className="w-4 h-4" />
{t('cms.germanVersion')} {t('cms.germanVersion')}
@@ -612,7 +612,7 @@ export const CMSPage: React.FC = () => {
onClick={() => setEditingLang('en')} onClick={() => setEditingLang('en')}
className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
editingLang === 'en' editingLang === 'en'
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600' : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600'
}`} }`}
> >
@@ -622,7 +622,7 @@ export const CMSPage: React.FC = () => {
onClick={() => setEditingLang('de')} onClick={() => setEditingLang('de')}
className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
editingLang === 'de' editingLang === 'de'
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600' : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600'
}`} }`}
> >
@@ -637,7 +637,7 @@ export const CMSPage: React.FC = () => {
<label className="flex items-start gap-3 cursor-pointer"> <label className="flex items-start gap-3 cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="mt-1 h-4 w-4 rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="mt-1 h-4 w-4 rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
checked={!!editForm.use_external_url} checked={!!editForm.use_external_url}
onChange={(e) => handleUseExternalUrlChange(e.target.checked)} onChange={(e) => handleUseExternalUrlChange(e.target.checked)}
/> />
frontend/src/pages/admin/CreateEventPage.tsx
+8 -8
View File
@@ -497,7 +497,7 @@ export const CreateEventPage: React.FC = () => {
onClick={() => setFormData({ ...formData, event_type: type.value })} onClick={() => setFormData({ ...formData, event_type: type.value })}
className={`p-4 rounded-lg border-2 transition-all ${ className={`p-4 rounded-lg border-2 transition-all ${
formData.event_type === type.value formData.event_type === type.value
? 'border-primary-600 bg-primary-50 dark:bg-primary-900/30' ? 'tile-selected'
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -627,7 +627,7 @@ export const CreateEventPage: React.FC = () => {
onClick={() => setFormData({ ...formData, css_template_id: null })} onClick={() => setFormData({ ...formData, css_template_id: null })}
className={`p-4 rounded-lg border-2 transition-all text-left ${ className={`p-4 rounded-lg border-2 transition-all text-left ${
formData.css_template_id === null formData.css_template_id === null
? 'border-primary-600 bg-primary-50 dark:bg-primary-900/30' ? 'tile-selected'
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -645,7 +645,7 @@ export const CreateEventPage: React.FC = () => {
onClick={() => setFormData({ ...formData, css_template_id: template.id })} onClick={() => setFormData({ ...formData, css_template_id: template.id })}
className={`p-4 rounded-lg border-2 transition-all text-left ${ className={`p-4 rounded-lg border-2 transition-all text-left ${
formData.css_template_id === template.id formData.css_template_id === template.id
? 'border-primary-600 bg-primary-50 dark:bg-primary-900/30' ? 'tile-selected'
: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -724,7 +724,7 @@ export const CreateEventPage: React.FC = () => {
setFormData(prev => ({ ...prev, admin_email: email })); setFormData(prev => ({ ...prev, admin_email: email }));
} }
}} }}
className="text-xs px-2 py-1 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="text-xs px-2 py-1 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="">{t('events.adminEmailCustom', 'Custom email')}</option> <option value="">{t('events.adminEmailCustom', 'Custom email')}</option>
{activeAdmins.map(a => ( {activeAdmins.map(a => (
@@ -741,7 +741,7 @@ export const CreateEventPage: React.FC = () => {
<label className="flex items-start gap-2"> <label className="flex items-start gap-2">
<input <input
type="checkbox" type="checkbox"
className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
checked={formData.require_password} checked={formData.require_password}
onChange={(e) => { onChange={(e) => {
const checked = e.target.checked; const checked = e.target.checked;
@@ -892,7 +892,7 @@ export const CreateEventPage: React.FC = () => {
<select <select
value={formData.default_photo_sort} value={formData.default_photo_sort}
onChange={(e) => setFormData({ ...formData, default_photo_sort: e.target.value })} onChange={(e) => setFormData({ ...formData, default_photo_sort: e.target.value })}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="upload_date_desc">{t('photoSort.uploadDateNewest', 'Upload Date (Newest First)')}</option> <option value="upload_date_desc">{t('photoSort.uploadDateNewest', 'Upload Date (Newest First)')}</option>
<option value="upload_date_asc">{t('photoSort.uploadDateOldest', 'Upload Date (Oldest First)')}</option> <option value="upload_date_asc">{t('photoSort.uploadDateOldest', 'Upload Date (Oldest First)')}</option>
@@ -908,7 +908,7 @@ export const CreateEventPage: React.FC = () => {
<label className="flex items-start gap-2"> <label className="flex items-start gap-2">
<input <input
type="checkbox" type="checkbox"
className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
checked={formData.client_access_enabled} checked={formData.client_access_enabled}
onChange={(e) => setFormData(prev => ({ onChange={(e) => setFormData(prev => ({
...prev, ...prev,
@@ -948,7 +948,7 @@ export const CreateEventPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={formData.allow_user_uploads} checked={formData.allow_user_uploads}
onChange={(e) => setFormData({ ...formData, allow_user_uploads: e.target.checked })} onChange={(e) => setFormData({ ...formData, allow_user_uploads: e.target.checked })}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<div> <div>
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300"> <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
frontend/src/pages/admin/EmailConfigPage.tsx
+6 -6
View File
@@ -353,7 +353,7 @@ export const EmailConfigPage: React.FC = () => {
onClick={() => setActiveTab('smtp')} onClick={() => setActiveTab('smtp')}
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${ className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
activeTab === 'smtp' activeTab === 'smtp'
? 'border-primary-600 text-primary-600' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
}`} }`}
> >
@@ -363,7 +363,7 @@ export const EmailConfigPage: React.FC = () => {
onClick={() => setActiveTab('templates')} onClick={() => setActiveTab('templates')}
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${ className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
activeTab === 'templates' activeTab === 'templates'
? 'border-primary-600 text-primary-600' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
}`} }`}
> >
@@ -412,7 +412,7 @@ export const EmailConfigPage: React.FC = () => {
<select <select
value={smtpConfig.smtp_secure ? 'ssl' : 'tls'} value={smtpConfig.smtp_secure ? 'ssl' : 'tls'}
onChange={(e) => setSmtpConfig(prev => ({ ...prev, smtp_secure: e.target.value === 'ssl' }))} onChange={(e) => setSmtpConfig(prev => ({ ...prev, smtp_secure: e.target.value === 'ssl' }))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="tls">TLS</option> <option value="tls">TLS</option>
<option value="ssl">SSL</option> <option value="ssl">SSL</option>
@@ -427,7 +427,7 @@ export const EmailConfigPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={!smtpConfig.tls_reject_unauthorized} checked={!smtpConfig.tls_reject_unauthorized}
onChange={(e) => setSmtpConfig(prev => ({ ...prev, tls_reject_unauthorized: !e.target.checked }))} onChange={(e) => setSmtpConfig(prev => ({ ...prev, tls_reject_unauthorized: !e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<span className="text-sm font-medium text-neutral-700 dark:text-neutral-300"> <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
{t('email.ignoreSslErrors')} {t('email.ignoreSslErrors')}
@@ -664,7 +664,7 @@ export const EmailConfigPage: React.FC = () => {
}} }}
className={`w-full text-left p-3 rounded-lg transition-colors ${ className={`w-full text-left p-3 rounded-lg transition-colors ${
selectedTemplateKey === template.template_key selectedTemplateKey === template.template_key
? 'bg-primary-50 dark:bg-primary-900/30 border-2 border-primary-600' ? 'tile-selected'
: 'bg-neutral-50 dark:bg-neutral-700 border-2 border-transparent hover:bg-neutral-100 dark:hover:bg-neutral-600' : 'bg-neutral-50 dark:bg-neutral-700 border-2 border-transparent hover:bg-neutral-100 dark:hover:bg-neutral-600'
}`} }`}
> >
@@ -720,7 +720,7 @@ export const EmailConfigPage: React.FC = () => {
onClick={() => setEditingLang(lang.code)} onClick={() => setEditingLang(lang.code)}
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center gap-1.5 ${ className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center gap-1.5 ${
editingLang === lang.code editingLang === lang.code
? 'bg-white dark:bg-neutral-800 text-primary-700 dark:text-primary-300 shadow-sm' ? 'bg-white dark:bg-neutral-800 text-accent-dark shadow-sm'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200' : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200'
}`} }`}
> >
frontend/src/pages/admin/EventDetailsPage.tsx
+29 -29
View File
@@ -99,7 +99,7 @@ const FolderTreeNode: React.FC<{
const rowClass = const rowClass =
'flex items-center gap-1 py-1 pr-1 rounded ' + 'flex items-center gap-1 py-1 pr-1 rounded ' +
(isSelected (isSelected
? 'bg-primary-50 dark:bg-primary-900/30' ? 'bg-accent-dark/15'
: 'hover:bg-neutral-50 dark:hover:bg-neutral-700'); : 'hover:bg-neutral-50 dark:hover:bg-neutral-700');
return ( return (
@@ -119,12 +119,12 @@ const FolderTreeNode: React.FC<{
className={ className={
'flex items-center gap-1.5 flex-1 min-w-0 text-left text-sm ' + 'flex items-center gap-1.5 flex-1 min-w-0 text-left text-sm ' +
(isSelected (isSelected
? 'text-primary-700 dark:text-primary-300 font-medium' ? 'text-accent-dark font-medium'
: 'text-neutral-900 dark:text-neutral-100') : 'text-neutral-900 dark:text-neutral-100')
} }
> >
{isExpanded ? ( {isExpanded ? (
<FolderOpen className="w-4 h-4 flex-shrink-0 text-primary-500" /> <FolderOpen className="w-4 h-4 flex-shrink-0 text-accent" />
) : ( ) : (
<Folder className="w-4 h-4 flex-shrink-0 text-neutral-500" /> <Folder className="w-4 h-4 flex-shrink-0 text-neutral-500" />
)} )}
@@ -924,7 +924,7 @@ export const EventDetailsPage: React.FC = () => {
} }
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 border border-primary-600 rounded-lg hover:bg-primary-50 transition-colors" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-accent hover:opacity-80 border border-accent-dark rounded-lg hover:bg-accent-dark/15 transition-colors"
> >
<ExternalLink className="w-4 h-4" /> <ExternalLink className="w-4 h-4" />
{t('events.viewGallery')} {t('events.viewGallery')}
@@ -1006,7 +1006,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setActiveTab('overview')} onClick={() => setActiveTab('overview')}
className={`py-2 px-1 border-b-2 font-medium text-sm ${ className={`py-2 px-1 border-b-2 font-medium text-sm ${
activeTab === 'overview' activeTab === 'overview'
? 'border-primary-500 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -1016,7 +1016,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setActiveTab('photos')} onClick={() => setActiveTab('photos')}
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${ className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${
activeTab === 'photos' activeTab === 'photos'
? 'border-primary-500 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -1032,7 +1032,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setActiveTab('categories')} onClick={() => setActiveTab('categories')}
className={`py-2 px-1 border-b-2 font-medium text-sm ${ className={`py-2 px-1 border-b-2 font-medium text-sm ${
activeTab === 'categories' activeTab === 'categories'
? 'border-primary-500 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -1043,7 +1043,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setActiveTab('guests')} onClick={() => setActiveTab('guests')}
className={`py-2 px-1 border-b-2 font-medium text-sm ${ className={`py-2 px-1 border-b-2 font-medium text-sm ${
activeTab === 'guests' activeTab === 'guests'
? 'border-primary-500 text-primary-600 dark:text-primary-400' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 hover:border-neutral-300 dark:hover:border-neutral-600'
}`} }`}
> >
@@ -1071,7 +1071,7 @@ export const EventDetailsPage: React.FC = () => {
<textarea <textarea
value={editForm.welcome_message} value={editForm.welcome_message}
onChange={(e) => setEditForm(prev => ({ ...prev, welcome_message: e.target.value }))} onChange={(e) => setEditForm(prev => ({ ...prev, welcome_message: e.target.value }))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
rows={3} rows={3}
placeholder={t('events.welcomeMessage')} placeholder={t('events.welcomeMessage')}
/> />
@@ -1162,7 +1162,7 @@ export const EventDetailsPage: React.FC = () => {
<label className="flex items-start gap-2"> <label className="flex items-start gap-2">
<input <input
type="checkbox" type="checkbox"
className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
checked={editForm.require_password} checked={editForm.require_password}
onChange={(e) => { onChange={(e) => {
const checked = e.target.checked; const checked = e.target.checked;
@@ -1252,7 +1252,7 @@ export const EventDetailsPage: React.FC = () => {
: '' : ''
})); }));
}} }}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="managed">{t('events.sourceModeManaged', 'Managed (upload to PicPeak)')}</option> <option value="managed">{t('events.sourceModeManaged', 'Managed (upload to PicPeak)')}</option>
<option value="reference">{t('events.sourceModeReference', 'Reference external folder')}</option> <option value="reference">{t('events.sourceModeReference', 'Reference external folder')}</option>
@@ -1288,7 +1288,7 @@ export const EventDetailsPage: React.FC = () => {
value={editForm.photo_cap} value={editForm.photo_cap}
onChange={(e) => setEditForm(prev => ({ ...prev, photo_cap: parseInt(e.target.value) || 0 }))} onChange={(e) => setEditForm(prev => ({ ...prev, photo_cap: parseInt(e.target.value) || 0 }))}
min={0} min={0}
className="w-24 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-24 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
/> />
<span className="text-xs text-neutral-500 dark:text-neutral-400"> <span className="text-xs text-neutral-500 dark:text-neutral-400">
{t('events.photoCapHelp', 'Maximum number of photos allowed. 0 = unlimited')} {t('events.photoCapHelp', 'Maximum number of photos allowed. 0 = unlimited')}
@@ -1304,7 +1304,7 @@ export const EventDetailsPage: React.FC = () => {
<select <select
value={editForm.default_photo_sort} value={editForm.default_photo_sort}
onChange={(e) => setEditForm(prev => ({ ...prev, default_photo_sort: e.target.value }))} onChange={(e) => setEditForm(prev => ({ ...prev, default_photo_sort: e.target.value }))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="upload_date_desc">{t('photoSort.uploadDateNewest', 'Upload Date (Newest First)')}</option> <option value="upload_date_desc">{t('photoSort.uploadDateNewest', 'Upload Date (Newest First)')}</option>
<option value="upload_date_asc">{t('photoSort.uploadDateOldest', 'Upload Date (Oldest First)')}</option> <option value="upload_date_asc">{t('photoSort.uploadDateOldest', 'Upload Date (Oldest First)')}</option>
@@ -1321,7 +1321,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.allow_user_uploads} checked={editForm.allow_user_uploads}
onChange={(e) => setEditForm(prev => ({ ...prev, allow_user_uploads: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, allow_user_uploads: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<span className="ml-2 text-sm text-neutral-700 dark:text-neutral-300">{t('events.allowUserUploads')}</span> <span className="ml-2 text-sm text-neutral-700 dark:text-neutral-300">{t('events.allowUserUploads')}</span>
</label> </label>
@@ -1341,7 +1341,7 @@ export const EventDetailsPage: React.FC = () => {
...prev, ...prev,
upload_category_id: e.target.value ? parseInt(e.target.value) : null upload_category_id: e.target.value ? parseInt(e.target.value) : null
}))} }))}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
<option value="">{t('events.selectCategory')}</option> <option value="">{t('events.selectCategory')}</option>
{categories?.map(category => ( {categories?.map(category => (
@@ -1368,7 +1368,7 @@ export const EventDetailsPage: React.FC = () => {
{/* Download Protection Settings */} {/* Download Protection Settings */}
<div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700"> <div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700">
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-3 flex items-center gap-2"> <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-3 flex items-center gap-2">
<Shield className="w-4 h-4 text-primary-600" /> <Shield className="w-4 h-4 text-accent" />
{t('events.downloadProtection', 'Download Protection')} {t('events.downloadProtection', 'Download Protection')}
</h3> </h3>
@@ -1378,7 +1378,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.allow_downloads} checked={editForm.allow_downloads}
onChange={(e) => setEditForm(prev => ({ ...prev, allow_downloads: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, allow_downloads: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Download className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Download className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.allowDownloads', 'Allow photo downloads')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.allowDownloads', 'Allow photo downloads')}</span>
@@ -1389,7 +1389,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.disable_right_click} checked={editForm.disable_right_click}
onChange={(e) => setEditForm(prev => ({ ...prev, disable_right_click: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, disable_right_click: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<MousePointer className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <MousePointer className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.disableRightClick', 'Block right-click menu')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.disableRightClick', 'Block right-click menu')}</span>
@@ -1407,7 +1407,7 @@ export const EventDetailsPage: React.FC = () => {
// S3 without going through the watermark pipeline. // S3 without going through the watermark pipeline.
allow_presigned_download: e.target.checked ? false : prev.allow_presigned_download, allow_presigned_download: e.target.checked ? false : prev.allow_presigned_download,
}))} }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Droplets className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Droplets className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.watermarkDownloads', 'Add watermark to downloads')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.watermarkDownloads', 'Add watermark to downloads')}</span>
@@ -1425,7 +1425,7 @@ export const EventDetailsPage: React.FC = () => {
checked={!!editForm.allow_presigned_download} checked={!!editForm.allow_presigned_download}
disabled={editForm.watermark_downloads} disabled={editForm.watermark_downloads}
onChange={(e) => setEditForm(prev => ({ ...prev, allow_presigned_download: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, allow_presigned_download: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Download className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Download className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300"> <span className="text-sm text-neutral-700 dark:text-neutral-300">
@@ -1438,7 +1438,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.enable_devtools_protection} checked={editForm.enable_devtools_protection}
onChange={(e) => setEditForm(prev => ({ ...prev, enable_devtools_protection: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, enable_devtools_protection: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Monitor className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Monitor className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.enableDevtoolsProtection', 'Detect developer tools')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.enableDevtoolsProtection', 'Detect developer tools')}</span>
@@ -1449,7 +1449,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.use_canvas_rendering} checked={editForm.use_canvas_rendering}
onChange={(e) => setEditForm(prev => ({ ...prev, use_canvas_rendering: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, use_canvas_rendering: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Image className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Image className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.useCanvasRendering', 'Canvas rendering (advanced protection)')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.useCanvasRendering', 'Canvas rendering (advanced protection)')}</span>
@@ -1464,7 +1464,7 @@ export const EventDetailsPage: React.FC = () => {
{/* Hero Logo Settings */} {/* Hero Logo Settings */}
<div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700"> <div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700">
<h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-3 flex items-center gap-2"> <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-3 flex items-center gap-2">
<Layout className="w-4 h-4 text-primary-600" /> <Layout className="w-4 h-4 text-accent" />
{t('events.heroLogoSettings', 'Hero Logo Settings')} {t('events.heroLogoSettings', 'Hero Logo Settings')}
</h3> </h3>
@@ -1474,7 +1474,7 @@ export const EventDetailsPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={editForm.hero_logo_visible} checked={editForm.hero_logo_visible}
onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_visible: e.target.checked }))} onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_visible: e.target.checked }))}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
/> />
<Image className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" /> <Image className="w-4 h-4 ml-2 mr-1 text-neutral-500 dark:text-neutral-400" />
<span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.heroLogoVisible', 'Display logo in hero section')}</span> <span className="text-sm text-neutral-700 dark:text-neutral-300">{t('events.heroLogoVisible', 'Display logo in hero section')}</span>
@@ -1489,7 +1489,7 @@ export const EventDetailsPage: React.FC = () => {
<select <select
value={editForm.hero_logo_size} value={editForm.hero_logo_size}
onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_size: e.target.value as 'small' | 'medium' | 'large' | 'xlarge' }))} onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_size: e.target.value as 'small' | 'medium' | 'large' | 'xlarge' }))}
className="w-full sm:w-48 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 text-sm" className="w-full sm:w-48 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md shadow-sm focus:ring-primary-500 focus:border-accent-dark text-sm"
> >
<option value="small">{t('events.heroLogoSizeSmall', 'Small')}</option> <option value="small">{t('events.heroLogoSizeSmall', 'Small')}</option>
<option value="medium">{t('events.heroLogoSizeMedium', 'Medium')}</option> <option value="medium">{t('events.heroLogoSizeMedium', 'Medium')}</option>
@@ -1505,7 +1505,7 @@ export const EventDetailsPage: React.FC = () => {
<select <select
value={editForm.hero_logo_position} value={editForm.hero_logo_position}
onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_position: e.target.value as 'top' | 'center' | 'bottom' }))} onChange={(e) => setEditForm(prev => ({ ...prev, hero_logo_position: e.target.value as 'top' | 'center' | 'bottom' }))}
className="w-full sm:w-48 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 text-sm" className="w-full sm:w-48 px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-md shadow-sm focus:ring-primary-500 focus:border-accent-dark text-sm"
> >
<option value="top">{t('events.heroLogoPositionTop', 'Top (above title)')}</option> <option value="top">{t('events.heroLogoPositionTop', 'Top (above title)')}</option>
<option value="center">{t('events.heroLogoPositionCenter', 'Center (between title and dates)')}</option> <option value="center">{t('events.heroLogoPositionCenter', 'Center (between title and dates)')}</option>
@@ -1532,7 +1532,7 @@ export const EventDetailsPage: React.FC = () => {
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label className="cursor-pointer inline-flex items-center gap-1 text-xs text-primary-600 hover:text-primary-700"> <label className="cursor-pointer inline-flex items-center gap-1 text-xs text-accent hover:opacity-80">
<Upload className="w-3 h-3" /> <Upload className="w-3 h-3" />
{t('events.replaceLogo', 'Replace')} {t('events.replaceLogo', 'Replace')}
<input <input
@@ -1670,7 +1670,7 @@ export const EventDetailsPage: React.FC = () => {
<dt className="text-sm font-medium text-neutral-500 dark:text-neutral-400">{t('events.heroPhoto')}</dt> <dt className="text-sm font-medium text-neutral-500 dark:text-neutral-400">{t('events.heroPhoto')}</dt>
<dd className="mt-1 text-sm text-neutral-900 dark:text-neutral-100"> <dd className="mt-1 text-sm text-neutral-900 dark:text-neutral-100">
{event.hero_photo_id ? ( {event.hero_photo_id ? (
<span className="text-primary-600 dark:text-primary-400">{t('events.heroPhotoSelected')}</span> <span className="text-accent">{t('events.heroPhotoSelected')}</span>
) : ( ) : (
<span className="text-neutral-400">{t('events.noHeroPhotoSelected')}</span> <span className="text-neutral-400">{t('events.noHeroPhotoSelected')}</span>
)} )}
@@ -1846,7 +1846,7 @@ export const EventDetailsPage: React.FC = () => {
<label className="flex items-start gap-2"> <label className="flex items-start gap-2">
<input <input
type="checkbox" type="checkbox"
className="mt-1 w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500" className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
checked={!!event?.client_access_enabled} checked={!!event?.client_access_enabled}
onChange={async (e) => { onChange={async (e) => {
try { try {
frontend/src/pages/admin/EventFeedbackPage.tsx
+1 -1
View File
@@ -192,7 +192,7 @@ export const EventFeedbackPage: React.FC = () => {
onClick={() => setActiveTab(tab.id as any)} onClick={() => setActiveTab(tab.id as any)}
className={`flex items-center gap-2 px-1 py-2 border-b-2 font-medium text-sm transition-colors ${ className={`flex items-center gap-2 px-1 py-2 border-b-2 font-medium text-sm transition-colors ${
activeTab === tab.id activeTab === tab.id
? 'border-primary-600 text-primary-600' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300' : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
}`} }`}
> >
frontend/src/pages/admin/EventTypesPage.tsx
+5 -5
View File
@@ -153,7 +153,7 @@ export const EventTypesPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={showInactive} checked={showInactive}
onChange={(e) => setShowInactive(e.target.checked)} onChange={(e) => setShowInactive(e.target.checked)}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<span className="text-sm text-neutral-700 dark:text-neutral-300"> <span className="text-sm text-neutral-700 dark:text-neutral-300">
{t('eventTypes.showInactive', 'Show inactive')} {t('eventTypes.showInactive', 'Show inactive')}
@@ -241,7 +241,7 @@ export const EventTypesPage: React.FC = () => {
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<button <button
onClick={() => setEditingType(type)} onClick={() => setEditingType(type)}
className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg text-neutral-600 dark:text-neutral-400 hover:text-primary-600" className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg text-neutral-600 dark:text-neutral-400 hover:text-accent"
title={t('common.edit', 'Edit')} title={t('common.edit', 'Edit')}
> >
<Edit className="w-4 h-4" /> <Edit className="w-4 h-4" />
@@ -432,7 +432,7 @@ const EventTypeModal: React.FC<EventTypeModalProps> = ({
onClick={() => setForm({ ...form, emoji })} onClick={() => setForm({ ...form, emoji })}
className={`p-2 text-xl rounded-lg border-2 transition-all ${ className={`p-2 text-xl rounded-lg border-2 transition-all ${
form.emoji === emoji form.emoji === emoji
? 'border-primary-600 bg-primary-50 dark:bg-primary-900/30' ? 'tile-selected'
: 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500' : 'border-neutral-200 dark:border-neutral-600 hover:border-neutral-300 dark:hover:border-neutral-500'
}`} }`}
> >
@@ -450,7 +450,7 @@ const EventTypeModal: React.FC<EventTypeModalProps> = ({
<select <select
value={form.theme_preset} value={form.theme_preset}
onChange={(e) => setForm({ ...form, theme_preset: e.target.value })} onChange={(e) => setForm({ ...form, theme_preset: e.target.value })}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
> >
{Object.entries(GALLERY_THEME_PRESETS).map(([key, preset]) => ( {Object.entries(GALLERY_THEME_PRESETS).map(([key, preset]) => (
<option key={key} value={key}> <option key={key} value={key}>
@@ -467,7 +467,7 @@ const EventTypeModal: React.FC<EventTypeModalProps> = ({
type="checkbox" type="checkbox"
checked={eventType?.is_active} checked={eventType?.is_active}
onChange={(e) => onSubmit({ is_active: e.target.checked })} onChange={(e) => onSubmit({ is_active: e.target.checked })}
className="rounded border-neutral-300 dark:border-neutral-600 text-primary-600 focus:ring-primary-500" className="rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-primary-500"
/> />
<span className="text-sm text-neutral-700 dark:text-neutral-300"> <span className="text-sm text-neutral-700 dark:text-neutral-300">
{t('eventTypes.form.isActive', 'Active (visible in event creation)')} {t('eventTypes.form.isActive', 'Active (visible in event creation)')}
frontend/src/pages/admin/EventsListPage.tsx
+5 -5
View File
@@ -321,7 +321,7 @@ export const EventsListPage: React.FC = () => {
<p className="text-sm text-neutral-600 dark:text-neutral-400">{t('events.stats.totalEvents')}</p> <p className="text-sm text-neutral-600 dark:text-neutral-400">{t('events.stats.totalEvents')}</p>
<p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">{dashboardStats?.totalEvents ?? 0}</p> <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">{dashboardStats?.totalEvents ?? 0}</p>
</div> </div>
<Calendar className="w-8 h-8 text-primary-600" /> <Calendar className="w-8 h-8 text-accent" />
</div> </div>
</Card> </Card>
@@ -423,8 +423,8 @@ export const EventsListPage: React.FC = () => {
{/* Bulk Actions */} {/* Bulk Actions */}
{selectedEvents.length > 0 && ( {selectedEvents.length > 0 && (
<div className="mt-4 p-3 bg-primary-50 dark:bg-primary-900/30 rounded-lg flex items-center justify-between"> <div className="mt-4 p-3 bg-accent-dark/15 rounded-lg flex items-center justify-between">
<span className="text-sm text-primary-900 dark:text-primary-100"> <span className="text-sm text-accent-dark">
{t('events.eventsSelected', { count: selectedEvents.length })} {t('events.eventsSelected', { count: selectedEvents.length })}
</span> </span>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -465,7 +465,7 @@ export const EventsListPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={selectedEvents.length === events.length && events.length > 0} checked={selectedEvents.length === events.length && events.length > 0}
onChange={handleSelectAll} onChange={handleSelectAll}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500 dark:bg-neutral-700" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500 dark:bg-neutral-700"
/> />
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider"> <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
@@ -513,7 +513,7 @@ export const EventsListPage: React.FC = () => {
type="checkbox" type="checkbox"
checked={selectedEvents.includes(event.id)} checked={selectedEvents.includes(event.id)}
onChange={() => handleSelectEvent(event.id)} onChange={() => handleSelectEvent(event.id)}
className="w-4 h-4 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500 dark:bg-neutral-700" className="w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500 dark:bg-neutral-700"
/> />
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
frontend/src/pages/admin/SettingsPage.tsx
+3 -3
View File
@@ -202,14 +202,14 @@ export const SettingsPage: React.FC = () => {
aria-current={isActive ? 'page' : undefined} aria-current={isActive ? 'page' : undefined}
className={`group w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors ${ className={`group w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
isActive isActive
? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300' ? 'bg-accent-dark text-white'
: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800' : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'
}`} }`}
> >
<Icon <Icon
className={`w-4 h-4 flex-shrink-0 ${ className={`w-4 h-4 flex-shrink-0 ${
isActive isActive
? 'text-primary-600 dark:text-primary-400' ? 'text-accent'
: 'text-neutral-500 dark:text-neutral-400 group-hover:text-neutral-700 dark:group-hover:text-neutral-200' : 'text-neutral-500 dark:text-neutral-400 group-hover:text-neutral-700 dark:group-hover:text-neutral-200'
}`} }`}
/> />
@@ -229,7 +229,7 @@ export const SettingsPage: React.FC = () => {
after they switch, especially after a mobile select change. */} after they switch, especially after a mobile select change. */}
<div className="mb-4 lg:mb-6 pb-3 border-b border-neutral-200 dark:border-neutral-700"> <div className="mb-4 lg:mb-6 pb-3 border-b border-neutral-200 dark:border-neutral-700">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<activeItem.icon className="w-5 h-5 text-primary-600 dark:text-primary-400" /> <activeItem.icon className="w-5 h-5 text-accent" />
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100"> <h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{activeItem.label} {activeItem.label}
</h2> </h2>
frontend/src/pages/admin/UserManagementPage.tsx
+8 -8
View File
@@ -140,7 +140,7 @@ const CreateInvitationModal: React.FC<CreateInvitationModalProps> = ({
setRoleId(e.target.value ? Number(e.target.value) : ''); setRoleId(e.target.value ? Number(e.target.value) : '');
setErrors((prev) => ({ ...prev, role: undefined })); setErrors((prev) => ({ ...prev, role: undefined }));
}} }}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
disabled={isLoading} disabled={isLoading}
> >
<option value="">{t('userManagement.selectRole')}</option> <option value="">{t('userManagement.selectRole')}</option>
@@ -253,7 +253,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<select <select
value={roleId} value={roleId}
onChange={(e) => setRoleId(e.target.value ? Number(e.target.value) : '')} onChange={(e) => setRoleId(e.target.value ? Number(e.target.value) : '')}
className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-accent-dark"
disabled={isLoading} disabled={isLoading}
> >
<option value="">{t('userManagement.selectRole')}</option> <option value="">{t('userManagement.selectRole')}</option>
@@ -608,7 +608,7 @@ export const UserManagementPage: React.FC = () => {
{users?.length || 0} {users?.length || 0}
</p> </p>
</div> </div>
<Users className="w-8 h-8 text-primary-600" /> <Users className="w-8 h-8 text-accent" />
</div> </div>
</Card> </Card>
@@ -664,7 +664,7 @@ export const UserManagementPage: React.FC = () => {
onClick={() => setActiveTab(tab.key)} onClick={() => setActiveTab(tab.key)}
className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${ className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors flex items-center gap-2 ${
activeTab === tab.key activeTab === tab.key
? 'border-primary-600 text-primary-600' ? 'border-accent-dark text-accent-dark'
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
}`} }`}
> >
@@ -672,7 +672,7 @@ export const UserManagementPage: React.FC = () => {
<span <span
className={`px-2 py-0.5 text-xs rounded-full ${ className={`px-2 py-0.5 text-xs rounded-full ${
activeTab === tab.key activeTab === tab.key
? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300' ? 'bg-accent-dark/15 text-accent-dark'
: 'bg-neutral-100 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400' : 'bg-neutral-100 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400'
}`} }`}
> >
@@ -740,8 +740,8 @@ export const UserManagementPage: React.FC = () => {
<tr key={user.id} className="hover:bg-neutral-50 dark:hover:bg-neutral-700/50"> <tr key={user.id} className="hover:bg-neutral-50 dark:hover:bg-neutral-700/50">
<td className="px-6 py-4"> <td className="px-6 py-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-accent-dark/15 flex items-center justify-center">
<span className="text-primary-700 dark:text-primary-300 font-medium text-sm"> <span className="text-accent-dark font-medium text-sm">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</span> </span>
</div> </div>
@@ -794,7 +794,7 @@ export const UserManagementPage: React.FC = () => {
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<button <button
onClick={() => handleEditUser(user)} onClick={() => handleEditUser(user)}
className="p-1.5 text-neutral-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-lg transition-colors" className="p-1.5 text-neutral-400 hover:text-accent hover:bg-accent-dark/15 rounded-lg transition-colors"
title={t('userManagement.editUser')} title={t('userManagement.editUser')}
> >
<Edit className="w-4 h-4" /> <Edit className="w-4 h-4" />
frontend/src/pages/admin/WebhookDeliveriesPage.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ export const WebhookDeliveriesPage: React.FC = () => {
return ( return (
<div className="p-6"> <div className="p-6">
<p className="text-sm text-neutral-600 dark:text-neutral-400">Webhook not found.</p> <p className="text-sm text-neutral-600 dark:text-neutral-400">Webhook not found.</p>
<Link to="/admin/settings" className="text-primary-600 hover:underline">← Back to settings</Link> <Link to="/admin/settings" className="text-accent hover:underline">← Back to settings</Link>
</div> </div>
); );
} }