From 1e807c9b2ff7f818117649071fbcb3ace6fb98c2 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Thu, 9 Apr 2026 13:01:53 +0100 Subject: [PATCH 01/16] fix(DHIS2-21100): remove shadow when using custom colors --- .../header-bar/custom-color-context.jsx | 1 + src/components/header-bar/title.jsx | 36 +++++++++++-------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/header-bar/custom-color-context.jsx b/src/components/header-bar/custom-color-context.jsx index e861fcd..06f4f6e 100644 --- a/src/components/header-bar/custom-color-context.jsx +++ b/src/components/header-bar/custom-color-context.jsx @@ -8,6 +8,7 @@ export const CustomColorProvider = ({ color, bgColor, children }) => { () => ({ color, bgColor, + hasCustomColor: !!color, }), [color, bgColor] ) diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index e2bc2e1..5d8b24d 100755 --- a/src/components/header-bar/title.jsx +++ b/src/components/header-bar/title.jsx @@ -1,22 +1,28 @@ import PropTypes from 'prop-types' import React from 'react' +import { useCustomColorContext } from './custom-color-context.jsx' -export const Title = ({ app, instance }) => ( -
- {app ? `${instance} - ${app}` : `${instance}`} +export const Title = ({ app, instance }) => { + const { hasCustomColor } = useCustomColorContext() + return ( +
+ {app ? `${instance} - ${app}` : `${instance}`} - -
-) + +
+ ) +} Title.propTypes = { app: PropTypes.string, instance: PropTypes.string, From 54ea651e674be115baaed899253902a2d73577f4 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Thu, 9 Apr 2026 13:19:49 +0100 Subject: [PATCH 02/16] fix(DHIS2-21100): adapt badge color --- .../header-bar/notification-icon.jsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/header-bar/notification-icon.jsx b/src/components/header-bar/notification-icon.jsx index 1d36b2c..5a87930 100755 --- a/src/components/header-bar/notification-icon.jsx +++ b/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,18 @@ 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 badgeBackgroundStyle = !hasCustomColor + ? `background-color: ${theme.secondary500}; + border: 1px solid ${theme.secondary700};` + : `background-color: ${color}; color: ${bgColor} !important;` + + const { className, styles } = getStyles(bgColor) return ( Date: Thu, 9 Apr 2026 14:49:14 +0100 Subject: [PATCH 03/16] fix(DHIS2-21100): update shading for titles --- src/components/header-bar/title.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index 5d8b24d..feafe3a 100755 --- a/src/components/header-bar/title.jsx +++ b/src/components/header-bar/title.jsx @@ -3,7 +3,11 @@ import React from 'react' import { useCustomColorContext } from './custom-color-context.jsx' export const Title = ({ app, instance }) => { - const { hasCustomColor } = useCustomColorContext() + const { hasCustomColor, color } = useCustomColorContext() + const shadowColor = color === 'black' ? 'white' : 'black' + const shadow = hasCustomColor + ? `text-shadow: 0px 0px 2px ${shadowColor};` + : 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' return (
{app ? `${instance} - ${app}` : `${instance}`} @@ -14,9 +18,7 @@ export const Title = ({ app, instance }) => { text-overflow: ellipsis; font-size: 13px; letter-spacing: 0.01em; - ${!hasCustomColor - ? 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' - : ''} + ${shadow} white-space: nowrap; } `} From fd01dbf6e3cd39608cf4379c24804d6fe2f0aa19 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Thu, 9 Apr 2026 15:05:09 +0100 Subject: [PATCH 04/16] fix(DHIS2-21100): update colors for online status --- src/components/header-bar/online-status.jsx | 7 +- .../header-bar/online-status.styles.js | 93 --------------- .../header-bar/online-status.styles.jsx | 106 ++++++++++++++++++ 3 files changed, 110 insertions(+), 96 deletions(-) delete mode 100644 src/components/header-bar/online-status.styles.js create mode 100644 src/components/header-bar/online-status.styles.jsx diff --git a/src/components/header-bar/online-status.jsx b/src/components/header-bar/online-status.jsx index 2ff5f38..25b8c99 100644 --- a/src/components/header-bar/online-status.jsx +++ b/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 getStyles from './online-status.styles.jsx' /** A badge to display online/offline status in the header bar */ export function OnlineStatus({ dense }) { + const { styles, className } = getStyles() const { isConnected: online } = useDhis2ConnectionStatus() const { onlineStatusMessage } = useOnlineStatusMessage() @@ -17,7 +18,7 @@ export function OnlineStatus({ dense }) { return (
{onlineStatusMessage && !dense && ( @@ -30,7 +31,7 @@ export function OnlineStatus({ dense }) { {onlineStatusMessage} )} - + {styles}
) } diff --git a/src/components/header-bar/online-status.styles.js b/src/components/header-bar/online-status.styles.js deleted file mode 100644 index c6bd875..0000000 --- a/src/components/header-bar/online-status.styles.js +++ /dev/null @@ -1,93 +0,0 @@ -import { colors, spacers } from '@dhis2/ui-constants' -import css from 'styled-jsx/css' - -export default css` - .container { - display: flex; - align-items: center; - justify-content: center; // new - background-color: #10436a; - flex-shrink: 0; // ? - color: ${colors.grey050}; - text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); - } - - .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; - } -` diff --git a/src/components/header-bar/online-status.styles.jsx b/src/components/header-bar/online-status.styles.jsx new file mode 100644 index 0000000..e76c126 --- /dev/null +++ b/src/components/header-bar/online-status.styles.jsx @@ -0,0 +1,106 @@ +import { colors, spacers } from '@dhis2/ui-constants' +import css from 'styled-jsx/css' +import { useCustomColorContext } from './custom-color-context.jsx' + +export default () => { + const { hasCustomColor, color } = useCustomColorContext() + + const customBgColor = + color === 'black' ? 'rgba(255,255,255, 0.45)' : 'rgba(0,0,0, 0.25)' + + const customBorderColor = + color === 'black' ? 'rgba(0,0,0, 0.15)' : 'rgba(255,255,255, 0.25)' + + const shadedStyle = hasCustomColor + ? `background-color: ${customBgColor}; border: 1px solid ${customBorderColor}; color: ${color} !important;` + : 'background-color: #10436a; color: ${colors.grey050}; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' + return css.resolve` + .container { + display: flex; + align-items: center; + justify-content: center; // new + flex-shrink: 0; // ? + + ${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; + } + ` +} From 12c97e8a44863572699547a5010b5f7916a4d561 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Thu, 9 Apr 2026 15:43:19 +0100 Subject: [PATCH 05/16] fix: add opacity to text-shadow --- src/components/header-bar/title.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index feafe3a..34093ff 100755 --- a/src/components/header-bar/title.jsx +++ b/src/components/header-bar/title.jsx @@ -4,7 +4,8 @@ import { useCustomColorContext } from './custom-color-context.jsx' export const Title = ({ app, instance }) => { const { hasCustomColor, color } = useCustomColorContext() - const shadowColor = color === 'black' ? 'white' : 'black' + const shadowColor = + color === 'black' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)' const shadow = hasCustomColor ? `text-shadow: 0px 0px 2px ${shadowColor};` : 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' From 4de6271487aa6c7e9ffc3f0edb9470507d633fdc Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Fri, 10 Apr 2026 16:44:08 +0100 Subject: [PATCH 06/16] fix: apply shadow for white text only --- src/components/header-bar/title.jsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index 34093ff..77cb689 100755 --- a/src/components/header-bar/title.jsx +++ b/src/components/header-bar/title.jsx @@ -4,11 +4,18 @@ import { useCustomColorContext } from './custom-color-context.jsx' export const Title = ({ app, instance }) => { const { hasCustomColor, color } = useCustomColorContext() - const shadowColor = - color === 'black' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)' - const shadow = hasCustomColor - ? `text-shadow: 0px 0px 2px ${shadowColor};` - : 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' + + let shadow = 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' // default used when no custom colour + + if (hasCustomColor) { + // for custom colors, only apply shadow for white + if (color === 'white') { + shadow = 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' + } else { + shadow = '' + } + } + return (
{app ? `${instance} - ${app}` : `${instance}`} From 5c350fcb04ec3100de2f08be63502e1476cfacf5 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Fri, 10 Apr 2026 16:47:15 +0100 Subject: [PATCH 07/16] fix: remove border for online status --- src/components/header-bar/online-status.styles.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/header-bar/online-status.styles.jsx b/src/components/header-bar/online-status.styles.jsx index e76c126..1f41272 100644 --- a/src/components/header-bar/online-status.styles.jsx +++ b/src/components/header-bar/online-status.styles.jsx @@ -6,14 +6,12 @@ export default () => { const { hasCustomColor, color } = useCustomColorContext() const customBgColor = - color === 'black' ? 'rgba(255,255,255, 0.45)' : 'rgba(0,0,0, 0.25)' - - const customBorderColor = - color === 'black' ? 'rgba(0,0,0, 0.15)' : 'rgba(255,255,255, 0.25)' + color === 'black' ? 'rgba(255,255,255, 0.2)' : 'rgba(0,0,0, 0.2)' const shadedStyle = hasCustomColor - ? `background-color: ${customBgColor}; border: 1px solid ${customBorderColor}; color: ${color} !important;` + ? `background-color: ${customBgColor}; color: ${color} !important;` : 'background-color: #10436a; color: ${colors.grey050}; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' + return css.resolve` .container { display: flex; From 229af99c505f312851ba3c22357df1154e64688c Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Fri, 10 Apr 2026 16:50:39 +0100 Subject: [PATCH 08/16] fix: keep badge green always --- src/components/header-bar/notification-icon.jsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/header-bar/notification-icon.jsx b/src/components/header-bar/notification-icon.jsx index 5a87930..71b6245 100755 --- a/src/components/header-bar/notification-icon.jsx +++ b/src/components/header-bar/notification-icon.jsx @@ -61,11 +61,6 @@ export const NotificationIcon = ({ hasCustomColor, } = useCustomColorContext() - const badgeBackgroundStyle = !hasCustomColor - ? `background-color: ${theme.secondary500}; - border: 1px solid ${theme.secondary700};` - : `background-color: ${color}; color: ${bgColor} !important;` - const { className, styles } = getStyles(bgColor) return ( @@ -98,7 +93,9 @@ export const NotificationIcon = ({ border-radius: ${spacers.dp12}; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - ${badgeBackgroundStyle} + 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; From 13ce61956ae8b64f6b061247688e1421aec3be68 Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Fri, 10 Apr 2026 17:05:46 +0100 Subject: [PATCH 09/16] fix: apply black icon on light backgrounds --- src/components/header-bar/logo-black.jsx | 23 +++++++++++++++++++++++ src/components/header-bar/logo-image.jsx | 13 +++++++++---- 2 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 src/components/header-bar/logo-black.jsx diff --git a/src/components/header-bar/logo-black.jsx b/src/components/header-bar/logo-black.jsx new file mode 100644 index 0000000..efcaa70 --- /dev/null +++ b/src/components/header-bar/logo-black.jsx @@ -0,0 +1,23 @@ +import React from 'react' + +const LogoIconBlack = () => { + return ( + + + + + + + ) +} + +export default LogoIconBlack diff --git a/src/components/header-bar/logo-image.jsx b/src/components/header-bar/logo-image.jsx index 4664cd7..04c9835 100644 --- a/src/components/header-bar/logo-image.jsx +++ b/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 @@ -47,8 +48,12 @@ export const LogoImage = () => { /> ) } else { - if (customColor?.color === 'black') { - Logo = + if (hasCustomColor) { + if (color === 'black') { + Logo = + } else { + Logo = + } } else { Logo = } From 135a927afbcdd873b7d802868acf3721120be5ab Mon Sep 17 00:00:00 2001 From: Mozafar Haider Date: Mon, 13 Apr 2026 14:47:13 +0100 Subject: [PATCH 10/16] fix: missing online circle icon --- src/components/header-bar/online-status.jsx | 6 +++--- src/components/header-bar/online-status.styles.jsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/header-bar/online-status.jsx b/src/components/header-bar/online-status.jsx index 25b8c99..d787ac3 100644 --- a/src/components/header-bar/online-status.jsx +++ b/src/components/header-bar/online-status.jsx @@ -10,7 +10,7 @@ import getStyles from './online-status.styles.jsx' /** A badge to display online/offline status in the header bar */ export function OnlineStatus({ dense }) { - const { styles, className } = getStyles() + const styles = getStyles() const { isConnected: online } = useDhis2ConnectionStatus() const { onlineStatusMessage } = useOnlineStatusMessage() @@ -18,7 +18,7 @@ export function OnlineStatus({ dense }) { return (
{onlineStatusMessage && !dense && ( @@ -31,7 +31,7 @@ export function OnlineStatus({ dense }) { {onlineStatusMessage} )} - {styles} +
) } diff --git a/src/components/header-bar/online-status.styles.jsx b/src/components/header-bar/online-status.styles.jsx index 1f41272..9b65b9c 100644 --- a/src/components/header-bar/online-status.styles.jsx +++ b/src/components/header-bar/online-status.styles.jsx @@ -12,7 +12,7 @@ export default () => { ? `background-color: ${customBgColor}; color: ${color} !important;` : 'background-color: #10436a; color: ${colors.grey050}; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' - return css.resolve` + return css` .container { display: flex; align-items: center; From cdc754d4bc579b5e6c0a4c395de4617825984af3 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 00:30:07 +0200 Subject: [PATCH 11/16] fix: dark logo sizing --- src/components/header-bar/logo-black.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/header-bar/logo-black.jsx b/src/components/header-bar/logo-black.jsx index efcaa70..f40d776 100644 --- a/src/components/header-bar/logo-black.jsx +++ b/src/components/header-bar/logo-black.jsx @@ -1,8 +1,14 @@ +import PropTypes from 'prop-types' import React from 'react' -const LogoIconBlack = () => { +const LogoIconBlack = ({ className, dataTest }) => { return ( - + { ) } +LogoIconBlack.propTypes = { + className: PropTypes.string, + dataTest: PropTypes.string, +} export default LogoIconBlack From be730b5021701d1762e79aa777902902a3b242e0 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 00:50:18 +0200 Subject: [PATCH 12/16] fix: hasCustomColor logic --- src/components/header-bar/custom-color-context.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header-bar/custom-color-context.jsx b/src/components/header-bar/custom-color-context.jsx index 06f4f6e..f76eba7 100644 --- a/src/components/header-bar/custom-color-context.jsx +++ b/src/components/header-bar/custom-color-context.jsx @@ -8,7 +8,7 @@ export const CustomColorProvider = ({ color, bgColor, children }) => { () => ({ color, bgColor, - hasCustomColor: !!color, + hasCustomColor: bgColor !== '#165c92', }), [color, bgColor] ) From ad012bed0472fe693bcc3eae7cb455e49a1cd41a Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 00:50:49 +0200 Subject: [PATCH 13/16] fix: default online badge styles and text shadow logic --- src/components/header-bar/online-status.styles.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/header-bar/online-status.styles.jsx b/src/components/header-bar/online-status.styles.jsx index 9b65b9c..510731b 100644 --- a/src/components/header-bar/online-status.styles.jsx +++ b/src/components/header-bar/online-status.styles.jsx @@ -5,12 +5,17 @@ import { useCustomColorContext } from './custom-color-context.jsx' export default () => { 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}; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' + : `background-color: #10436a; color: ${colors.grey050};` + const textShadow = + !hasCustomColor || color === 'white' + ? '0px 0px 2px rgba(0, 0, 0, 0.5)' + : '' return css` .container { @@ -19,6 +24,7 @@ export default () => { justify-content: center; // new flex-shrink: 0; // ? + text-shadow: ${textShadow}; ${shadedStyle} } From 896c273089f36fc4226828a4142857343a224cf9 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 00:58:21 +0200 Subject: [PATCH 14/16] refactor: simplify text shadow logic --- src/components/header-bar/title.jsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index 77cb689..eaf0536 100755 --- a/src/components/header-bar/title.jsx +++ b/src/components/header-bar/title.jsx @@ -5,16 +5,11 @@ import { useCustomColorContext } from './custom-color-context.jsx' export const Title = ({ app, instance }) => { const { hasCustomColor, color } = useCustomColorContext() - let shadow = 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' // default used when no custom colour - - if (hasCustomColor) { - // for custom colors, only apply shadow for white - if (color === 'white') { - shadow = 'text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);' - } else { - shadow = '' - } - } + // 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 (
From 5add2510935603d10bec6d1acd3a8722869b70c3 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 01:06:31 +0200 Subject: [PATCH 15/16] refactor: rename using hook conventions --- src/components/header-bar/online-status.jsx | 4 ++-- src/components/header-bar/online-status.styles.jsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/header-bar/online-status.jsx b/src/components/header-bar/online-status.jsx index d787ac3..fd63188 100644 --- a/src/components/header-bar/online-status.jsx +++ b/src/components/header-bar/online-status.jsx @@ -6,11 +6,11 @@ import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' import i18n from '../../locales/index.js' -import getStyles from './online-status.styles.jsx' +import useOnlineStatusStyles from './online-status.styles.jsx' /** A badge to display online/offline status in the header bar */ export function OnlineStatus({ dense }) { - const styles = getStyles() + const styles = useOnlineStatusStyles() const { isConnected: online } = useDhis2ConnectionStatus() const { onlineStatusMessage } = useOnlineStatusMessage() diff --git a/src/components/header-bar/online-status.styles.jsx b/src/components/header-bar/online-status.styles.jsx index 510731b..a33f0b8 100644 --- a/src/components/header-bar/online-status.styles.jsx +++ b/src/components/header-bar/online-status.styles.jsx @@ -2,7 +2,7 @@ import { colors, spacers } from '@dhis2/ui-constants' import css from 'styled-jsx/css' import { useCustomColorContext } from './custom-color-context.jsx' -export default () => { +const useOnlineStatusStyles = () => { const { hasCustomColor, color } = useCustomColorContext() // "Lighten" on light backgrounds with black text; "darken" on dark BGs @@ -108,3 +108,5 @@ export default () => { } ` } + +export default useOnlineStatusStyles From c26f971d94a97afd64809903d8363d6641e25de0 Mon Sep 17 00:00:00 2001 From: Kai Vandivier Date: Tue, 14 Apr 2026 01:10:37 +0200 Subject: [PATCH 16/16] refactor: logo if clauses --- src/components/header-bar/logo-image.jsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/header-bar/logo-image.jsx b/src/components/header-bar/logo-image.jsx index 04c9835..7dde36e 100644 --- a/src/components/header-bar/logo-image.jsx +++ b/src/components/header-bar/logo-image.jsx @@ -47,16 +47,10 @@ export const LogoImage = () => { className={logoStyles.className} /> ) + } else if (hasCustomColor && color === 'black') { + Logo = } else { - if (hasCustomColor) { - if (color === 'black') { - Logo = - } else { - Logo = - } - } else { - Logo = - } + Logo = } return (