Merge pull request 'Fix JRCC logo alpha + admin light theme' (#101) from feature/admin-light-logo-fix into master

admin-frontend/public/brand/README.md

@@ -1,12 +1,13 @@
-# Brand assets (JRCC)
+# JRCC brand assets (admin)
 
 | File | Use |
 |------|-----|
-| `jrcc-logo-light.png` | Top-left header in **light** mode (classic B&W bilingual) |
-| `jrcc-logo-dark.png` | Top-left header in **dark** mode (white bilingual, transparent) |
+| `jrcc-logo-light.png` | Black bilingual wordmark **with alpha** — light surfaces (login card, light headers) |
+| `jrcc-logo-dark.png` | White bilingual wordmark **with alpha** — navy rail / dark surfaces |
 | `jrcc-watermark.png` | Diagonal guest watermark on photos |
-| `../logo.png` | SSR / fallback copy of the light logo |
 
-Source PDFs (not committed): `JRCC Logo - Rus-Eng.pdf`, `JRCC Logo 1 - Vector.pdf`.
+`jrcc-logo-dark.png` must keep transparency. An opaque grayscale export paints a white plate on the sidebar — regenerate from the light asset with ImageMagick if needed:
 
-Style picker (nine directions): `/styles`
+```bash
+magick jrcc-logo-light.png -channel RGB -negate +channel jrcc-logo-dark.png
+```

admin-frontend/src/components/JrccLogo.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from '../context/ThemeContext'
+
+type JrccLogoProps = {
+  className?: string
+  /** Force the white wordmark (navy chrome). */
+  onDark?: boolean
+  alt?: string
+}
+
+/**
+ * JRCC wordmark — light asset is black+alpha; dark asset is white+alpha.
+ * Use `onDark` on the navy rail so the plate never flashes white.
+ */
+export default function JrccLogo({
+  className = 'h-10 w-auto',
+  onDark = false,
+  alt = 'Jewish Russian Community Centre',
+}: JrccLogoProps) {
+  const { theme } = useTheme()
+  const useWhite = onDark || theme === 'dark'
+  return (
+    <img
+      src={useWhite ? '/brand/jrcc-logo-dark.png' : '/brand/jrcc-logo-light.png'}
+      alt={alt}
+      className={className}
+      decoding="async"
+    />
+  )
+}

admin-frontend/src/components/Layout.tsx

@@ -3,6 +3,7 @@ import { Outlet, Link, useLocation } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
 import { useInactivityTimeout } from '../hooks/useInactivityTimeout'
 import ThemeToggle from './ThemeToggle'
+import JrccLogo from './JrccLogo'
 
 const INACTIVITY_TIMEOUT_MS = 30 * 60 * 1000
 
@@ -120,8 +121,8 @@ export default function Layout() {
         Skip to main content
       </a>
 
-      {/* Top bar */}
-      <header className="bg-card border-b border-border shadow-sm">
+      {/* Top bar — paper tone (not pure white) so light mode meets the navy rail cleanly */}
+      <header className="border-b border-border bg-background">
         <div className="flex">
           <div
             className={`${railWidth} fixed left-0 top-0 z-10 flex h-16 items-center justify-center border-b border-sidebar-border bg-sidebar px-3`}
@@ -145,8 +146,7 @@ export default function Layout() {
               </button>
             ) : (
               <Link to="/" className="flex items-center justify-center transition-opacity hover:opacity-90" aria-label="JRCC admin home">
-                {/* Dark-bg wordmark on navy rail */}
-                <img src="/brand/jrcc-logo-dark.png" alt="" className="h-10 w-auto" />
+                <JrccLogo onDark className="h-10 w-auto max-w-[min(100%,220px)]" alt="" />
               </Link>
             )}
           </div>

admin-frontend/src/index.css

@@ -10,26 +10,27 @@
   immediately (viewer keeps a lighter header; admin is a denser tool UI).
 */
 :root {
+  /* Light: soft navy paper — avoids stark white vs deep sidebar */
   --radius: 0.625rem;
-  --background: #f5f7fb;
+  --background: #e8edf6;
   --foreground: #0b1f4b;
-  --card: #ffffff;
+  --card: #f3f6fb;
   --card-foreground: #0b1f4b;
-  --popover: #ffffff;
+  --popover: #f7f9fc;
   --popover-foreground: #0b1f4b;
   --primary: #0038a8;
   --primary-foreground: #ffffff;
-  --secondary: #e8eef8;
+  --secondary: #d9e2f2;
   --secondary-foreground: #0b1f4b;
-  --muted: #e8eef8;
+  --muted: #d9e2f2;
   --muted-foreground: #3d4f73;
   --accent: #0038a8;
   --accent-foreground: #ffffff;
-  --gold: #c4a35a;
+  --gold: #b8923f;
   --gold-foreground: #1c1508;
   --destructive: #b91c1c;
-  --border: rgba(11, 31, 75, 0.12);
-  --input: rgba(11, 31, 75, 0.14);
+  --border: rgba(11, 31, 75, 0.18);
+  --input: rgba(11, 31, 75, 0.2);
   --ring: #0038a8;
   --sidebar: #0b1f4b;
   --sidebar-foreground: #f5f7fb;

admin-frontend/src/pages/Dashboard.tsx

@@ -111,7 +111,7 @@ export default function Dashboard() {
             <li key={item.to}>
               <Link
                 to={item.to}
-                className="group flex h-full flex-col gap-1 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:border-primary/40 hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="group flex h-full flex-col gap-1 rounded-lg border border-border bg-card/80 px-4 py-3 shadow-sm transition-colors hover:border-primary/35 hover:bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <span className="font-medium text-foreground group-hover:text-primary">
                   {item.title}

admin-frontend/src/pages/Login.tsx

@@ -70,12 +70,12 @@ export default function Login() {
               <img
                 src="/brand/jrcc-logo-light.png"
                 alt="Jewish Russian Community Centre"
-                className="h-14 w-auto dark:hidden"
+                className="h-14 w-auto max-w-[260px] dark:hidden"
               />
               <img
                 src="/brand/jrcc-logo-dark.png"
                 alt="Jewish Russian Community Centre"
-                className="hidden h-14 w-auto dark:block"
+                className="hidden h-14 w-auto max-w-[260px] dark:block"
               />
             </div>
             <h1 className="font-display text-xl font-semibold text-foreground">Photos Admin</h1>

viewer-frontend/public/brand/README.md

@@ -1,12 +1,13 @@
-# Brand assets (JRCC)
+# JRCC brand assets (viewer)
 
 | File | Use |
 |------|-----|
-| `jrcc-logo-light.png` | Top-left header in **light** mode (classic B&W bilingual) |
-| `jrcc-logo-dark.png` | Top-left header in **dark** mode (white bilingual, transparent) |
+| `jrcc-logo-light.png` | Black bilingual wordmark **with alpha** — light header |
+| `jrcc-logo-dark.png` | White bilingual wordmark **with alpha** — dark header |
 | `jrcc-watermark.png` | Diagonal guest watermark on photos |
-| `../logo.png` | SSR / fallback copy of the light logo |
 
-Source PDFs (not committed): `JRCC Logo - Rus-Eng.pdf`, `JRCC Logo 1 - Vector.pdf`.
+Keep alpha on the dark asset. Regenerate from light if a flat white plate appears:
 
-Style picker (nine directions): `/styles`
+```bash
+magick jrcc-logo-light.png -channel RGB -negate +channel jrcc-logo-dark.png
+```