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://*/*"],
"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>
<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 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>
</head>
<body>

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

@ -25,7 +25,7 @@ const reportDialogId = 'report-dialog';
const reportDialogHtml = `
<dialog id="${reportDialogId}" tabindex="0">
<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">
<svg
viewBox="0 0 24 24"
@ -170,9 +170,13 @@ const showReportDialog = () => {
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);
}
};
/**

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

@ -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;

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);
display: flex;
flex-direction: column;
font-family: 'Lato', Arial, Helvetica, sans-serif;
font-family: Inter, Arial, Helvetica, sans-serif;
height: 24rem;
width: 20rem;
}