fix: isolate shared admin styling
This commit is contained in:
Simo committed
1 parent
4ce35e91fb
commit
0fe482009c
15 files changed
+157
-150
No files matched your search
@@ -27,8 +27,8 @@ export function AdminNavLink({
|
||||
href={href}
|
||||
className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
|
||||
active
|
||||
? "bg-[var(--color-primary)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--color-primary)]"
|
||||
: "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 hover:no-underline"
|
||||
? "bg-[var(--admin-accent)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--admin-accent)]"
|
||||
: "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
|
||||
}`}
|
||||
>
|
||||
{icon ? (
|
||||
|
||||
@@ -287,7 +287,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
|
||||
{isDirty && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="h-4 px-1.5 text-[9px] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]"
|
||||
className="h-4 px-1.5 text-[9px] text-[var(--admin-warning)] border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]"
|
||||
>
|
||||
<AlertCircle className="h-2.5 w-2.5 mr-0.5" />
|
||||
unsaved
|
||||
@@ -310,7 +310,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
|
||||
|
||||
{/* Dirty banner */}
|
||||
{isDirty && (
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--color-warning-subtle)] border-b border-[var(--color-warning-border)] text-xs text-[var(--color-warning-text-readable)] shrink-0">
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--admin-warning-subtle)] border-b border-[var(--admin-warning-border)] text-xs text-[var(--admin-warning)] shrink-0">
|
||||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="flex-1">
|
||||
Unsaved changes — press{' '}
|
||||
@@ -340,7 +340,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
|
||||
<TabsTrigger value="settings" className="gap-1.5 text-xs">
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
Settings
|
||||
{isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--color-warning)]" />}
|
||||
{isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--admin-warning)]" />}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="items" className="gap-1.5 text-xs">
|
||||
<Package className="h-3.5 w-3.5" />
|
||||
@@ -359,7 +359,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
|
||||
const furniSet = new Set(itemsData.furniDataIdList)
|
||||
const missing = itemsData.baseItems.filter((b) => !furniSet.has(b.id)).length
|
||||
return missing > 0 ? (
|
||||
<span className="ml-0.5 rounded-full bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] text-[9px] px-1 py-0.5 leading-none font-medium">
|
||||
<span className="ml-0.5 rounded-full bg-[var(--admin-warning)] text-[var(--admin-warning-foreground)] text-[9px] px-1 py-0.5 leading-none font-medium">
|
||||
{missing}
|
||||
</span>
|
||||
) : null
|
||||
|
||||
@@ -127,7 +127,7 @@ export const TreeItemContent = React.memo(
|
||||
!sortMode && 'cursor-pointer',
|
||||
isSelected && !isDragging && 'bg-primary/10 ring-1 ring-primary/30',
|
||||
isMultiSelected && !isSelected && !isDragging && 'bg-primary/5 ring-1 ring-primary/15',
|
||||
isFocused && !isSelected && !isMultiSelected && 'ring-2 ring-blue-500/40',
|
||||
isFocused && !isSelected && !isMultiSelected && 'ring-2 ring-[var(--admin-focus-ring)]/40',
|
||||
!isSelected && !isMultiSelected && !isFocused && !isDragging && 'hover:bg-accent/60',
|
||||
isAncestorOfSelected &&
|
||||
!isSelected &&
|
||||
|
||||
@@ -109,17 +109,17 @@ export function CatalogIcon({ iconImage, size = 20 }: { iconImage: number; size?
|
||||
/* ─── Layout label helper ────────────────────────────────── */
|
||||
|
||||
export const LAYOUT_COLORS: Record<string, string> = {
|
||||
default_3x3: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
|
||||
frontpage: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
|
||||
spaces_new: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
|
||||
pets: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
|
||||
pets2: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
|
||||
pets3: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
|
||||
marketplace: 'bg-purple-500/15 text-purple-600 dark:text-purple-400',
|
||||
recycler: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
|
||||
club_buy: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
|
||||
single_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
|
||||
room_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
|
||||
default_3x3: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
|
||||
frontpage: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]',
|
||||
spaces_new: 'bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]',
|
||||
pets: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
|
||||
pets2: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
|
||||
pets3: 'bg-[var(--admin-error)]/15 text-[var(--admin-error)]',
|
||||
marketplace: 'bg-[var(--admin-accent)]/15 text-[var(--admin-accent-text)]',
|
||||
recycler: 'bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]',
|
||||
club_buy: 'bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] dark:text-[var(--admin-warning)]',
|
||||
single_bundle: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
|
||||
room_bundle: 'bg-[var(--admin-info-subtle)] text-[var(--admin-info)] dark:text-[var(--admin-info)]',
|
||||
}
|
||||
|
||||
/* ─── Highlight matched text ─────────────────────────────── */
|
||||
@@ -131,7 +131,7 @@ function HighlightText({ text, query }: { text: string; query: string }) {
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<mark className="bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] rounded-sm px-0.5">
|
||||
<mark className="bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)] rounded-sm px-0.5">
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
@@ -325,7 +325,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
|
||||
className={cn(
|
||||
'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
|
||||
filterMode === 'enabled'
|
||||
? 'bg-background shadow-sm text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]'
|
||||
? 'bg-background shadow-sm text-[var(--admin-success)] dark:text-[var(--admin-success)]'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
@@ -345,7 +345,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
|
||||
className={cn(
|
||||
'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
|
||||
filterMode === 'disabled'
|
||||
? 'bg-background shadow-sm text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]'
|
||||
? 'bg-background shadow-sm text-[var(--admin-error)] dark:text-[var(--admin-error)]'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
@@ -643,8 +643,8 @@ function TreeItem({
|
||||
className={cn(
|
||||
'flex items-center justify-center h-5 w-5 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity',
|
||||
isDisabled
|
||||
? 'hover:bg-[var(--color-success-subtle)] text-muted-foreground hover:text-[var(--color-success-text-readable)]'
|
||||
: 'hover:bg-[var(--color-error-subtle)] text-muted-foreground hover:text-[var(--color-error-text-readable)]',
|
||||
? 'hover:bg-[var(--admin-success-subtle)] text-muted-foreground hover:text-[var(--admin-success)]'
|
||||
: 'hover:bg-[var(--admin-error-subtle)] text-muted-foreground hover:text-[var(--admin-error)]',
|
||||
)}
|
||||
>
|
||||
{isDisabled ? (
|
||||
|
||||
@@ -189,7 +189,7 @@ export function BulkImportItems({ pageId, onImported }: BulkImportItemsProps) {
|
||||
<td className="px-2 py-0.5 font-mono">{row.pointsType ?? '—'}</td>
|
||||
<td className="px-2 py-0.5">
|
||||
{row.ok ? (
|
||||
<span className="text-[var(--color-success-text-readable)]">OK</span>
|
||||
<span className="text-[var(--admin-success)]">OK</span>
|
||||
) : (
|
||||
<span className="text-destructive">{row.error}</span>
|
||||
)}
|
||||
|
||||
@@ -75,7 +75,7 @@ export function ItemsShopPreview({
|
||||
{/* Badges overlay */}
|
||||
<div className="absolute right-1 top-1 flex flex-col gap-0.5">
|
||||
{isClub && (
|
||||
<Badge className="h-4 gap-0.5 border-0 bg-[var(--color-warning-subtle)] px-1 text-[8px] text-white">
|
||||
<Badge className="h-4 gap-0.5 border-0 bg-[var(--admin-warning-subtle)] px-1 text-[8px] text-white">
|
||||
<Crown className="h-2.5 w-2.5" />
|
||||
HC
|
||||
</Badge>
|
||||
@@ -110,7 +110,7 @@ export function ItemsShopPreview({
|
||||
</p>
|
||||
<div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono">
|
||||
{item.costCredits > 0 && (
|
||||
<span className="text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
|
||||
<span className="text-[var(--admin-warning)] dark:text-[var(--admin-warning)]">
|
||||
{item.costCredits}c
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -29,20 +29,20 @@ export function StatusCard({
|
||||
icon?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-[var(--color-surface)] border border-[var(--border-subtle)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
|
||||
<div className="bg-[var(--admin-surface)] border border-[var(--admin-border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
|
||||
<div className="flex items-center justify-between gap-3 mb-3">
|
||||
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">
|
||||
<span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--admin-text-muted)]">
|
||||
{label}
|
||||
</span>
|
||||
{icon ? (
|
||||
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
|
||||
<span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/15 to-[var(--admin-accent)]/5 grid place-items-center text-[var(--admin-accent)] flex-none">
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
|
||||
<div className="text-2xl font-extrabold text-[var(--admin-text)] leading-tight">{value}</div>
|
||||
{hint ? (
|
||||
<div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div>
|
||||
<div className="text-[0.7rem] text-[var(--admin-text-muted)] mt-1.5 font-medium">{hint}</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
@@ -61,24 +61,24 @@ export function DiagnosticRow({
|
||||
const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
|
||||
const dotColor =
|
||||
state === "ok"
|
||||
? "bg-[var(--color-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
|
||||
? "bg-[var(--admin-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
|
||||
: state === "warn"
|
||||
? "bg-[var(--color-primary)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
|
||||
: "bg-[var(--color-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
|
||||
? "bg-[var(--admin-accent)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
|
||||
: "bg-[var(--admin-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
|
||||
const badgeColor =
|
||||
state === "ok"
|
||||
? "bg-[var(--color-success-subtle)]"
|
||||
? "bg-[var(--admin-success-subtle)]"
|
||||
: state === "danger"
|
||||
? "bg-[var(--color-error-subtle)]"
|
||||
: "bg-[var(--color-primary)]/18";
|
||||
? "bg-[var(--admin-error-subtle)]"
|
||||
: "bg-[var(--admin-accent)]/18";
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--border-subtle)] first:border-t-0">
|
||||
<div className="flex items-center gap-2.5 py-2 px-0.5 border-t border-[var(--admin-border)] first:border-t-0">
|
||||
<span className={`flex-none w-[9px] h-[9px] rounded-full ${dotColor}`} aria-hidden />
|
||||
<span className="font-bold text-sm">{label}</span>
|
||||
<span className="flex-1 text-[0.82rem] text-[var(--color-text-muted)]">{detail}</span>
|
||||
<span className="flex-1 text-[0.82rem] text-[var(--admin-text-muted)]">{detail}</span>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${badgeColor} text-[var(--color-text)]`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${badgeColor} text-[var(--admin-text)]`}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
@@ -90,7 +90,7 @@ export function DiagnosticRow({
|
||||
export function InfoItem({ label, value }: { label: string; value: ReactNode }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 text-sm">
|
||||
<span className="text-[var(--color-text-muted)]">{label}</span>
|
||||
<span className="text-[var(--admin-text-muted)]">{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
);
|
||||
@@ -115,54 +115,54 @@ export function OnlineUsersWidget({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-[var(--color-surface)] rounded-xl border border-[var(--border-subtle)] p-6">
|
||||
<div className="bg-[var(--admin-surface)] rounded-xl border border-[var(--admin-border)] p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="m-0 text-lg font-semibold text-[var(--color-text)]">Online Now</h3>
|
||||
<span className="text-sm text-[var(--color-text-muted)] bg-[var(--color-primary)]/10 px-3 py-1 rounded-full">
|
||||
<h3 className="m-0 text-lg font-semibold text-[var(--admin-text)]">Online Now</h3>
|
||||
<span className="text-sm text-[var(--admin-text-muted)] bg-[var(--admin-accent)]/10 px-3 py-1 rounded-full">
|
||||
{isLoading ? "..." : users.length} users
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-h-80 overflow-y-auto flex flex-col gap-3">
|
||||
{users.length === 0 ? (
|
||||
<div className="py-8 text-center bg-[var(--color-text-muted)]/5 rounded-lg">
|
||||
<span className="text-[var(--color-text-muted)] text-sm">No users online</span>
|
||||
<div className="py-8 text-center bg-[var(--admin-text-muted)]/5 rounded-lg">
|
||||
<span className="text-[var(--admin-text-muted)] text-sm">No users online</span>
|
||||
</div>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
className="flex items-center gap-3 p-3 bg-[var(--color-text-muted)]/5 rounded-lg transition-all duration-150 hover:bg-[var(--color-text-muted)]/10 hover:translate-x-0.5"
|
||||
className="flex items-center gap-3 p-3 bg-[var(--admin-text-muted)]/5 rounded-lg transition-all duration-150 hover:bg-[var(--admin-text-muted)]/10 hover:translate-x-0.5"
|
||||
>
|
||||
<div className="relative flex-none w-[50px] h-[62px]">
|
||||
<Image
|
||||
src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
|
||||
alt={user.username}
|
||||
fill
|
||||
className="rounded object-cover border border-[var(--border-subtle)]"
|
||||
className="rounded object-cover border border-[var(--admin-border)]"
|
||||
unoptimized
|
||||
/>
|
||||
{user.roomId && user.roomName && (
|
||||
<div className="absolute -bottom-0.5 -right-0.5">
|
||||
<span className="block w-[10px] h-[10px] bg-[var(--color-success-subtle)] rounded-full border-2 border-[var(--color-surface)]" />
|
||||
<span className="block w-[10px] h-[10px] bg-[var(--admin-success-subtle)] rounded-full border-2 border-[var(--admin-surface)]" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-[var(--color-text)] mb-1 truncate">
|
||||
<div className="font-medium text-[var(--admin-text)] mb-1 truncate">
|
||||
<a
|
||||
href={`/u/${user.username}`}
|
||||
className="text-inherit no-underline hover:text-[var(--color-primary)] hover:underline"
|
||||
className="text-inherit no-underline hover:text-[var(--admin-accent)] hover:underline"
|
||||
>
|
||||
{user.username}
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-[0.75rem] text-[var(--color-text-muted)]">
|
||||
<div className="text-[0.75rem] text-[var(--admin-text-muted)]">
|
||||
{user.roomId && user.roomName ? (
|
||||
<span className="text-[var(--color-success-text-readable)] font-medium">🏠 {user.roomName}</span>
|
||||
<span className="text-[var(--admin-success)] font-medium">🏠 {user.roomName}</span>
|
||||
) : (
|
||||
<span className="text-[var(--color-error-text-readable)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
|
||||
<span className="text-[var(--admin-error)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -292,7 +292,7 @@ export function EmulatorSettingsForm({
|
||||
<div
|
||||
key={setting.key}
|
||||
className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
|
||||
isChanged ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]' : ''
|
||||
isChanged ? 'bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]' : ''
|
||||
}`}
|
||||
>
|
||||
<code
|
||||
@@ -305,7 +305,7 @@ export function EmulatorSettingsForm({
|
||||
value={display}
|
||||
onChange={(e) => updateValue(setting.key, e.target.value)}
|
||||
className={`flex-1 h-8 text-xs font-mono ${
|
||||
isChanged ? 'border-[var(--color-warning-border)]' : ''
|
||||
isChanged ? 'border-[var(--admin-warning-border)]' : ''
|
||||
}`}
|
||||
/>
|
||||
{isChanged && (
|
||||
|
||||
@@ -93,9 +93,9 @@ export function AdminMediaGrid() {
|
||||
{progress.current} / {progress.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-[var(--color-primary)]/10 rounded-full overflow-hidden">
|
||||
<div className="h-2 w-full bg-[var(--admin-accent)]/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-300"
|
||||
className="h-full bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent)] transition-all duration-300"
|
||||
style={{ width: `${(progress.current / progress.total) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -111,12 +111,12 @@ export function AdminMediaGrid() {
|
||||
{files.map((f) => (
|
||||
<div
|
||||
key={f.name}
|
||||
className="border border-[var(--color-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--color-background)]"
|
||||
className="border border-[var(--admin-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--admin-canvas)]"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={validImageUrl(f.url)} alt={f.name} className="w-full h-[120px] object-cover block" />
|
||||
<div className="p-2">
|
||||
<p className="text-xs text-[var(--color-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
<p className="text-xs text-[var(--admin-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{f.name}
|
||||
</p>
|
||||
<button
|
||||
|
||||
@@ -70,7 +70,7 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "0.78rem",
|
||||
color: "var(--color-text-muted)",
|
||||
color: "var(--admin-text-muted)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
@@ -89,9 +89,9 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-[var(--color-surface)] text-[var(--color-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
|
||||
className="bg-[var(--admin-surface)] text-[var(--admin-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
|
||||
>
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-text-muted)]/14">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--admin-text-muted)]/14">
|
||||
<strong className="text-base">Media Library</strong>
|
||||
<div className="flex gap-2 items-center">
|
||||
<label className="btn btn-primary text-sm cursor-pointer">
|
||||
@@ -112,9 +112,9 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-3">
|
||||
{loading ? (
|
||||
<p className="text-xs text-[var(--color-text-muted)] text-center py-8">Loading…</p>
|
||||
<p className="text-xs text-[var(--admin-text-muted)] text-center py-8">Loading…</p>
|
||||
) : files.length === 0 ? (
|
||||
<p className="text-xs text-[var(--color-text-muted)] text-center py-8">
|
||||
<p className="text-xs text-[var(--admin-text-muted)] text-center py-8">
|
||||
No images yet. Upload one above.
|
||||
</p>
|
||||
) : (
|
||||
@@ -127,12 +127,12 @@ export function MediaPicker({ onSelect, current }: { onSelect: (url: string) =>
|
||||
onSelect(f.url);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--color-background)] p-0 flex flex-col transition-all duration-150"
|
||||
style={{ borderColor: f.url === current ? "var(--color-primary)" : "transparent" }}
|
||||
className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--admin-canvas)] p-0 flex flex-col transition-all duration-150"
|
||||
style={{ borderColor: f.url === current ? "var(--admin-accent)" : "transparent" }}
|
||||
onMouseEnter={(e) => {
|
||||
if (f.url !== current)
|
||||
e.currentTarget.style.borderColor =
|
||||
"color-mix(in srgb, var(--color-primary) 40%, transparent)";
|
||||
"color-mix(in srgb, var(--admin-accent) 40%, transparent)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (f.url !== current) e.currentTarget.style.borderColor = "transparent";
|
||||
|
||||
@@ -9,12 +9,12 @@ interface AdminPageHeaderProps {
|
||||
export function AdminPageHeader({ icon: Icon, title, subtitle }: AdminPageHeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Icon size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Icon size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{title}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{subtitle}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{title}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user