diff --git a/src/css/options.css b/src/css/options.css
index b2a72e2..3ac77c0 100644
--- a/src/css/options.css
+++ b/src/css/options.css
@@ -60,30 +60,53 @@ button {
}
.moz-vpn-proxy-permissions {
- border-radius: 1rem;
- padding-inline: 4rem;
- padding-block: 2rem 1rem;
margin-block: 0 2rem;
- border: 1px solid var(--grey10);
+ padding-block-end: 1rem;
+ border-block-end: 1px solid var(--grey10);
+ display: flex;
+ flex-direction: column;
}
h3.moz-vpn-proxy-permissions-title {
- margin-block: 0 1rem;
- margin-inline: 0;
+ margin-block-start: 0;
position: relative;
+ display: flex;
+ align-items: center;
}
-.moz-vpn-proxy-permissions-title.show-warning::before {
+.warning-icon {
+ display: flex;
+ align-items: center;
+}
+
+.warning-icon.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;
+ margin-inline-end: 0.5rem;
+}
+
+.moz-vpn-proxy-permissions-title::before,
+.moz-vpn-proxy-permissions-title::after {
+ background-color: var(--grey10);
+ content: "";
+ height: 1px;
+ flex: 1 1 0%;
+}
+
+h3.moz-vpn-proxy-permissions-title::before {
+ margin-inline-end: 2rem;
+ margin-inline-start: -50%;
+}
+
+h3.moz-vpn-proxy-permissions-title::after {
+ margin-inline-start: 2rem;
+ margin-inline-end: -50%;
}
@media (prefers-color-scheme: dark) {
@@ -92,11 +115,6 @@ h3.moz-vpn-proxy-permissions-title {
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
index 89c275b..31b5430 100644
--- a/src/img/warning.svg
+++ b/src/img/warning.svg
@@ -1,17 +1,3 @@
diff --git a/src/js/options.js b/src/js/options.js
index 78220ae..8bb8ccf 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -20,7 +20,7 @@ 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");
+ const permissionsWarningEl = document.querySelector(".warning-icon");
if (permissionsWarningEl) {
permissionsWarningEl.classList.add("show-warning");
}
diff --git a/src/options.html b/src/options.html
index 6ff3ad8..4541478 100644
--- a/src/options.html
+++ b/src/options.html
@@ -12,9 +12,17 @@