Update Release

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"

src/extensions/components/registration/Registration.tsx

@@ -353,7 +353,8 @@ export const Registration = () => {
 										<Link
 											sx={{
 												textDecoration: 'none',
-												color: 'info.light'
+												color: 'info.light',
+												fontWeight: '600'
 											}}
 											component={RouterLink}
 											onClick={onPrevClick}

src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx

@@ -41,7 +41,9 @@ const PreselectedTopic = ({
 					</>
 				</Typography>
 			) : (
-				<Typography sx={sx}>{topic.name}</Typography>
+				<Typography sx={sx}>
+					{topic.titles?.long || topic.name}
+				</Typography>
 			)}
 		</>
 	);

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: {

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

src/utils/useTenantTheming.ts

@@ -4,155 +4,154 @@ 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.
  * @param color {object}
  * @param adjust {number}
  * @return {string}
  */
-const adjustHSLColor = ({
-	color,
-	adjust
-}: {
-	color: Record<string, any>;
-	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',
-		`<style>
-		:root {
-		--skin-color-primary: ${primaryColor};
-		--skin-color-primary-hover: ${
-			primaryColor &&
-			contrast.ratio('#fff', primaryColor) < contrastThreshold
-				? adjustHSLColor({
-						color: primaryHSL,
-						adjust: primaryHSL.l + 10
-					}) // lighter
-				: adjustHSLColor({
-						color: primaryHSL,
-						adjust: primaryHSL.l - 1
-					}) // darker
-		};
-		--skin-color-secondary: ${secondaryColor || ''};
-		--skin-color-secondary-light: ${
-			secondaryHSL
-				? adjustHSLColor({
-						color: secondaryHSL,
-						adjust: 90
-					})
-				: ''
-		};
-		--skin-color-secondary-contrast-safe: ${secondaryColorContrastSafe || ''};
-		--skin-color-primary-contrast-safe: ${primaryColorContrastSafe};
-		--text-color-contrast-switch: ${textColorContrastSwitch};
-		--text-color-secondary-contrast-switch: ${textColorSecondaryContrastSwitch};
-		}
-		</style>`
-	);
-};
+// const adjustHSLColor = ({
+// 	color,
+// 	adjust
+// }: {
+// 	color: Record<string, any>;
+// 	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',
+// 		`<style>
+// 		:root {
+// 		--skin-color-primary: ${primaryColor};
+// 		--skin-color-primary-hover: ${
+// 			primaryColor &&
+// 			contrast.ratio('#fff', primaryColor) < contrastThreshold
+// 				? adjustHSLColor({
+// 						color: primaryHSL,
+// 						adjust: primaryHSL.l + 10
+// 					}) // lighter
+// 				: adjustHSLColor({
+// 						color: primaryHSL,
+// 						adjust: primaryHSL.l - 1
+// 					}) // darker
+// 		};
+// 		--skin-color-secondary: ${secondaryColor || ''};
+// 		--skin-color-secondary-light: ${
+// 			secondaryHSL
+// 				? adjustHSLColor({
+// 						color: secondaryHSL,
+// 						adjust: 90
+// 					})
+// 				: ''
+// 		};
+// 		--skin-color-secondary-contrast-safe: ${secondaryColorContrastSafe || ''};
+// 		--skin-color-primary-contrast-safe: ${primaryColorContrastSafe};
+// 		--text-color-contrast-switch: ${textColorContrastSwitch};
+// 		--text-color-secondary-contrast-switch: ${textColorSecondaryContrastSwitch};
+// 		}
+// 		</style>`
+// 	);
+// };
 
 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',