diff --git a/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf b/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf deleted file mode 100644 index b63a14d..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf and /dev/null differ diff --git a/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf b/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf deleted file mode 100644 index 33eba8b..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf and /dev/null differ diff --git a/packages/browser-extension/src/manifest.json b/packages/browser-extension/src/manifest.json index 4576398..e09f256 100644 --- a/packages/browser-extension/src/manifest.json +++ b/packages/browser-extension/src/manifest.json @@ -32,5 +32,11 @@ } ], "host_permissions": ["http://*/*", "https://*/*"], - "permissions": ["contextMenus", "storage", "tabs"] + "permissions": ["contextMenus", "storage", "tabs"], + "web_accessible_resources": [ + { + "matches": ["http://*/*", "https://*/*"], + "resources": ["https://fonts.googleapis.com/css?family=Inter"] + } + ] } diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index b036cca..8c79cfe 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -1,10 +1,10 @@ - - - + + + diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js index 6f7f700..640ee8d 100644 --- a/packages/browser-extension/src/scripts/dialog.js +++ b/packages/browser-extension/src/scripts/dialog.js @@ -25,7 +25,7 @@ const reportDialogId = 'report-dialog'; const reportDialogHtml = ` - Cookie Dialog Monster + Cookie Dialog Monster { const result = parser.parseFromString(reportDialogHtml, 'text/html'); const dialog = result.body.firstElementChild; const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0]; + const link = document.createElement('link'); const radios = dialog.getElementsByTagName('report-dialog-radio'); closeButton.addEventListener('click', closeButtonClickHandler); + link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter'); + link.setAttribute('id', 'report-dialog-font'); + link.setAttribute('rel', 'stylesheet'); for (const radio of radios) { radio.addEventListener('click', radioClickHandler); @@ -180,6 +184,10 @@ const showReportDialog = () => { document.body.appendChild(dialog); dialog.showModal(); + + if (!document.getElementById('report-dialog-font')) { + document.head.appendChild(link); + } }; /** diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css index 1b853da..7a3da2e 100644 --- a/packages/browser-extension/src/styles/dialog.css +++ b/packages/browser-extension/src/styles/dialog.css @@ -12,7 +12,7 @@ border-radius: 4px; box-sizing: border-box; color: var(--cookie-dialog-monster-color-secondary); - font-family: 'Lato', Arial, Helvetica, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; font-size: 100%; margin: auto !important; padding: 0px !important; @@ -78,6 +78,10 @@ report-dialog-header { padding: 16px; } +report-dialog-header-title { + font-weight: 500; +} + report-dialog-radio { color: var(--cookie-dialog-monster-color-tertiary); cursor: pointer; diff --git a/packages/browser-extension/src/styles/fonts.css b/packages/browser-extension/src/styles/fonts.css deleted file mode 100644 index 9f2d34d..0000000 --- a/packages/browser-extension/src/styles/fonts.css +++ /dev/null @@ -1,13 +0,0 @@ -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 400; - src: url('/assets/fonts/Lato-Regular.ttf') format('truetype'); -} - -@font-face { - font-family: 'Lato'; - font-style: normal; - font-weight: 700; - src: url('/assets/fonts/Lato-Bold.ttf') format('truetype'); -} diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index d4c82ad..d9d22cd 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -24,7 +24,7 @@ body { color: var(--color-tertiary); display: flex; flex-direction: column; - font-family: 'Lato', Arial, Helvetica, sans-serif; + font-family: Inter, Arial, Helvetica, sans-serif; height: 24rem; width: 20rem; }