From 3ec3350efd83054397b61cfddb4c521a2d78bbeb Mon Sep 17 00:00:00 2001 From: Mikhala Date: Fri, 17 May 2024 10:09:40 +0800 Subject: [PATCH 1/3] ID-1732 Fix blur and append required font links to the head --- packages/passport/sdk/src/overlay/elements.ts | 1 + packages/passport/sdk/src/overlay/overlay.ts | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/passport/sdk/src/overlay/elements.ts b/packages/passport/sdk/src/overlay/elements.ts index 9d8d0c3d0b..f8958d6bda 100644 --- a/packages/passport/sdk/src/overlay/elements.ts +++ b/packages/passport/sdk/src/overlay/elements.ts @@ -93,6 +93,7 @@ const getOverlay = (contents: string): string => ` height: 100% !important; background: rgba(13, 13, 13, 0.48) !important; backdrop-filter: blur(28px) !important; + -webkit-backdrop-filter: blur(28px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; diff --git a/packages/passport/sdk/src/overlay/overlay.ts b/packages/passport/sdk/src/overlay/overlay.ts index 65c0f34ab9..5017114d27 100644 --- a/packages/passport/sdk/src/overlay/overlay.ts +++ b/packages/passport/sdk/src/overlay/overlay.ts @@ -48,6 +48,22 @@ export default class Overlay { private appendOverlay() { if (!this.overlay) { + const link1: HTMLLinkElement = document.createElement('link'); + link1.href = 'https://fonts.googleapis.com'; + link1.rel = 'preconnect'; + document.head.appendChild(link1); + + const link2: HTMLLinkElement = document.createElement('link'); + link2.href = 'https://fonts.gstatic.com'; + link2.rel = 'preconnect'; + link2.crossOrigin = 'anonymous'; + document.head.appendChild(link2); + + const link3: HTMLLinkElement = document.createElement('link'); + link3.href = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'; + link3.rel = 'stylesheet'; + document.head.appendChild(link3); + const overlay = document.createElement('div'); overlay.innerHTML = this.isBlockedOverlay ? getBlockedOverlay() : getGenericOverlay(); document.body.insertAdjacentElement('beforeend', overlay); From b6507486eee9973542a0e2d0ce535d9d2204eadf Mon Sep 17 00:00:00 2001 From: Mikhala Date: Fri, 17 May 2024 14:45:02 +0800 Subject: [PATCH 2/3] set id on link to ensure not adding link multiple times --- packages/passport/sdk/src/overlay/elements.ts | 23 +++++++++++++++++++ packages/passport/sdk/src/overlay/overlay.ts | 23 ++++++------------- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/passport/sdk/src/overlay/elements.ts b/packages/passport/sdk/src/overlay/elements.ts index f8958d6bda..d62734afc2 100644 --- a/packages/passport/sdk/src/overlay/elements.ts +++ b/packages/passport/sdk/src/overlay/elements.ts @@ -123,5 +123,28 @@ const getOverlay = (contents: string): string => ` `; +type LinkParams = { + id: string; + href: string; + rel?: string; + crossOrigin?: string; +}; +export function addLink({ + id, + href, + rel, + crossOrigin, +}: LinkParams): void { + const fullId = `${PASSPORT_OVERLAY_ID}-${id}`; + if (!document.getElementById(fullId)) { + const link: HTMLLinkElement = document.createElement('link'); + link.id = fullId; + link.href = href; + if (rel) link.rel = rel; + if (crossOrigin) link.crossOrigin = crossOrigin; + document.head.appendChild(link); + } +} + export const getBlockedOverlay = () => getOverlay(getBlockedContents()); export const getGenericOverlay = () => getOverlay(getGenericContents()); diff --git a/packages/passport/sdk/src/overlay/overlay.ts b/packages/passport/sdk/src/overlay/overlay.ts index 5017114d27..73d360d3c3 100644 --- a/packages/passport/sdk/src/overlay/overlay.ts +++ b/packages/passport/sdk/src/overlay/overlay.ts @@ -1,6 +1,6 @@ import { PopupOverlayOptions } from 'types'; import { PASSPORT_OVERLAY_CLOSE_ID, PASSPORT_OVERLAY_TRY_AGAIN_ID } from './constants'; -import { getBlockedOverlay, getGenericOverlay } from './elements'; +import { addLink, getBlockedOverlay, getGenericOverlay } from './elements'; export default class Overlay { private disableGenericPopupOverlay: boolean; @@ -15,10 +15,13 @@ export default class Overlay { private onCloseListener: (() => void) | undefined; + private addedFonts: boolean; + constructor(popupOverlayOptions: PopupOverlayOptions, isBlockedOverlay: boolean = false) { this.disableBlockedPopupOverlay = popupOverlayOptions.disableBlockedPopupOverlay || false; this.disableGenericPopupOverlay = popupOverlayOptions.disableGenericPopupOverlay || false; this.isBlockedOverlay = isBlockedOverlay; + this.addedFonts = false; } append(tryAgainOnClick: () => void, onCloseClick: () => void) { @@ -48,21 +51,9 @@ export default class Overlay { private appendOverlay() { if (!this.overlay) { - const link1: HTMLLinkElement = document.createElement('link'); - link1.href = 'https://fonts.googleapis.com'; - link1.rel = 'preconnect'; - document.head.appendChild(link1); - - const link2: HTMLLinkElement = document.createElement('link'); - link2.href = 'https://fonts.gstatic.com'; - link2.rel = 'preconnect'; - link2.crossOrigin = 'anonymous'; - document.head.appendChild(link2); - - const link3: HTMLLinkElement = document.createElement('link'); - link3.href = 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'; - link3.rel = 'stylesheet'; - document.head.appendChild(link3); + addLink({ id: 'link-googleapis', href: 'https://fonts.googleapis.com' }); + addLink({ id: 'link-gstatic', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' }); + addLink({ id: 'link-roboto', href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap', rel: 'stylesheet' }); const overlay = document.createElement('div'); overlay.innerHTML = this.isBlockedOverlay ? getBlockedOverlay() : getGenericOverlay(); From 7329b245bb92d35dd5761a9ea091ee515656696e Mon Sep 17 00:00:00 2001 From: Mikhala Date: Fri, 17 May 2024 14:45:46 +0800 Subject: [PATCH 3/3] remove --- packages/passport/sdk/src/overlay/overlay.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/passport/sdk/src/overlay/overlay.ts b/packages/passport/sdk/src/overlay/overlay.ts index 73d360d3c3..4c8e3a857d 100644 --- a/packages/passport/sdk/src/overlay/overlay.ts +++ b/packages/passport/sdk/src/overlay/overlay.ts @@ -15,13 +15,10 @@ export default class Overlay { private onCloseListener: (() => void) | undefined; - private addedFonts: boolean; - constructor(popupOverlayOptions: PopupOverlayOptions, isBlockedOverlay: boolean = false) { this.disableBlockedPopupOverlay = popupOverlayOptions.disableBlockedPopupOverlay || false; this.disableGenericPopupOverlay = popupOverlayOptions.disableGenericPopupOverlay || false; this.isBlockedOverlay = isBlockedOverlay; - this.addedFonts = false; } append(tryAgainOnClick: () => void, onCloseClick: () => void) {