diff --git a/extension-manifest-v3/src/pages/panel/components/navigation-card.js b/extension-manifest-v3/src/pages/panel/components/navigation-card.js new file mode 100644 index 000000000..7f1734d5b --- /dev/null +++ b/extension-manifest-v3/src/pages/panel/components/navigation-card.js @@ -0,0 +1,14 @@ +import { html } from 'hybrids'; + +export default { + render: () => html` + + `.css` + :host { + border: 1px solid var(--ui-color-gray-300); + border-radius: 8px; + } + `, +}; diff --git a/extension-manifest-v3/src/pages/panel/views/navigation.js b/extension-manifest-v3/src/pages/panel/views/navigation.js index 78c006a14..cef95b123 100644 --- a/extension-manifest-v3/src/pages/panel/views/navigation.js +++ b/extension-manifest-v3/src/pages/panel/views/navigation.js @@ -15,6 +15,8 @@ import Session from '/store/session.js'; import { SIGNON_PAGE_URL } from '/utils/api.js'; import { openTabWithUrl } from '/utils/tabs.js'; +import assets from '/pages/settings/assets/index.js'; + const MENU = [ {}, { @@ -110,6 +112,34 @@ export default { : html``, )} `} + ${session.contributor && + html` + + + + Contribution +
+ You are awesome! + + Thank you for your support in Ghostery's fight for a web + where privacy is a basic human right! + +
+ + + + `} `, diff --git a/extension-manifest-v3/src/pages/settings/assets/contributor_badge.svg b/extension-manifest-v3/src/pages/settings/assets/contributor_badge.svg new file mode 100644 index 000000000..f9e3ccd8c --- /dev/null +++ b/extension-manifest-v3/src/pages/settings/assets/contributor_badge.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/extension-manifest-v3/src/pages/settings/settings.js b/extension-manifest-v3/src/pages/settings/settings.js index 4698a5ff5..fd152fa8f 100644 --- a/extension-manifest-v3/src/pages/settings/settings.js +++ b/extension-manifest-v3/src/pages/settings/settings.js @@ -55,7 +55,6 @@ export default { WhoTracks.Me ${store.ready(session) && - !session.contributor && html` - Contribution -
- - Become a Contributor - - - Help Ghostery fight for a web where privacy is a basic human - right. - - - - Become a Contributor - - -
+ ${session.contributor + ? html` + Contribution +
+ + You are awesome! + + + Thank you for your support in Ghostery's fight for a web + where privacy is a basic human right! + +
+ ` + : html` + Contribution +
+ + Become a Contributor + + + Help Ghostery fight for a web where privacy is a basic + human right. + + + + Become a Contributor + + +
+ `} `} - ${store.ready(session) && session.user ? html` + ${session.contributor + ? html`` + : html``} My Account
${session.email}
` - : html`My Account`} + : html` My Account`} ${stack} ${store.ready(session) && - !session.contributor && html`
- Contribution -
-
- - Become a Contributor - - - Help Ghostery fight for a web where privacy is a basic human - right. - -
- - - Become a Contributor - - -
+ ${session.contributor + ? html` + Contribution +
+
+ + You are awesome! + + + Thank you for your support in Ghostery's fight for a + web where privacy is a basic human right! + +
+
+ ` + : html` + Contribution +
+
+ + Become a Contributor + + + Help Ghostery fight for a web where privacy is a basic + human right. + +
+ + + Become a Contributor + + +
+ `}
`} diff --git a/extension-manifest-v3/src/utils/api.js b/extension-manifest-v3/src/utils/api.js index 7284435e3..7cf7a34ec 100644 --- a/extension-manifest-v3/src/utils/api.js +++ b/extension-manifest-v3/src/utils/api.js @@ -11,7 +11,7 @@ import { jwtDecode } from 'jwt-decode'; -const DOMAIN = 'ghostery.com'; +const DOMAIN = 'ghosterystage.com'; const AUTH_URL = `https://consumerapi.${DOMAIN}/api/v2`; const ACCOUNT_URL = `https://accountapi.${DOMAIN}/api/v2.1.0`; diff --git a/packages/ui/src/modules/global/components/action.js b/packages/ui/src/modules/global/components/action.js index 8c894f73d..73a8279c0 100644 --- a/packages/ui/src/modules/global/components/action.js +++ b/packages/ui/src/modules/global/components/action.js @@ -21,12 +21,13 @@ export default { transition: opacity 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent; + text-decoration: none; } - + ::slotted(*:focus:not(:focus-visible)) { outline: none; } - + ::slotted(*:active) { opacity: 0.6; } diff --git a/packages/ui/src/modules/global/components/icon.js b/packages/ui/src/modules/global/components/icon.js index 2cce1e242..7a226d30a 100644 --- a/packages/ui/src/modules/global/components/icon.js +++ b/packages/ui/src/modules/global/components/icon.js @@ -203,6 +203,22 @@ const icons = { `, + 'contributor' : html` + + + + + + + + + + + + + + + `, 'chart': html`