From 3c3b5ae705392f4e7fa2f98cd61fd9fcd45dad7f Mon Sep 17 00:00:00 2001 From: Lesley Norton Date: Sat, 4 Dec 2021 16:32:00 -0600 Subject: [PATCH] Add Mozilla VPN & Proxy permissions block to options.html --- src/css/options.css | 57 ++++++++++++++++++++++++++++++++++++++------- src/img/warning.svg | 17 ++++++++++++++ src/js/options.js | 12 +++++++++- src/options.html | 45 ++++++++++++++++++----------------- 4 files changed, 99 insertions(+), 32 deletions(-) create mode 100644 src/img/warning.svg diff --git a/src/css/options.css b/src/css/options.css index 9f314cd..b2a72e2 100644 --- a/src/css/options.css +++ b/src/css/options.css @@ -1,6 +1,11 @@ body { + --grey10: #e7e7e7; + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: #fff; - color: #202023; + color: rgb(74, 74, 79); + font-size: 13px; + overflow: hidden; } h3:first-of-type { @@ -8,13 +13,13 @@ h3:first-of-type { } label { - font-weight: bold; display: flex; - align-items: flex-start; + align-items: center; + font-size: 14px; } label > span { - padding-block-start: 3px; + padding-inline-end: 4px; } .settings-group { @@ -26,10 +31,6 @@ form { flex-direction: column; } -p { - color: rgb(74, 74, 79); -} - .settings-group p { margin-inline-start: 24px; margin-block: 4px 8px; @@ -37,6 +38,7 @@ p { input[type="checkbox"] { margin-inline: 0 8px; + margin-block: 1px auto; inline-size: 16px; block-size: 16px; } @@ -50,14 +52,51 @@ button { flex-direction: row; justify-content: space-between; max-inline-size: 70%; + align-items: center; +} + +.bold { + font-weight: 600; +} + +.moz-vpn-proxy-permissions { + border-radius: 1rem; + padding-inline: 4rem; + padding-block: 2rem 1rem; + margin-block: 0 2rem; + border: 1px solid var(--grey10); +} + +h3.moz-vpn-proxy-permissions-title { + margin-block: 0 1rem; + margin-inline: 0; + position: relative; +} + +.moz-vpn-proxy-permissions-title.show-warning::before { + background-image: url("/img/warning.svg"); + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + position: absolute; + inset-inline-start: -2.5rem; + content: ""; + display: block; + block-size: 24px; + inline-size: 24px; } @media (prefers-color-scheme: dark) { body { - background: #202023; + background: #23212a; color: #fff; } + .moz-vpn-proxy-permissions { + border-color: transparent; + background-color: rgba(255, 255, 255, 0.05); + } + p { color: rgb(177, 177, 179); } diff --git a/src/img/warning.svg b/src/img/warning.svg new file mode 100644 index 0000000..89c275b --- /dev/null +++ b/src/img/warning.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/js/options.js b/src/js/options.js index c8eba44..78220ae 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -17,6 +17,16 @@ document.querySelectorAll("[data-permission-id]").forEach( async(el) => { }); }); +async function maybeShowPermissionsWarningIcon() { + const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled(); + if (!bothMozillaVpnPermissionsEnabled) { + const permissionsWarningEl = document.querySelector(".moz-vpn-proxy-permissions-title"); + if (permissionsWarningEl) { + permissionsWarningEl.classList.add("show-warning"); + } + } +} + async function enableDisableSync() { const checkbox = document.querySelector("#syncCheck"); await browser.storage.local.set({syncEnabled: !!checkbox.checked}); @@ -81,7 +91,7 @@ document.addEventListener("DOMContentLoaded", setupOptions); document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync); document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab); document.querySelector("button").addEventListener("click", resetOnboarding); - +maybeShowPermissionsWarningIcon(); for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) { document.querySelector("#open_container_"+i) .addEventListener("change", storeShortcutChoice); diff --git a/src/options.html b/src/options.html index 62f3f57..6ff3ad8 100644 --- a/src/options.html +++ b/src/options.html @@ -13,36 +13,37 @@

+
+

+
+
+ +

+
+
+ +

+
+
+
-

+

-
- -

-

-
- -
- -

-

-
-

@@ -52,7 +53,7 @@