Add in-copy 'Learn more' link to VPNCard sub-header (#148)

Here we: 
- Add a 'Learn more' link to the popup copy when the extension is Off
and the client is On
- Make reasonable/best-guess affordances for dark mode 
<img width="405" alt="Screenshot 2024-12-12 at 4 58 14 PM"
src="https://github.com/user-attachments/assets/71b281da-7095-4551-9bd3-83bb60b93624"
/>
<img width="389" alt="Screenshot 2024-12-12 at 4 57 59 PM"
src="https://github.com/user-attachments/assets/36cfdc47-3317-44f4-aa31-298948f7eabe"
/>

src/components/styles.js

@@ -124,6 +124,21 @@ export const fontStyling = css`
   }
 `;
 
+export const inCopyLink = css`
+  a.in-copy-link {
+    margin-inline-start: 2px;
+    color: var(--in-copy-link-text-color);
+  }
+
+  .in-copy-link:hover {
+    color: var(--in-copy-link-text-color-hover);
+  }
+
+  .in-copy-link:active {
+    color: var(--in-copy-link-text-color-active);
+  }
+`;
+
 export const ghostButtonStyles = css`
   button.ghost-btn {
     background-color: transparent;

src/components/vpncard.js

@@ -12,7 +12,7 @@ import {
   ref,
 } from "../vendor/lit-all.min.js";
 import { tr } from "../shared/i18n.js";
-import { resetSizing, fontStyling, positioner } from "./styles.js";
+import { resetSizing, fontStyling, positioner, inCopyLink } from "./styles.js";
 
 import { VPNState } from "../background/vpncontroller/states.js";
 import "./mz-rings.js";
@@ -175,9 +175,21 @@ export class VPNCard extends LitElement {
   }
 
   static subline(enabled, stability, clientIsConnected) {
+    const onLinkClick = () => {
+      browser.tabs.create({
+        url: "https://support.mozilla.org/kb/get-started-mozilla-vpn-extension?utm_medium=mozilla-vpn&utm_source=vpn-extension",
+      });
+      window.close();
+    };
+
     if (!enabled) {
       return clientIsConnected
-        ? html`<p class="subline ext-is-off">${tr("extensionVpnIsOff")}</p>`
+        ? html`<p class="subline ext-is-off">
+            ${tr("extensionVpnIsOff")}
+            <a class="in-copy-link" @click=${onLinkClick} href=""
+              >${tr("learnMore")}</a
+            >
+          </p>`
         : null;
     }
     const errorSvg = html`
@@ -212,7 +224,7 @@ export class VPNCard extends LitElement {
   }
 
   static styles = css`
-    ${resetSizing}${fontStyling}${positioner}
+    ${resetSizing}${fontStyling}${positioner}${inCopyLink}
 
     :host {
       font-size: 1rem;

src/ui/variables.css

@@ -53,6 +53,10 @@
   --grey40: #6d6d6e;
   --grey50: #3d3d3d;
   --grey60: #0c0c0d;
+  --blue50: #0060df;
+  --blue60: #0250bb;
+  --blue70: #054096;
+  --blue90: #09204d;
   --main-card-background: #321c64;
   --main-card-text-color: #ffffff;
   --main-card--pill-background: lch(
@@ -72,6 +76,9 @@
   --settings-secondary-text-color: #5b5b66;
   --settings-border-color: #e7e7e7;
   --settings-link-color: var(--action-button-color);
+  --in-copy-link-text-color: var(--blue50);
+  --in-copy-link-text-color-hover: var(--blue70);
+  --in-copy-link-text-color-active: var(--blue90);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -88,6 +95,10 @@
     --settings-secondary-text-color: rgba(255, 255, 255, 0.8);
     --settings-border-color: #e7e7e74d;
     --settings-link-color: rgba(255, 255, 255, 1);
+
+    --in-copy-link-text-color: rgba(255, 255, 255, 1);
+    --in-copy-link-text-color-hover: rgba(255, 255, 255, 0.7);
+    --in-copy-link-text-color-active: rgba(255, 255, 255, 0.4);
   }
 }