Unify AdminUI logos and favicon with the rocket mark

apps/sensenet/src/components/appbar/desktop-app-bar.tsx

@@ -4,12 +4,12 @@ import { useLogger, useRepository } from '@sensenet/hooks-react'
 import { clsx } from 'clsx'
 import React, { useContext, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import logo from '../../assets/sensenet_white.png'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { loadRepositorySettings } from '../../services/repository-settings-service'
 import { CommandPalette } from '../command-palette/CommandPalette'
+import { SensenetLogo } from '../sensenet-logo'
 import { DesktopNavMenu } from './desktop-nav-menu'
 import '../drawer/app-navigation.css'
 
@@ -111,7 +111,7 @@ export const DesktopAppBar: React.FunctionComponent<{ openDrawer?: () => void; d
       <Toolbar className={classes.toolBar}>
         <div className={globalClasses.centeredVertical}>
           <Link to="/" className={`${globalClasses.centeredVertical} ${classes.logo}`}>
-            <img src={logo} alt="logo" data-test="sensenet-logo" width="29" height="32" />
+            <SensenetLogo data-test="sensenet-logo" />
           </Link>
           {personalSettings.drawer.enabled && (personalSettings.drawer.type === 'temporary' || device === 'mobile') ? (
             <button

apps/sensenet/src/components/dashboard/subscription-widget.tsx

@@ -1,8 +1,8 @@
 import { Button, createStyles, Grid, Link, makeStyles, Paper, Typography } from '@material-ui/core'
 import React from 'react'
-import logo from '../../assets/sensenet-icon-32.png'
 import { widgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
+import { SensenetLogo } from '../sensenet-logo'
 import { DashboardSubscription, DashboardVersion } from './types'
 import { round } from '.'
 
@@ -42,7 +42,7 @@ export const SubscriptionWidget: React.FunctionComponent<SubscriptionWidgetProps
       </Typography>
       <Grid container justify="space-between" component={Paper} elevation={0} className={widgetClasses.container}>
         <Grid item xs={12} lg="auto" className={classes.statusBox}>
-          <img src={logo} alt="logo" width="29" height="32" />
+          <SensenetLogo />
           <div className={widgetClasses.subtitle}>{props.subscription.plan.displayName}</div>
           {props.subscription.plan.baseprice !== undefined &&
             `(${

apps/sensenet/src/components/login/assets/README.md

@@ -1,8 +1,9 @@
 Assets copied without modification from SenseNet/sn-auth:
+
 - src/sn-auth/wwwroot/images/background.png -> local-auth-background.png
-- src/sn-auth/wwwroot/images/sensenet-logo.svg -> local-auth-logo.svg
 - src/sn-auth/wwwroot/fonts/spartan/Spartan-Medium.ttf
 - src/sn-auth/wwwroot/fonts/spartan/Spartan-SemiBold.ttf
 
-The default local login shares SNAuth's visual assets; repository appearance settings
-can replace the background/logo and colors. Rendering uses native HTML/CSS.
+The local login shares SNAuth's background and fonts. Its default brand mark comes
+from the shared AdminUI `SensenetLogo` component; repository appearance settings
+can replace the panel logo, background and colors. Rendering uses native HTML/CSS.

apps/sensenet/src/components/login/auth-override-skeleton.tsx

@@ -1,8 +1,8 @@
 import { AppBar, Button, Container, createStyles, makeStyles, Theme, Toolbar, Typography } from '@material-ui/core'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import logo from '../../assets/sensenet_white.png'
 import { globals, useGlobalStyles } from '../../globalStyles'
+import { SensenetLogo } from '../sensenet-logo'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -58,7 +58,7 @@ export const AuthOverrideSkeleton = (props: {
           <Toolbar className={classes.toolBar}>
             <div className={globalClasses.centeredVertical}>
               <NavLink to="/" style={{ display: 'flex', marginRight: '38px' }}>
-                <img src={logo} alt="logo" style={{ height: '32px', marginTop: '1px' }} />
+                <SensenetLogo style={{ marginTop: '1px' }} />
               </NavLink>
             </div>
           </Toolbar>

apps/sensenet/src/components/login/local-login-page.css

@@ -52,6 +52,10 @@
   max-width: 100%;
   height: auto;
 }
+.local-auth-brand .local-auth-default-logo {
+  width: 96px;
+  height: 96px;
+}
 .local-auth-content {
   flex: 1;
   min-width: 0;
@@ -181,8 +185,8 @@
 }
 .local-auth-footer img {
   display: block;
-  width: 98px;
-  height: auto;
+  width: 32px;
+  height: 32px;
 }
 @media (max-width: 720px) {
   .local-auth-screen {

apps/sensenet/src/components/login/local-login-page.tsx

@@ -1,7 +1,7 @@
 import React, { FormEvent, useEffect, useRef, useState } from 'react'
 import { LocalLoginAppearance, LocalMfaChallenge, LocalRepositorySession } from '../../services/local-authentication'
+import { SensenetLogo } from '../sensenet-logo'
 import background from './assets/local-auth-background.png'
-import logo from './assets/local-auth-logo.svg'
 import './local-login-page.css'
 
 const color = (value: unknown, fallback: string) =>
@@ -14,16 +14,35 @@ const imageUrl = (value?: string) => {
     return undefined
   }
 }
-export const loginAppearance = (appearance: LocalLoginAppearance = {}) =>
-  ({
+const legacyAppearanceColors = {
+  backgroundColor: '#d4f3fa',
+  brandColor: '#38a9cb',
+  buttonColor: '#38a9cb',
+  buttonTextColor: '#ffffff',
+  textColor: '#343b43',
+  panelColor: '#ffffff',
+}
+
+export const loginAppearance = (appearance: LocalLoginAppearance = {}) => {
+  // Older servers send the entire default palette, so a fallback alone cannot update it.
+  // Keep repository branding when any color or image differs from that stock palette.
+  const legacyDefaults =
+    !appearance.logoUrl &&
+    !appearance.backgroundImageUrl &&
+    Object.entries(legacyAppearanceColors).every(([key, expected]) => {
+      const value = appearance[key as keyof LocalLoginAppearance]
+      return value == null || (typeof value === 'string' && value.toLowerCase() === expected)
+    })
+  return {
     '--local-background': color(appearance.backgroundColor, '#d4f3fa'),
-    '--local-brand': color(appearance.brandColor, '#38a9cb'),
+    '--local-brand': legacyDefaults ? '#0197db' : color(appearance.brandColor, '#0197db'),
     '--local-button': color(appearance.buttonColor, '#38a9cb'),
     '--local-button-text': color(appearance.buttonTextColor, '#ffffff'),
     '--local-text': color(appearance.textColor, '#343b43'),
     '--local-panel': color(appearance.panelColor, '#ffffff'),
     backgroundImage: `url(${JSON.stringify(imageUrl(appearance.backgroundImageUrl) || background)})`,
-  } as React.CSSProperties)
+  } as React.CSSProperties
+}
 
 export function LocalLoginPage({
   repositoryUrl,
@@ -57,6 +76,7 @@ export function LocalLoginPage({
   const [failure, setFailure] = useState('')
   const [notice, setNotice] = useState('')
   const appearance = session?.endpoints.appearance
+  const repositoryLogo = imageUrl(appearance?.logoUrl)
   const title = typeof appearance?.title === 'string' ? appearance.title.slice(0, 120) : 'Login to sensenet'
   const busy = working || loading
   const disabled = busy || !session
@@ -136,7 +156,11 @@ export function LocalLoginPage({
     <main className="local-auth-screen" style={loginAppearance(appearance)}>
       <section className="local-auth-card" aria-labelledby="local-auth-title" aria-busy={busy}>
         <aside className="local-auth-brand">
-          <img src={imageUrl(appearance?.logoUrl) || logo} alt="Repository logo" referrerPolicy="no-referrer" />
+          {repositoryLogo ? (
+            <img src={repositoryLogo} alt="Repository logo" referrerPolicy="no-referrer" />
+          ) : (
+            <SensenetLogo className="local-auth-default-logo" />
+          )}
         </aside>
         <div className="local-auth-content">
           <h1 id="local-auth-title">{heading}</h1>
@@ -285,7 +309,7 @@ export function LocalLoginPage({
         </div>
       </section>
       <div className="local-auth-footer">
-        <img src={logo} alt="sensenet" />
+        <SensenetLogo />
       </div>
     </main>
   )

apps/sensenet/src/components/login/login-page.tsx

@@ -29,7 +29,6 @@ import MoreHoriz from '@material-ui/icons/MoreHoriz'
 import Storage from '@material-ui/icons/Storage'
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import snLogo from '../../assets/sensenet_white.png'
 import { globals } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { useRepositoryConnections } from '../../hooks/use-repository-connections'
@@ -42,6 +41,7 @@ import {
   restoreRepositoryConnection,
   setRepositoryConnectionPinned,
 } from '../../services/repository-connections'
+import { SensenetLogo } from '../sensenet-logo'
 
 const recentRepositoryLimit = 6
 
@@ -299,7 +299,7 @@ export default function LoginPage({
     <>
       <AppBar className={classes.appBar}>
         <Link to="/" aria-label="sensenet">
-          <img src={snLogo} alt="sensenet logo" className={classes.logo} />
+          <SensenetLogo className={classes.logo} />
         </Link>
       </AppBar>
       <Container maxWidth="md" className={classes.container}>

apps/sensenet/src/components/sensenet-logo.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import logo from '../assets/admin-favicon.svg'
+
+export function SensenetLogo(props: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'>) {
+  return <img src={logo} alt="sensenet" width={32} height={32} {...props} />
+}

apps/sensenet/src/context/ThemeProvider.tsx

@@ -75,7 +75,7 @@ export const ThemeProvider: React.FunctionComponent = (props) => {
         },
         primary: {
           light: '#00B1E4',
-          main: '#0192db',
+          main: '#0197db',
           dark: '#004E8F',
         },
         secondary: {

apps/sensenet/src/globalStyles.ts

@@ -13,8 +13,8 @@ export const globals = {
     settingsDrawerWidth: 250,
     addButtonHeight: 40,
     //Colors
-    headerBackground: '#0192db',
-    headerLightBackground: '#0192db',
+    headerBackground: '#0197db',
+    headerLightBackground: '#0197db',
     headerText: 'rgba(255,255,255,0.87)',
     secondaryIconSize: '16px',
     elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)',