fix: ID-1732 Fix background blur and append required font links to th…

…e head (#1797)
immutable · May 20, 2024 · e79ba49 · e79ba49
1 parent d8c9419
commit e79ba49
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git 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;
@@ -122,5 +123,28 @@ const getOverlay = (contents: string): string => `
     </div>
   `;
 
+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
@@ -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;
@@ -48,6 +48,10 @@ export default class Overlay {
 
   private appendOverlay() {
     if (!this.overlay) {
+      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();
       document.body.insertAdjacentElement('beforeend', overlay);