ui(super-admin): читаемый логотип на тёмном sidebar

<Logo> получил пропс variant="dark": в нём «FOOD» рендерится белым
(slate-50) вместо чёрного, «MARKET» — emerald-400 (вместо var brand)
для контраста на indigo-950 фоне SuperAdminLayout. SuperAdminLayout
прокидывает variant="dark" в обоих местах (desktop sidebar + mobile
header). Светлый вариант остался по умолчанию для tenant AppLayout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
nns 2026-04-26 15:32:29 +05:00
parent 17be1c83b2
commit 651038f683
2 changed files with 14 additions and 6 deletions

View file

@ -1,14 +1,22 @@
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
export function Logo({ className }: { className?: string }) { interface Props { className?: string; variant?: 'light' | 'dark' }
export function Logo({ className, variant = 'light' }: Props) {
const isDark = variant === 'dark'
return ( return (
<div className={cn('flex flex-col leading-none select-none', className)}> <div className={cn('flex flex-col leading-none select-none', className)}>
<span className="font-black text-slate-900 dark:text-slate-100 tracking-[0.08em] text-base"> <span className={cn(
'font-black tracking-[0.08em] text-base',
// На тёмном sidebar (indigo-950) чёрный «FOOD» сливался с фоном —
// в dark-варианте берём slate-50 для контраста.
isDark ? 'text-slate-50' : 'text-slate-900 dark:text-slate-100',
)}>
FOOD FOOD
</span> </span>
<span <span
className="font-black text-[11px] tracking-[0.24em] mt-0.5" className="font-black text-[11px] tracking-[0.24em] mt-0.5"
style={{ color: 'var(--color-brand)' }} style={{ color: isDark ? '#34D399' /* emerald-400 для контраста */ : 'var(--color-brand)' }}
> >
MARKET MARKET
</span> </span>

View file

@ -69,7 +69,7 @@ export function SuperAdminLayout() {
<> <>
<div className="px-5 py-4 border-b border-indigo-900/40"> <div className="px-5 py-4 border-b border-indigo-900/40">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Logo /> <Logo variant="dark" />
<span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-200 font-semibold"> <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-200 font-semibold">
Super Super
</span> </span>
@ -128,7 +128,7 @@ export function SuperAdminLayout() {
<header className="md:hidden h-12 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-slate-800 bg-indigo-950 text-white flex-shrink-0"> <header className="md:hidden h-12 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-slate-800 bg-indigo-950 text-white flex-shrink-0">
<button onClick={() => setDrawerOpen(true)}><Menu className="w-6 h-6" /></button> <button onClick={() => setDrawerOpen(true)}><Menu className="w-6 h-6" /></button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Logo /> <Logo variant="dark" />
<span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/30 text-indigo-100">Super</span> <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/30 text-indigo-100">Super</span>
</div> </div>
</header> </header>
@ -169,7 +169,7 @@ export function SuperAdminLayout() {
{orgs.data?.map((o) => ( {orgs.data?.map((o) => (
<button <button
key={o.id} key={o.id}
onClick={() => { setOrgPickerOpen(false); setOrgOverride({ id: o.id, name: o.name }) }} onClick={() => { setOrgPickerOpen(false); setOrgOverride({ id: o.id, name: o.name }, { redirectTo: '/dashboard' }) }}
className="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 truncate" className="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 truncate"
> >
{o.name} {o.name}