From 570839159cdd9e5a8043124c5e2493afe9322f9e Mon Sep 17 00:00:00 2001 From: janrembold Date: Mon, 13 May 2024 17:09:26 +0200 Subject: [PATCH 1/8] 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/8] 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/8] 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, From 549f264ea6b186d417078a9ebdfd54f1a0222c4d Mon Sep 17 00:00:00 2001 From: janrembold Date: Sat, 25 May 2024 10:04:41 +0200 Subject: [PATCH 4/8] styles: change hover color and font weight --- src/extensions/theme.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/extensions/theme.jsx b/src/extensions/theme.jsx index 526313fa8..339250395 100644 --- a/src/extensions/theme.jsx +++ b/src/extensions/theme.jsx @@ -123,7 +123,9 @@ const theme = createTheme({ MuiButton: { styleOverrides: { root: { + fontFamily: getCssVarValue('--font-family-sans-serif'), fontSize: getCssVarValue('--font-size-primary'), + fontWeight: getCssVarValue('--font-weight-bold'), lineHeight: '20px', borderRadius: getCssVarValue('--button-border-radius') }, @@ -135,12 +137,11 @@ const theme = createTheme({ 'textTransform': 'none', 'outline': 'none', 'color': getCssVarValue('--white'), - 'fontWeight': getCssVarValue('--font-weight-regular'), - 'fontFamily': getCssVarValue('--font-family-sans-serif'), 'boxShadow': 'none', '&:hover': { boxShadow: 'none', - color: getCssVarValue('--white') + color: getCssVarValue('--white'), + backgroundColor: getCssVarValue('--hover-primary') } }, outlined: { From 3cf838ab2db172288ebffcc81c7dbce13eb438a5 Mon Sep 17 00:00:00 2001 From: janrembold Date: Mon, 3 Jun 2024 18:05:15 +0200 Subject: [PATCH 5/8] set back button font weight to bold --- src/extensions/components/registration/Registration.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/extensions/components/registration/Registration.tsx b/src/extensions/components/registration/Registration.tsx index 361ccddd0..5094bd564 100644 --- a/src/extensions/components/registration/Registration.tsx +++ b/src/extensions/components/registration/Registration.tsx @@ -353,7 +353,8 @@ export const Registration = () => { Date: Tue, 11 Jun 2024 16:35:35 +0200 Subject: [PATCH 6/8] fix(asker-profile): show correct agency topic in asker profile --- .../profile/AskerConsultingTypeData.tsx | 42 ++++++++++--------- .../interfaces/UserDataInterface.ts | 2 + 2 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/profile/AskerConsultingTypeData.tsx b/src/components/profile/AskerConsultingTypeData.tsx index fdf2d3113..2350837b0 100644 --- a/src/components/profile/AskerConsultingTypeData.tsx +++ b/src/components/profile/AskerConsultingTypeData.tsx @@ -33,7 +33,11 @@ export const AskerConsultingTypeData = () => { text={ topics.find( (topic) => - topic.id === resort.topic + userData.sessions.find( + (session) => + session.agencyId === + resort.agency.id + ).topic.id === topic.id )?.name || '' } semanticLevel="5" @@ -43,7 +47,7 @@ export const AskerConsultingTypeData = () => { Object.keys(resort.sessionData).map( (item, itemIndex) => item === 'age' && - resort.sessionData[item] === + resort.sessionData[item] === 'null' ? null : (
{

{translate( 'userProfile.data.' + - item + item )}

{ item ] ? translate( - handleNumericTranslation( - getUserDataTranslateBase( - parseInt( - resort - .agency - .consultingType - ) - ), - item, - resort - .sessionData[ - item - ] - ) + handleNumericTranslation( + getUserDataTranslateBase( + parseInt( + resort + .agency + .consultingType + ) + ), + item, + resort + .sessionData[ + item + ] ) + ) : translate( - 'profile.noContent' - )} + 'profile.noContent' + )}

) diff --git a/src/globalState/interfaces/UserDataInterface.ts b/src/globalState/interfaces/UserDataInterface.ts index 60b688afc..159491f7f 100644 --- a/src/globalState/interfaces/UserDataInterface.ts +++ b/src/globalState/interfaces/UserDataInterface.ts @@ -1,5 +1,6 @@ import { ConsultingTypeInterface } from './ConsultingTypeInterface'; import { TWO_FACTOR_TYPES } from '../../components/twoFactorAuth/TwoFactorAuth'; +import { SessionItemInterface } from './SessionsDataInterface'; export interface UserDataInterface { absenceMessage?: string; @@ -30,6 +31,7 @@ export interface UserDataInterface { termsAndConditionsConfirmation: string; dataPrivacyConfirmation: string; emailNotifications?: EmailNotificationsInterface; + sessions: SessionItemInterface[]; } export interface ConsultantDataInterface From 0d16614f8a78b747ca675c298aff2472298ae732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= Date: Tue, 11 Jun 2024 17:01:55 +0200 Subject: [PATCH 7/8] style(asker-profile): formatting --- .../profile/AskerConsultingTypeData.tsx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/profile/AskerConsultingTypeData.tsx b/src/components/profile/AskerConsultingTypeData.tsx index 2350837b0..9314cfafb 100644 --- a/src/components/profile/AskerConsultingTypeData.tsx +++ b/src/components/profile/AskerConsultingTypeData.tsx @@ -47,7 +47,7 @@ export const AskerConsultingTypeData = () => { Object.keys(resort.sessionData).map( (item, itemIndex) => item === 'age' && - resort.sessionData[item] === + resort.sessionData[item] === 'null' ? null : (
{

{translate( 'userProfile.data.' + - item + item )}

{ item ] ? translate( - handleNumericTranslation( - getUserDataTranslateBase( - parseInt( - resort - .agency - .consultingType - ) - ), - item, - resort - .sessionData[ - item - ] + handleNumericTranslation( + getUserDataTranslateBase( + parseInt( + resort + .agency + .consultingType + ) + ), + item, + resort + .sessionData[ + item + ] + ) ) - ) : translate( - 'profile.noContent' - )} + 'profile.noContent' + )}

) From 3c1dfc56d7c393f4075a70f4cfe035e9cc5cbea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deborah=20K=C3=B6pfer?= Date: Wed, 12 Jun 2024 11:00:50 +0200 Subject: [PATCH 8/8] style(asker-profile): optional chaining in case of missing match --- src/components/profile/AskerConsultingTypeData.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/profile/AskerConsultingTypeData.tsx b/src/components/profile/AskerConsultingTypeData.tsx index 9314cfafb..16db21287 100644 --- a/src/components/profile/AskerConsultingTypeData.tsx +++ b/src/components/profile/AskerConsultingTypeData.tsx @@ -37,7 +37,7 @@ export const AskerConsultingTypeData = () => { (session) => session.agencyId === resort.agency.id - ).topic.id === topic.id + )?.topic.id === topic.id )?.name || '' } semanticLevel="5"