wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 420 Pull Requests Releases 18 Wiki Activity

fix(browser-extension): different fonts between packages

Browse Source
This commit is contained in:
wanhose 2022-10-13 14:46:45 +02:00
parent a284ef10bc
commit 1a25d9d0b8
8 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/browser-extension/src/assets/fonts/Lato-Bold.ttf
View File

Binary file not shown.

BIN
packages/browser-extension/src/assets/fonts/Lato-Regular.ttf
View File

Binary file not shown.

8
packages/browser-extension/src/manifest.json
View File

@ -32,5 +32,11 @@
} }
], ],
"host_permissions": ["http://*/*", "https://*/*"], "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"]
}
]
} }

6
packages/browser-extension/src/popup.html
View File

@ -1,10 +1,10 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="/styles/fonts.css" />
<link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/popup.css" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="author" content="wanhose" /> <meta name="author" content="wanhose" />
<link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/popup.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
<script src="/scripts/popup.js"></script> <script src="/scripts/popup.js"></script>
</head> </head>
<body> <body>

10
packages/browser-extension/src/scripts/dialog.js
View File

@ -25,7 +25,7 @@ const reportDialogId = 'report-dialog';
const reportDialogHtml = ` const reportDialogHtml = `
<dialog id="${reportDialogId}" tabindex="0"> <dialog id="${reportDialogId}" tabindex="0">
<report-dialog-header> <report-dialog-header>
<span>Cookie Dialog Monster</span> <report-dialog-header-title>Cookie Dialog Monster</report-dialog-header-title>
<report-dialog-close-button role="button" tabindex="0"> <report-dialog-close-button role="button" tabindex="0">
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -170,9 +170,13 @@ const showReportDialog = () => {
const result = parser.parseFromString(reportDialogHtml, 'text/html'); const result = parser.parseFromString(reportDialogHtml, 'text/html');
const dialog = result.body.firstElementChild; const dialog = result.body.firstElementChild;
const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0]; const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0];
const link = document.createElement('link');
const radios = dialog.getElementsByTagName('report-dialog-radio'); const radios = dialog.getElementsByTagName('report-dialog-radio');
closeButton.addEventListener('click', closeButtonClickHandler); 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) { for (const radio of radios) {
radio.addEventListener('click', radioClickHandler); radio.addEventListener('click', radioClickHandler);
@ -180,6 +184,10 @@ const showReportDialog = () => {
document.body.appendChild(dialog); document.body.appendChild(dialog);
dialog.showModal(); dialog.showModal();
if (!document.getElementById('report-dialog-font')) {
document.head.appendChild(link);
}
}; };
/** /**

6
packages/browser-extension/src/styles/dialog.css
View File

@ -12,7 +12,7 @@
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
color: var(--cookie-dialog-monster-color-secondary); color: var(--cookie-dialog-monster-color-secondary);
font-family: 'Lato', Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 100%; font-size: 100%;
margin: auto !important; margin: auto !important;
padding: 0px !important; padding: 0px !important;
@ -78,6 +78,10 @@ report-dialog-header {
padding: 16px; padding: 16px;
} }
report-dialog-header-title {
font-weight: 500;
}
report-dialog-radio { report-dialog-radio {
color: var(--cookie-dialog-monster-color-tertiary); color: var(--cookie-dialog-monster-color-tertiary);
cursor: pointer; cursor: pointer;

13
packages/browser-extension/src/styles/fonts.css
View File

@ -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');
}

2
packages/browser-extension/src/styles/popup.css
View File

@ -24,7 +24,7 @@ body {
color: var(--color-tertiary); color: var(--color-tertiary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'Lato', Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
height: 24rem; height: 24rem;
width: 20rem; width: 20rem;
} }