diff --git a/src/components/styles.js b/src/components/styles.js index c4b59777..17ab7ca7 100644 --- a/src/components/styles.js +++ b/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; diff --git a/src/components/vpncard.js b/src/components/vpncard.js index bd849555..075983b0 100644 --- a/src/components/vpncard.js +++ b/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`
${tr("extensionVpnIsOff")}
` + ? html`+ ${tr("extensionVpnIsOff")} + ${tr("learnMore")} +
` : 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; diff --git a/src/ui/variables.css b/src/ui/variables.css index 2add8473..acc495a8 100644 --- a/src/ui/variables.css +++ b/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); } }