Remove subhead text when VPN is on and adjust card sizing (#55)

mozilla-extensions · Sep 4, 2024 · 43853ea · 43853ea
1 parent 036a604
commit 43853ea
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -53,10 +53,6 @@
     "message": "Reset site preferences",
     "description": "Button Text to Reset all Site specific settings"
   },
-  "isPrivateConnection": {
-    "message": "Secure and private",
-    "description": "Subheader in the 'card' telling users their current connection is secured by the vpn"
-  },
   "turnOnForPrivateConnection": {
     "message": "Turn on to protect your browser",
     "description": "Call to Action for users to turn on the VPN"

diff --git a/src/components/vpncard.js b/src/components/vpncard.js
@@ -81,11 +81,13 @@ export class VPNCard extends LitElement {
     const time = Date.now() - this.connectedSince;
     //console.log(`Elapsed Time: ${time}`)
 
-    const timeString = this.enabled ? html`<p>${formatTime(time)}</p>` : html``;
+    const timeString = this.enabled
+      ? html`<p class="timer">${formatTime(time)}</p>`
+      : html``;
 
     const subLine = this.enabled
-      ? tr("isPrivateConnection")
-      : tr("turnOnForPrivateConnection");
+      ? null
+      : html`<p class="subline">${tr("turnOnForPrivateConnection")}</p>`;
     const vpnHeader = this.enabled ? tr("vpnIsOn") : tr("vpnIsOff");
 
     return html`
@@ -94,8 +96,7 @@ export class VPNCard extends LitElement {
           <img src=${shieldURL} />
           <div class="infobox">
             <h1>${vpnHeader}</h1>
-            <p>${subLine}</p>
-            ${timeString}
+            ${subLine} ${timeString}
           </div>
           <button class="pill" @click=${this.#toggle}></button>
         </main>
@@ -149,6 +150,7 @@ export class VPNCard extends LitElement {
     main {
       justify-content: space-between;
       padding: var(--default-padding);
+      min-block-size: 114px;
     }
     footer {
       justify-content: flex-start;
@@ -189,6 +191,12 @@ export class VPNCard extends LitElement {
       color: var(--main-card-text-color);
       opacity: 0.7;
     }
+
+    .timer,
+    .subline {
+      margin-block-start: calc(var(--default-padding) / 2);
+    }
+
     .pill {
       width: 45px;
       height: 24px;

diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
@@ -389,7 +389,7 @@ export class BrowserActionPopup extends LitElement {
       color: var(--action-button-color);
       background-color: transparent;
       padding: 10px;
-      margin-top: var(--padding-default);
+      margin-block: var(--padding-default);
     }
 
     .disabled {