Skip to content

Commit

Permalink
Merge pull request #111 from virtualidentityag/staging
Browse files Browse the repository at this point in the history 
Update Release
  • Loading branch information
@koepferd
koepferd authored Jun 14, 2024
2 parents b7d6ebe + f37f78b commit 92ff6b1
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 148 deletions.
6 changes: 5 additions & 1 deletion src/components/profile/AskerConsultingTypeData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 2 additions & 1 deletion src/extensions/components/registration/Registration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,8 @@ export const Registration = () => {
<Link
sx={{
textDecoration: 'none',
color: 'info.light'
color: 'info.light',
fontWeight: '600'
}}
component={RouterLink}
onClick={onPrevClick}
Expand Down
4 changes: 3 additions & 1 deletion src/extensions/components/registration/preselectionBox/PreselectedTopic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ const PreselectedTopic = ({
</>
</Typography>
) : (
<Typography sx={sx}>{topic.name}</Typography>
<Typography sx={sx}>
{topic.titles?.long || topic.name}
</Typography>
)}
</>
);
Expand Down
9 changes: 5 additions & 4 deletions src/extensions/theme.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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')
},
Expand All @@ -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: {
Expand Down
2 changes: 2 additions & 0 deletions src/globalState/interfaces/UserDataInterface.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -30,6 +31,7 @@ export interface UserDataInterface {
termsAndConditionsConfirmation: string;
dataPrivacyConfirmation: string;
emailNotifications?: EmailNotificationsInterface;
sessions: SessionItemInterface[];
}

export interface ConsultantDataInterface
Expand Down
282 changes: 141 additions & 141 deletions src/utils/useTenantTheming.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit 92ff6b1

Please sign in to comment.