Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add contributor badge info to panel and settings page #1505

Merged
merged 1 commit into from
Mar 21, 2024
Merged

Add contributor badge info to panel and settings page #1505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions extension-manifest-v3/src/pages/panel/components/navigation-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { html } from 'hybrids';

export default {
render: () => html`
<template layout="block padding">
<slot></slot>
</template>
`.css`
:host {
border: 1px solid var(--ui-color-gray-300);
border-radius: 8px;
}
`,
};
30 changes: 30 additions & 0 deletions extension-manifest-v3/src/pages/panel/views/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{},
{
Expand Down Expand Up @@ -110,6 +112,34 @@ export default {
: html`<ui-line></ui-line>`,
)}
`}
${session.contributor &&
html`
<ui-action>
<a
href="${chrome.runtime.getURL(
'/pages/settings/index.html#@gh-settings-account',
)}"
onclick="${openTabWithUrl}"
>
<gh-panel-navigation-card
layout="row gap:1.5 items:center margin:1.5"
>
<img
src="${assets['contributor_badge']}"
layout="size:12"
alt="Contribution"
/>
<div>
<ui-text type="label-l">You are awesome!</ui-text>
<ui-text type="body-s" color="gray-600">
Thank you for your support in Ghostery's fight for a web
where privacy is a basic human right!
</ui-text>
</div>
</gh-panel-navigation-card>
</a>
</ui-action>
`}
</div>
</template>
`,
Expand Down
103 changes: 103 additions & 0 deletions extension-manifest-v3/src/pages/settings/assets/contributor_badge.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
163 changes: 108 additions & 55 deletions extension-manifest-v3/src/pages/settings/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export default {
WhoTracks.Me
</a>
${store.ready(session) &&
!session.contributor &&
html`
<ui-settings-card
layout="hidden"
Expand All @@ -66,39 +65,69 @@ export default {
"
slot="nav"
>
<img
src="${assets['hands']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="block:center">
Become a Contributor
</ui-text>
<ui-text type="body-s" color="gray-600" layout="block:center">
Help Ghostery fight for a web where privacy is a basic human
right.
</ui-text>
<ui-button layout="margin:top">
<a
href="https://www.ghostery.com/become-a-contributor?utm_source=gbe"
target="_blank"
>
Become a Contributor
</a>
</ui-button>
</div>
${session.contributor
? html`
<img
src="${assets['contributor_badge']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="block:center">
You are awesome!
</ui-text>
<ui-text
type="body-s"
color="gray-600"
layout="block:center"
>
Thank you for your support in Ghostery's fight for a web
where privacy is a basic human right!
</ui-text>
</div>
`
: html`
<img
src="${assets['hands']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="block:center">
Become a Contributor
</ui-text>
<ui-text
type="body-s"
color="gray-600"
layout="block:center"
>
Help Ghostery fight for a web where privacy is a basic
human right.
</ui-text>
<ui-button layout="margin:top">
<a
href="https://www.ghostery.com/become-a-contributor?utm_source=gbe"
target="_blank"
>
Become a Contributor
</a>
</ui-button>
</div>
`}
</ui-settings-card>
`}
<a
href="${router.url(Account, { scrollToTop: true })}"
class="${{ active: router.active(Account), bottom: true }}"
slot="nav"
>
<ui-icon name="user" color="nav"></ui-icon>
${store.ready(session) && session.user
? html`
${session.contributor
? html`<ui-icon name="contributor"></ui-icon>`
: html`<ui-icon name="user" color="nav"></ui-icon>`}
<span layout@992px="hidden">My Account</span>
<div
layout="hidden"
Expand All @@ -108,11 +137,10 @@ export default {
<ui-text type="body-m" ellipsis>${session.email}</ui-text>
</div>
`
: html`My Account`}
: html`<ui-icon name="user" color="nav"></ui-icon> My Account`}
</a>
${stack}
${store.ready(session) &&
!session.contributor &&
html`
<section
layout="grid:1/1 grow items:end:stretch padding:0"
Expand All @@ -123,34 +151,59 @@ export default {
layout="column items:center gap"
layout@768px="row gap:5"
>
<img
src="${assets['hands']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div
layout="block:center column gap:0.5"
layout@768px="block:left row grow gap:5 content:space-between"
>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="">
Become a Contributor
</ui-text>
<ui-text type="body-s" color="gray-600">
Help Ghostery fight for a web where privacy is a basic human
right.
</ui-text>
</div>
<ui-button layout="grow margin:top">
<a
href="https://www.ghostery.com/become-a-contributor?utm_source=gbe"
target="_blank"
>
Become a Contributor
</a>
</ui-button>
</div>
${session.contributor
? html`
<img
src="${assets['contributor_badge']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div
layout="block:center column gap:0.5"
layout@768px="block:left row grow gap:5 content:space-between"
>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="">
You are awesome!
</ui-text>
<ui-text type="body-s" color="gray-600">
Thank you for your support in Ghostery's fight for a
web where privacy is a basic human right!
</ui-text>
</div>
</div>
`
: html`
<img
src="${assets['hands']}"
layout="size:12"
alt="Contribution"
slot="picture"
/>
<div
layout="block:center column gap:0.5"
layout@768px="block:left row grow gap:5 content:space-between"
>
<div layout="column gap:0.5">
<ui-text type="label-l" layout="">
Become a Contributor
</ui-text>
<ui-text type="body-s" color="gray-600">
Help Ghostery fight for a web where privacy is a basic
human right.
</ui-text>
</div>
<ui-button layout="grow margin:top">
<a
href="https://www.ghostery.com/become-a-contributor?utm_source=gbe"
target="_blank"
>
Become a Contributor
</a>
</ui-button>
</div>
`}
</ui-settings-card>
</section>
`}
Expand Down
2 changes: 1 addition & 1 deletion extension-manifest-v3/src/utils/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/src/modules/global/components/action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading
Loading