Skip to content

/ ghostery-extension

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.

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

Jump to bottom

M20-51: New Opt-in for Ghostery #444

Merged
merged 10 commits into from Sep 6, 2019
+293 −39
Merged

M20-51: New Opt-in for Ghostery #444

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2821955
M20-51: first proto; not ready for prod
Aug 27, 2019
baaa4c6
M20-51: adding labels and headline
Aug 28, 2019
8e3c4b3
M20-51: just for eslint phase 1
Aug 28, 2019
5638487
M20-51: just for eslint phase 2
Aug 28, 2019
226647b
M20-51: hidding cross button when show first-prompt
Aug 28, 2019
9b3d2f9
M20-51: fixing tabs vs space
Aug 28, 2019
a5a4fe7
M20-51: fixing tabs vs space problem
Aug 28, 2019
ac1ef2a
M20-51: localization
Aug 28, 2019
e1ef2e8
M20-51: fix first flicker of the reward box
Sep 2, 2019
5acd76d
Merge branch 'develop' into M20-51_anewest_rewards_optin
christophertino Sep 6, 2019
File filter
Filter file types
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next

M20-51: adding labels and headline

  • Loading branch information
Aleksandr Panin
Aleksandr Panin committed Aug 30, 2019
commit baaa4c66e55903047584acf2954e8867d6990d7f
22 app/content-scripts/rewards/Notification.jsx
View file
Open in desktop
@@ -39,9 +39,8 @@ class Notification extends Component {

renderOptoutImage() {
return (
<div>
<div className="rewards-notification-optout-image-wrapper">
<img
className="rewards-notification-optout-image"
src={chrome.extension.getURL('app/images/rewards/ghostery_O.png')}
/>
</div>
@@ -61,6 +60,23 @@ class Notification extends Component {
);
}

renderHeadline() {
return (
<div className="first-prompt-headline">New Reward Discovered!</div>
);
}

renderLabels() {
return (
<div className="first-prompt-labels">
<img src={chrome.extension.getURL('app/images/rewards/exclusive.svg')} />
<span className="first-prompt-label">exclusive</span>
<img src={chrome.extension.getURL('app/images/rewards/best-offer.svg')} />
<span className="first-prompt-label">top angebot</span>
</div>
);
}

render() {
return (
<div>
@@ -80,6 +96,8 @@ class Notification extends Component {
)
}
<div className={`notification-text ${this.props.data.type}`}>
{this.props.data.type === 'first-prompt' && this.renderLabels()}
{this.props.data.type === 'first-prompt' && this.renderHeadline()}
{this.props.data.message}
{' '}
{this.props.data.type === 'first-prompt' && this.renderOptoutLink()}
20 app/content-scripts/rewards/OfferCard.jsx
View file
Open in desktop
@@ -55,6 +55,8 @@ class OfferCard extends Component {
this.closeIcon = `url(${chrome.extension.getURL('app/images/drawer/x.svg')})`;
this.ghostyGrey = `url(${chrome.extension.getURL('app/images/rewards/ghosty-grey.svg')})`;
this.kebabIcon = `url(${chrome.extension.getURL('app/images/rewards/settings-kebab.svg')})`;
this.poweredByMyoffrz =
`url(${chrome.extension.getURL('app/images/rewards/powered-by-myoffrz.svg')})`;

this.closeOfferCard = this.closeOfferCard.bind(this);
this.copyCode = this.copyCode.bind(this);
@@ -69,7 +71,7 @@ class OfferCard extends Component {
{
type: 'first-prompt',
buttons: true,
message: t('rewards_first_prompt'),
message: 'Would you like to receive offers and discounts from trusted Ghostery partners?',
textLink: {
href: 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/',
text: t('rewards_learn_more'),
@@ -315,10 +317,22 @@ class OfferCard extends Component {
<div className="reward-footer">
<div className="reward-feedback">
<div className="reward-smile" />
<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
{this.props.conf.rewardsPromptAccepted &&
<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
}
<div className="reward-arrow" />
</div>
<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
<a
className="reward-powered-by-myoffrz"
target="_blank"
rel="noopener noreferrer"
href="https://myoffrz.com/en/fuer-nutzer/"
>
<div
className="reward-ghosty"
style={{ backgroundImage: this.poweredByMyoffrz }}
/>
</a>
</div>
</div>
{ this.state.showPrompt === 1 &&
20 app/images/rewards/best-offer.svg
View file
Open in desktop
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>best-offer-icon13x12</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="13.1848266 11.8773227 0.584289551 11.8773227 0.584289551 0.288698125 13.1848266 0.288698125"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="best-offer-icon13x12">
<g id="Group-22" transform="translate(-0.388306, -0.287781)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-21"></g>
<polygon id="Fill-20" fill="#D47B32" mask="url(#mask-2)" points="6.8593406 0.288698125 8.29768439 4.71537631 12.9516153 4.71537631 9.18650404 7.45111965 10.6244519 11.8774019 6.8593406 9.14165859 3.09383338 11.8774019 4.53217717 7.45111965 0.766669948 4.71537631 5.42099682 4.71537631"></polygon>
</g>
</g>
</g>
</svg>
31 app/images/rewards/exclusive.svg
View file
Open in desktop
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>exclusive-icon13x12</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0.332977422 0.202651114 3.91222893 0.202651114 3.91222893 2.79994542 0.332977422 2.79994542"></polygon>
<polygon id="path-3" points="2.13315318e-20 0.202769163 2.13315318e-20 11.0179246 8.5658855 11.0179246 8.5658855 0.202769163"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="exclusive-icon13x12">
<g id="Group-28" transform="translate(0.277527, 0.369629)">
<g id="Group-3" transform="translate(7.200810, 0.313421)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M1.26871402,2.4486944 C1.39542015,2.75326131 1.54809711,2.83274777 1.87666736,2.78867607 C2.55505672,2.69856519 3.23344608,2.61160228 3.91222893,2.52385238 L2.51059152,0.202611764 L0.332977422,0.202611764 C0.645414284,0.951043644 0.957064152,1.69986902 1.26871402,2.4486944" id="Fill-1" fill="#DD9C19" mask="url(#mask-2)"></path>
</g>
<path d="M9.33411658,4.13782151 C9.03387813,4.26256016 8.95596567,4.39752973 8.99767638,4.71901703 C9.1113971,5.59415505 9.22511783,6.46929306 9.33765806,7.34443107 L11.8835856,4.11342468 L11.3830571,3.28471935 C10.7003392,3.5692179 10.0168344,3.85332296 9.33411658,4.13782151" id="Fill-4" fill="#DD9C19"></path>
<g id="Group-8" transform="translate(0.511356, 0.313421)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-7"></g>
<path d="M8.55801555,7.34395831 C8.18655409,6.4530804 7.81587963,5.5622025 7.44520516,4.67132459 C7.32951696,4.39430249 7.16778956,4.30891357 6.86637062,4.3490503 C5.9046632,4.47614993 4.94216879,4.60128207 3.97888738,4.72208574 C3.87933256,4.73467766 3.73649304,4.78032335 3.70147178,4.63590983 C3.669205,4.50330124 3.80929004,4.47614993 3.89861393,4.43837419 C4.79696828,4.06061677 5.69689663,3.68679433 6.59643147,3.31218489 C6.88722598,3.19059422 6.97064741,3.05090268 6.93011719,2.73925281 C6.82033144,1.8932336 6.7093652,1.04800138 6.59879246,0.202769163 L2.17194774,0.202769163 L-0.000157398923,3.79972805 L5.6858787,11.0180427 L8.5658855,7.36245268 C8.56352451,7.35615672 8.56077003,7.34986077 8.55801555,7.34395831" id="Fill-6" fill="#DD9C19" mask="url(#mask-4)"></path>
</g>
</g>
</g>
</g>
</svg>
21 app/images/rewards/powered-by-myoffrz.svg
View file
Open in desktop
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="78px" height="23px" viewBox="0 0 78 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>powered_by</title>
<desc>Created with Sketch.</desc>
<g id="powered_by" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-5" transform="translate(2.000000, 0.000000)" fill="#BEC3C8">
<g id="Group-8" transform="translate(0.000000, 10.800000)">
<path d="M22.4851981,8.77200035 L26.7522976,5.92690933 L22.5307561,3.12381831 C22.0930918,3.97690925 21.8438023,4.95545474 21.8438023,5.99618206 C21.8438023,6.99872755 22.0772233,7.94127304 22.4851981,8.77200035" id="Fill-1"></path>
<polyline id="Fill-3" points="-1.33937306e-12 0.330545468 2.50057353 0.330545468 5.2709121 5.08090929 8.04227445 0.330545468 10.5418242 0.330545468 10.5418242 11.5636368 8.23781571 11.5636368 8.23781571 4.23054562 5.2709121 9.028364 5.21102119 9.028364 2.27431897 4.27854562 2.27431897 11.5636368 -1.33937306e-12 11.5636368 -1.33937306e-12 0.330545468"></polyline>
<polyline id="Fill-5" points="15.6653125 7.13509119 11.6147417 0.330545468 14.3251894 0.330545468 16.8400958 4.83981837 19.4005602 0.330545468 22.0357603 0.330545468 17.9846776 7.08654574 17.9846776 11.5636368 15.6653125 11.5636368 15.6653125 7.13509119"></polyline>
<polyline id="Fill-6" points="34.5821384 0.330545468 42.6090562 0.330545468 42.6090562 2.57727283 36.9015036 2.57727283 36.9015036 4.96854565 41.9313164 4.96854565 41.9313164 7.21527301 36.9015036 7.21527301 36.9015036 11.5636368 34.5821384 11.5636368 34.5821384 0.330545468"></polyline>
<polyline id="Fill-7" points="44.0858535 0.330545468 52.1132832 0.330545468 52.1132832 2.57727283 46.4057305 2.57727283 46.4057305 4.96854565 51.4355433 4.96854565 51.4355433 7.21527301 46.4057305 7.21527301 46.4057305 11.5636368 44.0858535 11.5636368 44.0858535 0.330545468"></polyline>
<path d="M58.3834009,5.7867275 C59.5126261,5.7867275 60.1601646,5.14472748 60.1601646,4.1983638 L60.1601646,4.16618198 C60.1601646,3.10745467 59.4670681,2.56090919 58.3378429,2.56090919 L56.0338344,2.56090919 L56.0338344,5.7867275 L58.3834009,5.7867275 Z M53.7144693,0.330545468 L58.5333841,0.330545468 C59.8735073,0.330545468 60.9126402,0.732000029 61.6057367,1.47000006 C62.1928724,2.0961819 62.5092193,2.97872739 62.5092193,4.03745471 L62.5092193,4.06963653 C62.5092193,5.88327296 61.5903801,7.02272755 60.2497451,7.55181848 L62.826078,11.5636368 L60.1146066,11.5636368 L57.8561561,7.96909123 L56.0338344,7.96909123 L56.0338344,11.5636368 L53.7144693,11.5636368 L53.7144693,0.330545468 L53.7144693,0.330545468 Z" id="Fill-8"></path>
<polyline id="Fill-9" points="63.9123046 9.6861822 69.7104615 2.49709101 64.0930011 2.49709101 64.0930011 0.330545468 72.691698 0.330545468 72.691698 2.20854554 66.894053 9.39709128 72.691698 9.39709128 72.691698 11.5636368 63.9123046 11.5636368 63.9123046 9.6861822"></polyline>
<path d="M31.4447761,1.75636371 C30.3462641,0.585818205 28.9063228,5.15143483e-14 27.4658696,5.15143483e-14 C26.0883787,5.15143483e-14 24.718566,0.552000022 23.6395058,1.62327279 L25.6553213,2.97709103 C26.1917801,2.61054556 26.8132123,2.40872737 27.4658696,2.40872737 C28.3652571,2.40872737 29.2108963,2.78181829 29.8466613,3.45927286 C31.1591425,4.85836383 31.1591425,7.13454574 29.8466613,8.53309125 C29.2108963,9.21109128 28.3652571,9.5841822 27.4658696,9.5841822 C26.754857,9.5841822 26.082236,9.34309128 25.5155758,8.91000035 L23.51051,10.2567277 C24.6064625,11.4120005 26.0356542,11.9923641 27.4658696,11.9923641 C28.9063228,11.9923641 30.3462641,11.4070914 31.4447761,10.2360004 C33.6423118,7.8949094 33.6423118,4.09800016 31.4447761,1.75636371" id="Fill-11"></path>
</g>
<path d="M24.8267776,1.67330071 L26.9124222,1.67330071 C27.9533988,1.67330071 28.6695316,2.39312494 28.6695316,3.44886714 C28.6695316,4.48984372 27.9312503,5.20597654 26.8865824,5.20597654 L25.6536527,5.20597654 L25.6536527,7 L24.8267776,7 L24.8267776,1.67330071 Z M25.6536527,2.40419916 L25.6536527,4.4787695 L26.6946292,4.4787695 C27.4070706,4.4787695 27.8241996,4.10962887 27.8241996,3.44886714 C27.8241996,2.77333979 27.4218363,2.40419916 26.6946292,2.40419916 L25.6536527,2.40419916 Z M32.0028715,1.54410149 C33.5348051,1.54410149 34.4871879,2.61830072 34.4871879,4.33480465 C34.4871879,6.04761717 33.5421879,7.12919922 32.0028715,7.12919922 C30.4524808,7.12919922 29.5148636,6.05130858 29.5148636,4.33480465 C29.5148636,2.61460932 30.4746293,1.54410149 32.0028715,1.54410149 Z M32.0028715,2.31560541 C30.9951176,2.31560541 30.3601957,3.09818354 30.3601957,4.33480465 C30.3601957,5.56404295 30.9766605,6.3576953 32.0028715,6.3576953 C33.0143168,6.3576953 33.6418559,5.56404295 33.6418559,4.33480465 C33.6418559,3.09818354 33.0106254,2.31560541 32.0028715,2.31560541 Z M38.4185356,3.09080073 L37.2778911,7 L36.495313,7 L35.0593559,1.67330071 L35.9194536,1.67330071 L36.8976762,5.75230467 L36.9493559,5.75230467 L38.0604692,1.67330071 L38.8282817,1.67330071 L39.9467778,5.75230467 L39.9984575,5.75230467 L40.9729888,1.67330071 L41.8330865,1.67330071 L40.393438,7 L39.6145513,7 L38.4702153,3.09080073 L38.4185356,3.09080073 Z M46.2110943,6.24695312 L46.2110943,7 L42.8297662,7 L42.8297662,1.67330071 L46.2110943,1.67330071 L46.2110943,2.4263476 L43.6566412,2.4263476 L43.6566412,3.93244137 L46.0745123,3.93244137 L46.0745123,4.64857419 L43.6566412,4.64857419 L43.6566412,6.24695312 L46.2110943,6.24695312 Z M48.2302936,2.40050775 L48.2302936,4.26466793 L49.4189264,4.26466793 C50.0575397,4.26466793 50.4266803,3.92505855 50.4266803,3.33074214 C50.4266803,2.75119135 50.0353913,2.40050775 49.396778,2.40050775 L48.2302936,2.40050775 Z M48.2302936,4.96972654 L48.2302936,7 L47.4034186,7 L47.4034186,1.67330071 L49.5112116,1.67330071 C50.5854108,1.67330071 51.2757038,2.311914 51.2757038,3.31228511 C51.2757038,4.02841793 50.8917975,4.61166012 50.24211,4.8331445 L51.4381257,7 L50.4820514,7 L49.396778,4.96972654 L48.2302936,4.96972654 Z M55.8345906,6.24695312 L55.8345906,7 L52.4532624,7 L52.4532624,1.67330071 L55.8345906,1.67330071 L55.8345906,2.4263476 L53.2801374,2.4263476 L53.2801374,3.93244137 L55.6980085,3.93244137 L55.6980085,4.64857419 L53.2801374,4.64857419 L53.2801374,6.24695312 L55.8345906,6.24695312 Z M57.0269148,1.67330071 L58.9501375,1.67330071 C60.5300594,1.67330071 61.4566024,2.64414057 61.4566024,4.32003903 C61.4566024,6.02177733 60.5374422,7 58.9501375,7 L57.0269148,7 L57.0269148,1.67330071 Z M57.8537898,2.4263476 L57.8537898,6.24695312 L58.8578523,6.24695312 C59.972657,6.24695312 60.6149617,5.55296873 60.6149617,4.33111325 C60.6149617,3.12771479 59.9615828,2.4263476 58.8578523,2.4263476 L57.8537898,2.4263476 Z M66.8312899,7 L64.642286,7 L64.642286,1.67330071 L66.7833016,1.67330071 C67.7836727,1.67330071 68.385372,2.18271478 68.385372,3.00220698 C68.385372,3.55960933 67.9756259,4.05794918 67.4514462,4.14654293 L67.4514462,4.20929684 C68.1712704,4.28312496 68.6511532,4.79623044 68.6511532,5.49021482 C68.6511532,6.42783202 67.9682431,7 66.8312899,7 Z M65.469161,2.37466791 L65.469161,3.92874996 L66.4510751,3.92874996 C67.1819735,3.92874996 67.5621884,3.6592773 67.5621884,3.15355464 C67.5621884,2.6625976 67.204122,2.37466791 66.5913485,2.37466791 L65.469161,2.37466791 Z M65.469161,6.2986328 L66.6651766,6.2986328 C67.4108407,6.2986328 67.8058212,5.99593749 67.8058212,5.43115232 C67.8058212,4.87374997 67.3960751,4.58212887 66.6171884,4.58212887 L65.469161,4.58212887 L65.469161,6.2986328 Z M71.8589853,7 L71.0321103,7 L71.0321103,4.85160153 L69.1568759,1.67330071 L70.0760361,1.67330071 L71.4160165,3.98042965 L71.4787705,3.98042965 L72.8187509,1.67330071 L73.7379111,1.67330071 L71.8589853,4.85160153 L71.8589853,7 Z" id="POWEREDBY" fill-rule="nonzero"></path>
</g>
</g>
</svg>
42 app/scss/rewards.scss
View file
Open in desktop
@@ -344,6 +344,11 @@
}
}

.reward-powered-by-myoffrz {
width: 98px;
cursor: pointer;
}

.reward-ghosty {
flex: 1;
background-repeat: no-repeat;
@@ -413,8 +418,11 @@
width: 100%;
height: 100%;

.rewards-notification-optout-image {
width: 100%;
.rewards-notification-optout-image-wrapper {
height: 80%;
img {
width: 100%;
}
}

.rewards-notification {
@@ -452,6 +460,28 @@
height: 100%;
overflow: hidden;

.first-prompt-labels {
font-size: 9px;
img {
margin-bottom: -2px;
}
}

.first-prompt-label {
text-transform: uppercase;
color: silver;
padding-left: 3px;
padding-right: 6px;
}

.first-prompt-headline {
color: $dark-purple;
font-size: 14px;
font-weight: 700;
padding-top: 11px;
padding-bottom: 5px;
}

a {
color: black;
}
@@ -487,11 +517,11 @@
}
button {
&:nth-child(1) {
background-color: #5B005C;
color: #FFFFFF;
background-color: $dark-purple;
color: $white;
&:hover {
background-color: #5B005C;
color: #FFFFFF;
background-color: $dark-purple;
color: $white;
}
}
&:nth-child(2) {
ProTip! Use n and p to navigate between commits in a pull request.