From 570839159cdd9e5a8043124c5e2493afe9322f9e Mon Sep 17 00:00:00 2001 From: janrembold Date: Mon, 13 May 2024 17:09:26 +0200 Subject: [PATCH 1/3] fix: use topic long title as preselected topic name --- .../registration/preselectionBox/PreselectedTopic.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx b/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx index 26c92e0b4..dd8631e9d 100644 --- a/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx +++ b/src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx @@ -41,7 +41,9 @@ const PreselectedTopic = ({ ) : ( - {topic.name} + + {topic.titles?.long || topic.name} + )} ); From 4569a8c0af7beaff6a878074dbf32ebb2f9863b6 Mon Sep 17 00:00:00 2001 From: janrembold Date: Tue, 14 May 2024 11:37:47 +0200 Subject: [PATCH 2/3] fix: incompatible theming with old customer styles --- src/extensions/theme.jsx | 2 +- src/utils/useTenantTheming.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/extensions/theme.jsx b/src/extensions/theme.jsx index 0f7d27397..526313fa8 100644 --- a/src/extensions/theme.jsx +++ b/src/extensions/theme.jsx @@ -35,7 +35,7 @@ const theme = createTheme({ }, typography: { - fontFamily: ['Roboto', 'cursive', 'sans-serif'].join(','), + fontFamily: ['Arial', 'sans-serif'].join(','), h1: { color: getCssVarValue('--black'), letterSpacing: 'normal', diff --git a/src/utils/useTenantTheming.ts b/src/utils/useTenantTheming.ts index a7528a47c..28aa25a75 100644 --- a/src/utils/useTenantTheming.ts +++ b/src/utils/useTenantTheming.ts @@ -183,7 +183,8 @@ const getOrCreateHeadNode = ( const applyTheming = (tenant: TenantDataInterface) => { if (tenant.theming) { - injectCss(tenant.theming); + // Currently not compatible with latest customer theming + // injectCss(tenant.theming); getOrCreateHeadNode('meta', { name: 'theme-color' }).setAttribute( 'content', From 080d02c844097b0b66c7a36f613c6e0ab7139b25 Mon Sep 17 00:00:00 2001 From: janrembold Date: Tue, 14 May 2024 11:54:10 +0200 Subject: [PATCH 3/3] fix: remove unused functions --- src/utils/useTenantTheming.ts | 279 +++++++++++++++++----------------- 1 file changed, 139 insertions(+), 140 deletions(-) diff --git a/src/utils/useTenantTheming.ts b/src/utils/useTenantTheming.ts index 28aa25a75..4917609c7 100644 --- a/src/utils/useTenantTheming.ts +++ b/src/utils/useTenantTheming.ts @@ -4,71 +4,70 @@ import { TenantContext, useLocaleData } from '../globalState'; import { TenantDataInterface } from '../globalState/interfaces'; import getLocationVariables from './getLocationVariables'; import decodeHTML from './decodeHTML'; -import contrast from 'get-contrast'; import { useAppConfig } from '../hooks/useAppConfig'; -const RGBToHSL = (r, g, b) => { - // Make r, g, and b fractions of 1 - r /= 255; - g /= 255; - b /= 255; - - // Find greatest and smallest channel values - const cmin = Math.min(r, g, b); - const cmax = Math.max(r, g, b); - const delta = cmax - cmin; - let h; - let s; - let l; - - // Calculate hue - // No difference - if (delta === 0) h = 0; - // Red is max - else if (cmax === r) h = ((g - b) / delta) % 6; - // Green is max - else if (cmax === g) h = (b - r) / delta + 2; - // Blue is max - else h = (r - g) / delta + 4; - - h = Math.round(h * 60); - - // Make negative hues positive behind 360° - if (h < 0) h += 360; - - // Calculate lightness - l = (cmax + cmin) / 2; - - // Calculate saturation - s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); - - // Multiply l and s by 100 - s = +(s * 100).toFixed(1); - l = +(l * 100).toFixed(1); - - return { h, s, l }; -}; - -const hexToRGB = (hex) => { - let r = '0'; - let g = '0'; - let b = '0'; - - // 3 digits - if (hex.length === 4) { - r = '0x' + hex[1] + hex[1]; - g = '0x' + hex[2] + hex[2]; - b = '0x' + hex[3] + hex[3]; - - // 6 digits - } else if (hex.length === 7) { - r = '0x' + hex[1] + hex[2]; - g = '0x' + hex[3] + hex[4]; - b = '0x' + hex[5] + hex[6]; - } - - return RGBToHSL(r, g, b); -}; +// const RGBToHSL = (r, g, b) => { +// // Make r, g, and b fractions of 1 +// r /= 255; +// g /= 255; +// b /= 255; + +// // Find greatest and smallest channel values +// const cmin = Math.min(r, g, b); +// const cmax = Math.max(r, g, b); +// const delta = cmax - cmin; +// let h; +// let s; +// let l; + +// // Calculate hue +// // No difference +// if (delta === 0) h = 0; +// // Red is max +// else if (cmax === r) h = ((g - b) / delta) % 6; +// // Green is max +// else if (cmax === g) h = (b - r) / delta + 2; +// // Blue is max +// else h = (r - g) / delta + 4; + +// h = Math.round(h * 60); + +// // Make negative hues positive behind 360° +// if (h < 0) h += 360; + +// // Calculate lightness +// l = (cmax + cmin) / 2; + +// // Calculate saturation +// s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + +// // Multiply l and s by 100 +// s = +(s * 100).toFixed(1); +// l = +(l * 100).toFixed(1); + +// return { h, s, l }; +// }; + +// const hexToRGB = (hex) => { +// let r = '0'; +// let g = '0'; +// let b = '0'; + +// // 3 digits +// if (hex.length === 4) { +// r = '0x' + hex[1] + hex[1]; +// g = '0x' + hex[2] + hex[2]; +// b = '0x' + hex[3] + hex[3]; + +// // 6 digits +// } else if (hex.length === 7) { +// r = '0x' + hex[1] + hex[2]; +// g = '0x' + hex[3] + hex[4]; +// b = '0x' + hex[5] + hex[6]; +// } + +// return RGBToHSL(r, g, b); +// }; /** * adjusting colors via lightness, for hover effects, etc. @@ -76,83 +75,83 @@ const hexToRGB = (hex) => { * @param adjust {number} * @return {string} */ -const adjustHSLColor = ({ - color, - adjust -}: { - color: Record; - adjust: number; -}): string => { - return `hsl(${color.h}, ${color.s}%, ${adjust}%)`; -}; - -const injectCss = ({ primaryColor, secondaryColor }) => { - // make HSL colors over RGB from hex - const primaryHSL = hexToRGB(primaryColor); - const secondaryHSL = secondaryColor && hexToRGB(secondaryColor); - // The level AA WCAG scrore requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. - const contrastThreshold = 4.5; - - // Intended to be used as the foreground color when text - // or icons are used on top of the primary color. - const textColorContrastSwitch = - primaryColor && contrast.ratio('#fff', primaryColor) > contrastThreshold - ? 'var(--skin-color-primary-foreground-light)' - : 'var(--skin-color-primary-foreground-dark)'; - - // Intended to be used as the foreground color when text - // or icons are used on top of the secondary color. - const textColorSecondaryContrastSwitch = - secondaryColor && - contrast.ratio('#fff', secondaryColor) > contrastThreshold - ? 'var(--skin-color-primary-foreground-light)' - : 'var(--skin-color-primary-foreground-dark)'; - - const secondaryColorContrastSafe = - secondaryColor && - contrast.ratio('#fff', secondaryColor) > contrastThreshold - ? secondaryColor - : 'var(--skin-color-default)'; - - const primaryColorContrastSafe = - primaryColor && contrast.ratio('#fff', primaryColor) < contrastThreshold - ? 'var(--skin-color-primary-foreground-dark)' - : primaryColor; - - document.head.insertAdjacentHTML( - 'beforeend', - `` - ); -}; +// const adjustHSLColor = ({ +// color, +// adjust +// }: { +// color: Record; +// adjust: number; +// }): string => { +// return `hsl(${color.h}, ${color.s}%, ${adjust}%)`; +// }; + +// const injectCss = ({ primaryColor, secondaryColor }) => { +// // make HSL colors over RGB from hex +// const primaryHSL = hexToRGB(primaryColor); +// const secondaryHSL = secondaryColor && hexToRGB(secondaryColor); +// // The level AA WCAG scrore requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. +// const contrastThreshold = 4.5; + +// // Intended to be used as the foreground color when text +// // or icons are used on top of the primary color. +// const textColorContrastSwitch = +// primaryColor && contrast.ratio('#fff', primaryColor) > contrastThreshold +// ? 'var(--skin-color-primary-foreground-light)' +// : 'var(--skin-color-primary-foreground-dark)'; + +// // Intended to be used as the foreground color when text +// // or icons are used on top of the secondary color. +// const textColorSecondaryContrastSwitch = +// secondaryColor && +// contrast.ratio('#fff', secondaryColor) > contrastThreshold +// ? 'var(--skin-color-primary-foreground-light)' +// : 'var(--skin-color-primary-foreground-dark)'; + +// const secondaryColorContrastSafe = +// secondaryColor && +// contrast.ratio('#fff', secondaryColor) > contrastThreshold +// ? secondaryColor +// : 'var(--skin-color-default)'; + +// const primaryColorContrastSafe = +// primaryColor && contrast.ratio('#fff', primaryColor) < contrastThreshold +// ? 'var(--skin-color-primary-foreground-dark)' +// : primaryColor; + +// document.head.insertAdjacentHTML( +// 'beforeend', +// `` +// ); +// }; const getOrCreateHeadNode = ( tagName: string,