diff --git a/admin-frontend/public/brand/README.md b/admin-frontend/public/brand/README.md index 31568bf..b0c203d 100644 --- a/admin-frontend/public/brand/README.md +++ b/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 +``` diff --git a/admin-frontend/public/brand/jrcc-logo-dark.png b/admin-frontend/public/brand/jrcc-logo-dark.png index 9fb6a40..1b98739 100644 Binary files a/admin-frontend/public/brand/jrcc-logo-dark.png and b/admin-frontend/public/brand/jrcc-logo-dark.png differ diff --git a/admin-frontend/src/components/JrccLogo.tsx b/admin-frontend/src/components/JrccLogo.tsx new file mode 100644 index 0000000..2e48a8f --- /dev/null +++ b/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 ( + {alt} + ) +} diff --git a/admin-frontend/src/components/Layout.tsx b/admin-frontend/src/components/Layout.tsx index f7ca9a2..9fdd921 100644 --- a/admin-frontend/src/components/Layout.tsx +++ b/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 - {/* Top bar */} -
+ {/* Top bar — paper tone (not pure white) so light mode meets the navy rail cleanly */} +
) : ( - {/* Dark-bg wordmark on navy rail */} - + )}
diff --git a/admin-frontend/src/index.css b/admin-frontend/src/index.css index 6430231..7e1fdb1 100644 --- a/admin-frontend/src/index.css +++ b/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; diff --git a/admin-frontend/src/pages/Dashboard.tsx b/admin-frontend/src/pages/Dashboard.tsx index e341777..3ba01b7 100644 --- a/admin-frontend/src/pages/Dashboard.tsx +++ b/admin-frontend/src/pages/Dashboard.tsx @@ -111,7 +111,7 @@ export default function Dashboard() {
  • {item.title} diff --git a/admin-frontend/src/pages/Login.tsx b/admin-frontend/src/pages/Login.tsx index df04f0c..fe5759f 100644 --- a/admin-frontend/src/pages/Login.tsx +++ b/admin-frontend/src/pages/Login.tsx @@ -70,12 +70,12 @@ export default function Login() { Jewish Russian Community Centre Jewish Russian Community Centre

    • Photos Admin

    diff --git a/viewer-frontend/public/brand/README.md b/viewer-frontend/public/brand/README.md index 31568bf..d4e5419 100644 --- a/viewer-frontend/public/brand/README.md +++ b/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 +``` diff --git a/viewer-frontend/public/brand/jrcc-logo-dark.png b/viewer-frontend/public/brand/jrcc-logo-dark.png index 8dbf2ff..1b98739 100644 Binary files a/viewer-frontend/public/brand/jrcc-logo-dark.png and b/viewer-frontend/public/brand/jrcc-logo-dark.png differ