diff --git a/src/components/header-bar/custom-color-context.jsx b/src/components/header-bar/custom-color-context.jsx index e861fcd..f76eba7 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: bgColor !== '#165c92', }), [color, bgColor] ) diff --git a/src/components/header-bar/logo-black.jsx b/src/components/header-bar/logo-black.jsx new file mode 100644 index 0000000..f40d776 --- /dev/null +++ b/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 ( + + + + + + + ) +} +LogoIconBlack.propTypes = { + className: PropTypes.string, + dataTest: PropTypes.string, +} + +export default LogoIconBlack diff --git a/src/components/header-bar/logo-image.jsx b/src/components/header-bar/logo-image.jsx index 4664cd7..7dde36e 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 @@ -46,12 +47,10 @@ export const LogoImage = () => { className={logoStyles.className} /> ) + } else if (hasCustomColor && color === 'black') { + Logo = } else { - if (customColor?.color === 'black') { - Logo = - } else { - Logo = - } + Logo = } return ( diff --git a/src/components/header-bar/notification-icon.jsx b/src/components/header-bar/notification-icon.jsx index 1d36b2c..71b6245 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,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 ( { + 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 diff --git a/src/components/header-bar/title.jsx b/src/components/header-bar/title.jsx index e2bc2e1..eaf0536 100755 --- a/src/components/header-bar/title.jsx +++ b/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 }) => ( -
- {app ? `${instance} - ${app}` : `${instance}`} +export const Title = ({ app, instance }) => { + const { hasCustomColor, color } = useCustomColorContext() - -
-) + // 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 ( +
+ {app ? `${instance} - ${app}` : `${instance}`} + + +
+ ) +} Title.propTypes = { app: PropTypes.string, instance: PropTypes.string,