fix: tweak custom colors

src/components/header-bar/custom-color-context.jsx

@@ -8,6 +8,7 @@ export const CustomColorProvider = ({ color, bgColor, children }) => {
         () => ({
             color,
             bgColor,
+            hasCustomColor: bgColor !== '#165c92',
         }),
         [color, bgColor]
     )

src/components/header-bar/logo-black.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const LogoIconBlack = ({ className, dataTest }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 200 182"
+            className={className}
+            data-test={dataTest}
+        >
+            <defs></defs>
+            <path
+                fill="#000"
+                d="M191.73,60,109,6.34a19.73,19.73,0,0,0-20.32,0L8.31,58.43a12,12,0,0,0-.25,20.63L88.6,134a19.37,19.37,0,0,0,20.37.25l82.76-53.65a11.88,11.88,0,0,0,0-20.59Zm-91,61.45a4.29,4.29,0,0,1-3.49-.05l-77-52.49L97,19.13a4.76,4.76,0,0,1,3.74,0L179.6,70.28Z"
+            ></path>
+            <path
+                fill="#000"
+                d="M88.66,47.82,45.1,76.06l13.61,9.33L97,60.61a4.76,4.76,0,0,1,3.74,0l39.37,25.52,14-9.06L109,47.82A19.76,19.76,0,0,0,88.66,47.82Z"
+            ></path>
+            <path
+                fill="#000"
+                d="M191.73,101.46l-8.62-5.59-14.05,9.06,10.53,6.83-78.91,51.15a4.37,4.37,0,0,1-3.49,0l-77-52.5,10-6.47L16.55,94.57,8.31,99.91a12,12,0,0,0-.25,20.63L88.6,175.46a19.34,19.34,0,0,0,20.37.24l82.75-53.65a11.88,11.88,0,0,0,0-20.59Z"
+            ></path>
+        </svg>
+    )
+}
+LogoIconBlack.propTypes = {
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+}
+
+export default LogoIconBlack

src/components/header-bar/logo-image.jsx

@@ -1,8 +1,9 @@
 import { useDataQuery } from '@dhis2/app-runtime'
-import { LogoIcon, LogoIconWhite } from '@dhis2-ui/logo'
+import { LogoIconWhite } from '@dhis2-ui/logo'
 import React from 'react'
 import css from 'styled-jsx/css'
 import { useCustomColorContext } from './custom-color-context.jsx'
+import LogoIconBlack from './logo-black.jsx'
 
 const logoStyles = css.resolve`
     svg {
@@ -31,7 +32,7 @@ const pathExists = (data) =>
 
 export const LogoImage = () => {
     const { loading, error, data } = useDataQuery(query)
-    const customColor = useCustomColorContext()
+    const { color, hasCustomColor } = useCustomColorContext()
 
     if (loading) {
         return null
@@ -46,12 +47,10 @@ export const LogoImage = () => {
                 className={logoStyles.className}
             />
         )
+    } else if (hasCustomColor && color === 'black') {
+        Logo = <LogoIconBlack className={logoStyles.className} />
     } else {
-        if (customColor?.color === 'black') {
-            Logo = <LogoIcon className={logoStyles.className} />
-        } else {
-            Logo = <LogoIconWhite className={logoStyles.className} />
-        }
+        Logo = <LogoIconWhite className={logoStyles.className} />
     }
 
     return (

src/components/header-bar/notification-icon.jsx

@@ -15,10 +15,8 @@ function icon(kind, color) {
     }
 }
 
-const getStyles = (customColor) => {
-    const hoverStyle = customColor?.bgColor
-        ? 'opacity: 0.6;'
-        : `background: #104f7e;`
+const getStyles = (bgColor) => {
+    const hoverStyle = bgColor ? 'opacity: 0.6;' : `background: #104f7e;`
 
     return css.resolve`
         a {
@@ -57,10 +55,13 @@ export const NotificationIcon = ({
     title,
     'aria-label': ariaLabel,
 }) => {
-    const customColor = useCustomColorContext()
-    const color = customColor?.color ?? colors.white
+    const {
+        color = colors.white,
+        bgColor,
+        hasCustomColor,
+    } = useCustomColorContext()
 
-    const { className, styles } = getStyles(customColor)
+    const { className, styles } = getStyles(bgColor)
 
     return (
         <Link
@@ -94,6 +95,7 @@ export const NotificationIcon = ({
                         0 1px 2px 0 rgba(0, 0, 0, 0.06);
                     background-color: ${theme.secondary500};
                     border: 1px solid ${theme.secondary700};
+                    ${hasCustomColor ? ` color: white !important;` : ''}
                     color: ${color};
                     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
                     font-size: 12px;

src/components/header-bar/online-status.jsx

@@ -6,10 +6,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales/index.js'
-import styles from './online-status.styles.js'
+import useOnlineStatusStyles from './online-status.styles.jsx'
 
 /** A badge to display online/offline status in the header bar */
 export function OnlineStatus({ dense }) {
+    const styles = useOnlineStatusStyles()
     const { isConnected: online } = useDhis2ConnectionStatus()
     const { onlineStatusMessage } = useOnlineStatusMessage()
 

src/components/header-bar/online-status.styles.jsx

@@ -0,0 +1,112 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import css from 'styled-jsx/css'
+import { useCustomColorContext } from './custom-color-context.jsx'
+
+const useOnlineStatusStyles = () => {
+    const { hasCustomColor, color } = useCustomColorContext()
+
+    // "Lighten" on light backgrounds with black text; "darken" on dark BGs
+    const customBgColor =
+        color === 'black' ? 'rgba(255,255,255, 0.2)' : 'rgba(0,0,0, 0.2)'
+
+    const shadedStyle = hasCustomColor
+        ? `background-color: ${customBgColor}; color: ${color} !important;`
+        : `background-color: #10436a; color: ${colors.grey050};`
+    const textShadow =
+        !hasCustomColor || color === 'white'
+            ? '0px 0px 2px rgba(0, 0, 0, 0.5)'
+            : ''
+
+    return css`
+        .container {
+            display: flex;
+            align-items: center;
+            justify-content: center; // new
+            flex-shrink: 0; // ?
+
+            text-shadow: ${textShadow};
+            ${shadedStyle}
+        }
+
+        .container.badge {
+            margin-inline-end: ${spacers.dp8};
+            padding: 6px;
+            border-radius: 5px;
+            font-size: 13px;
+        }
+
+        .container.bar {
+            display: none;
+            padding: 0px ${spacers.dp4};
+            min-height: 24px;
+            font-size: 13px;
+        }
+
+        @media (max-width: 480px) {
+            .container.badge {
+                display: none;
+            }
+
+            .container.bar {
+                display: flex;
+            }
+        }
+
+        .unselectable {
+            cursor: default;
+            user-select: none;
+        }
+
+        .info {
+            margin-inline-end: ${spacers.dp12};
+        }
+
+        .info-dense {
+            margin-inline-start: ${spacers.dp12};
+            font-size: 12px;
+        }
+
+        .icon {
+            width: 8px;
+            min-width: 8px;
+            height: 8px;
+            border-radius: 8px;
+            margin-inline-end: ${spacers.dp4};
+        }
+
+        .icon.online {
+            background-color: ${colors.teal400};
+        }
+
+        .icon.offline {
+            background-color: transparent;
+            border: 1px solid ${colors.yellow300};
+        }
+
+        .icon.reconnecting {
+            background: ${colors.grey300};
+            -webkit-animation: fadeinout 2s linear infinite;
+            animation: fadeinout 2s linear infinite;
+            opacity: 0;
+        }
+
+        @-webkit-keyframes fadeinout {
+            50% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeinout {
+            50% {
+                opacity: 1;
+            }
+        }
+
+        .label,
+        .info {
+            letter-spacing: 0.1px;
+        }
+    `
+}
+
+export default useOnlineStatusStyles

src/components/header-bar/title.jsx

@@ -1,22 +1,33 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useCustomColorContext } from './custom-color-context.jsx'
 
-export const Title = ({ app, instance }) => (
-    <div data-test="headerbar-title">
-        {app ? `${instance} - ${app}` : `${instance}`}
+export const Title = ({ app, instance }) => {
+    const { hasCustomColor, color } = useCustomColorContext()
 
-        <style jsx>{`
-            div {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                font-size: 13px;
-                letter-spacing: 0.01em;
-                text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-                white-space: nowrap;
-            }
-        `}</style>
-    </div>
-)
+    // Use text shadow for default conditions or white text
+    const shadow =
+        !hasCustomColor || color === 'white'
+            ? 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);'
+            : ''
+
+    return (
+        <div data-test="headerbar-title">
+            {app ? `${instance} - ${app}` : `${instance}`}
+
+            <style jsx>{`
+                div {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 13px;
+                    letter-spacing: 0.01em;
+                    ${shadow}
+                    white-space: nowrap;
+                }
+            `}</style>
+        </div>
+    )
+}
 Title.propTypes = {
     app: PropTypes.string,
     instance: PropTypes.string,