diff --git a/packages/browser-extension/src/assets/fonts/Lato-BoldItalic.ttf b/packages/browser-extension/src/assets/fonts/Lato-BoldItalic.ttf deleted file mode 100644 index 8f9a50d..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-BoldItalic.ttf and /dev/null differ diff --git a/packages/browser-extension/src/assets/fonts/Lato-Italic.ttf b/packages/browser-extension/src/assets/fonts/Lato-Italic.ttf deleted file mode 100644 index 49e9f2c..0000000 Binary files a/packages/browser-extension/src/assets/fonts/Lato-Italic.ttf and /dev/null differ diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index b1a5af5..0a853a2 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -8,7 +8,7 @@ -
+

Cookie Dialog Monster

-
@@ -85,7 +84,6 @@
-
@@ -107,6 +105,7 @@
diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 1ee567c..c5bc3ed 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/packages/browser-extension/src/scripts/background.js @@ -123,9 +123,11 @@ const getData = async (callback) => { const getTab = (callback) => { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + const tab = tabs[0]; + callback({ - id: tabs[0]?.id, - hostname: new URL(tabs[0].url).hostname.split('.').slice(-2).join('.'), + id: tab?.id, + hostname: tab ? new URL(tab.url).hostname.split('.').slice(-2).join('.') : undefined, }); }); }; diff --git a/packages/browser-extension/src/scripts/popup.js b/packages/browser-extension/src/scripts/popup.js index 2d1d375..f932b1e 100644 --- a/packages/browser-extension/src/scripts/popup.js +++ b/packages/browser-extension/src/scripts/popup.js @@ -37,11 +37,7 @@ const isChromium = chrome.runtime.getURL('').startsWith('chrome-extension://'); const handlePowerChange = () => { dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => { dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => { - const power = document.getElementById('power'); - dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' }); - if (!enabled === false) power.removeAttribute('checked'); - if (!enabled === true) power.setAttribute('checked', 'checked'); chrome.tabs.reload(id, { bypassCache: true }); }); }); diff --git a/packages/browser-extension/src/styles/globals.css b/packages/browser-extension/src/styles/globals.css index b68e464..bd187e8 100644 --- a/packages/browser-extension/src/styles/globals.css +++ b/packages/browser-extension/src/styles/globals.css @@ -1,18 +1,27 @@ :root { - --color-chocolate: #47321e; - --color-cookie: #f2e9df; --color-error: #cc0000; + --color-primary: #3dd9eb; + --color-secondary: #34495e; --color-success: #5cb85c; + --color-tertiary: #6b7280; --color-white: #ffffff; } a { - color: var(--color-star); + color: inherit; display: inline-block; + font-weight: bold; + outline: none; + text-decoration: none; +} + +a:focus, +a:hover { + text-decoration: underline; } body { - color: var(--color-chocolate); + color: var(--color-tertiary); display: flex; flex-direction: column; font-family: 'Lato', Arial, Helvetica, sans-serif; @@ -21,15 +30,48 @@ body { } button { - background-color: transparent; - border: none; - cursor: pointer; - padding: 0; - margin: 0; + outline: none; } -button:focus { - outline: none; +footer { + font-size: 0.75rem; + margin-top: auto; + padding: 1rem; + text-align: center; +} + +header { + align-items: center; + background-color: var(--color-secondary); + color: var(--color-white); + display: flex; + font-size: 1rem; + height: 3rem; + justify-content: space-between; + padding: 0 1rem; +} + +hr { + margin-bottom: 1rem; +} + +input:checked + .slider { + background-color: var(--color-secondary); +} + +input:focus + .slider { + box-shadow: 0 0 0.0625rem var(--color-secondary); +} + +input:checked + .slider:before { + transform: translateX(1.25rem); +} + +main { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 1rem; } span { @@ -45,19 +87,6 @@ svg { width: 1rem; } -/* Header */ - -.header { - align-items: center; - background-color: var(--color-cookie); - display: flex; - font-size: 1rem; - font-weight: bold; - height: 3rem; - justify-content: space-between; - padding: 0 1rem; -} - .header-actions { align-items: center; display: flex; @@ -65,43 +94,21 @@ svg { .header-actions > button { border-radius: 0.125rem; - color: var(--color-chocolate); + color: var(--color-white); padding: 0.25rem; transition: 0.4s; } .header-actions > button:focus, .header-actions > button:hover { - background-color: var(--color-chocolate); - color: var(--color-cookie); + background-color: var(--color-white); + color: var(--color-secondary); } .header-title { font-size: 1rem; - font-weight: bold; - margin: 0; } -/* Main */ - -main { - display: flex; - flex-direction: column; - padding: 1rem; -} - -/* Footer */ - -footer { - border-top: 0.0625rem solid var(--color-cookie); - font-size: 0.75rem; - margin-top: auto; - padding: 1rem; - text-align: center; -} - -/* Help */ - .help { align-items: center; display: flex; @@ -109,16 +116,16 @@ footer { } .help > a { + color: var(--color-secondary); padding: 0.25rem; - text-decoration: none; transition: 0.4s; } .help > a:focus, .help > a:hover { - background-color: var(--color-chocolate); + background-color: var(--color-secondary); border-radius: 0.125rem; - color: var(--color-cookie); + color: var(--color-white); outline: none; } @@ -126,32 +133,6 @@ footer { font-size: 0.875rem; } -/* Rating */ - -#like, -#unlike { - color: var(--color-chocolate); - cursor: pointer; - padding: 0.25rem; - transition: 0.4s; -} - -#like:focus, -#like:hover { - color: var(--color-success); -} - -#negative, -#positive { - background-color: var(--color-cookie); - border-radius: 0.125rem; - font-size: 0.75rem; - line-height: 1rem; - margin-bottom: 0; - margin-top: 1rem; - padding: 1rem; -} - .rating { align-items: center; display: flex; @@ -171,22 +152,6 @@ footer { margin-left: 1rem; } -#unlike:focus, -#unlike:hover { - color: var(--color-error); -} - -/* Separator */ - -.separator { - border-bottom: 0.0625rem solid var(--color-cookie); - height: 0; - margin-bottom: 1rem; - margin-top: 1rem; -} - -/* Switch */ - .switch { display: inline-block; flex-shrink: 0; @@ -214,7 +179,7 @@ footer { } .slider { - background-color: var(--color-cookie); + background-color: var(--color-tertiary); bottom: 0; cursor: pointer; left: 0; @@ -235,14 +200,32 @@ footer { width: 0.75rem; } -input:checked + .slider { - background-color: var(--color-chocolate); +#like, +#unlike { + color: var(--color-secondary); + cursor: pointer; + padding: 0.25rem; + transition: 0.4s; } -input:focus + .slider { - box-shadow: 0 0 0.0625rem var(--color-chocolate); +#like:focus, +#like:hover { + color: var(--color-success); } -input:checked + .slider:before { - transform: translateX(1.25rem); +#negative, +#positive { + background-color: var(--color-secondary); + border-radius: 0.125rem; + color: var(--color-white); + font-size: 0.75rem; + line-height: 1rem; + margin-bottom: 0; + margin-top: 1rem; + padding: 1rem; +} + +#unlike:focus, +#unlike:hover { + color: var(--color-error); } diff --git a/packages/browser-extension/src/styles/reset.css b/packages/browser-extension/src/styles/reset.css index 58c9a57..94559f6 100644 --- a/packages/browser-extension/src/styles/reset.css +++ b/packages/browser-extension/src/styles/reset.css @@ -30,8 +30,22 @@ th, td, caption { font-weight: normal; + margin: 0; } img { border: 0; } + +button { + background-color: transparent; + border: none; + cursor: pointer; + padding: 0; + margin: 0; +} + +hr { + margin: 0; + padding: 0; +}