diff --git a/src/components/profile/AskerConsultingTypeData.tsx b/src/components/profile/AskerConsultingTypeData.tsx index fdf2d3113..16db21287 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" 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 = () => { ) : ( - {topic.name} + + {topic.titles?.long || topic.name} + )} ); diff --git a/src/extensions/theme.jsx b/src/extensions/theme.jsx index 0f7d27397..339250395 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', @@ -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: { 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 diff --git a/src/utils/useTenantTheming.ts b/src/utils/useTenantTheming.ts index a7528a47c..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, @@ -183,7 +182,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',