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

Remove updates and promotions checkbox and dropdown #659

Merged
merged 3 commits into from Jan 19, 2021
+28 −108
Merged

Remove updates and promotions checkbox and dropdown #659

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7201ab2
Remove learn more dropdown and update design
benstrumeyer Jan 13, 2021
a8a7552
Remove updates and promotions checkbox and automatically subscribe th…
benstrumeyer Jan 13, 2021
f949dfa
Remove ,
benstrumeyer Jan 13, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next

Remove learn more dropdown and update design

  • Loading branch information
@benstrumeyer
benstrumeyer committed Jan 13, 2021
commit 7201ab218cdab08d3347861e27687af4b15e8120
43 ...ery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx
View file
Open in desktop
@@ -11,10 +11,9 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import React, { Fragment, useRef, useState } from 'react';
import React, { Fragment, useState } from 'react';
import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import Step1_LogInForm from '../Step1_LogInForm';
import Step1_CreateAccountForm from '../Step1_CreateAccountForm';
import globals from '../../../../../src/classes/Globals';
@@ -38,10 +37,10 @@ const faqList = [

const renderFAQListItem = (icon, label, description) => (
<div className="Step1_CreateAccountView__faqItemContainer row">
<div className="Step1_CreateAccountView__faqIconContainer columns small-12 medium-10 medium-offset-1 large-2 large-offset-1">
<div className="Step1_CreateAccountView__faqIconContainer columns small-12 medium-10 large-2">
<img className="Step1_CreateAccountView__faqIcon" src={`/app/images/hub/browser-create-account-view/${icon}`} />
</div>
<div className="Step1_CreateAccountView__faqItemTextContainer columns small-12 medium-10 medium-offset-1 large-8 large-offset-0">
<div className="Step1_CreateAccountView__faqItemTextContainer columns small-12 medium-10 large-10">
<div className="Step1_CreateAccountView__faqItemLabel">{label}</div>
<div className="Step1_CreateAccountView__faqItemDescription">{description}</div>
</div>
@@ -58,24 +57,8 @@ const Step1_CreateAccountView = (props) => {
const { setSetupStep } = actions;
const email = user && user.email;

const [expanded, setExpanded] = useState(false);
const [view, setView] = useState(CREATE_ACCOUNT);

const arrowClassNames = ClassNames('Step1_CreateAccountView__arrow', {
up: expanded,
down: !expanded,
});

const faqRef = useRef(null);
const scrollToFAQ = () => {
faqRef.current.scrollIntoView({ behavior: 'smooth' });
};

const handleFAQLearnMoreClick = () => {
setTimeout(scrollToFAQ, 1);
setExpanded(!expanded);
};

This conversation was marked as resolved by wlycdgr
Comment on lines -64 to -78

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jan 13, 2021
Member

I THINK we are only cutting the bit of copy above "Learn More" - not the click-arrow-to-expand mechanism. If that's so, we'll need to restore this logic and the other related bits

This comment has been minimized.

Sign in to view
@benstrumeyer

benstrumeyer Jan 14, 2021
Author Contributor

Double checked with Teresa, we are cutting the arrow as well
const renderSkipLink = () => (
<div className="row align-center-middle">
<div className="columns small-10 medium-6" />
@@ -120,22 +103,14 @@ const Step1_CreateAccountView = (props) => {
{/* eslint-disable-next-line react/jsx-pascal-case */}
<Step1_CreateAccountForm />
{renderSkipLink()}
<div className="Step1_CreateAccountView__learnMoreContainer" onClick={handleFAQLearnMoreClick}>
<div className="Step1_CreateAccountView__learnMore">{t('ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously')}</div>
<div className="Step1_CreateAccountView__FAQContainer">
{faqList.map(item => renderFAQListItem(item.icon, item.label, item.description))}
</div>
<div className={arrowClassNames} onClick={handleFAQLearnMoreClick} />
<div ref={faqRef} className="Step1_CreateAccountView__FAQContainer">
{expanded &&
faqList.map(item => renderFAQListItem(item.icon, item.label, item.description))
}
<div className="row">
<a className="Step1_CreateAccountView__privacyPolicyLink columns small-12 medium-10 medium-offset-1 large-8 large-offset-3" href={`${globals.GHOSTERY_BASE_URL}/about-ghostery/ghostery-plans-and-products-privacy-policy/`} target="_blank" rel="noreferrer">
{t('ghostery_browser_hub_onboarding_visit_our_privacy_policy')}
</a>
</div>
{expanded && (
<div className="row">
<a className="Step1_CreateAccountView__privacyPolicyLink columns small-12 medium-10 medium-offset-1 large-8 large-offset-3" href={`${globals.GHOSTERY_BASE_URL}/about-ghostery/ghostery-plans-and-products-privacy-policy/`} target="_blank" rel="noreferrer">
{t('ghostery_browser_hub_onboarding_visit_our_privacy_policy')}
</a>
</div>
)}
</Fragment>
) : (
<Fragment>
22 ...ry-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss
View file
Open in desktop
@@ -174,27 +174,17 @@ $color-create-account-form-error-red: #e74055;
text-decoration: underline;
cursor: pointer;
}
.Step1_CreateAccountView__arrow {
margin: 15px auto 0 auto;
height: 12px;
width: 12px;
border-left: 2px solid #00aef0;
border-top: 2px solid #00aef0;
cursor: pointer;

&.up {
transform: rotate(45deg);
}
&.down {
transform: rotate(225deg);
}
}
.Step1_CreateAccountView__FAQContainer {
margin-top: 10px;
margin-top: 48px;
padding-top: 20px;
@include breakpoint(small down) {
margin-top: 42px;
text-align: center;
}
@include breakpoint(large up) {
width: 108%;
margin-left: -4%;
}
}
.Step1_CreateAccountView__faqItemContainer {
margin-bottom: 30px;
ProTip! Use n and p to navigate between commits in a pull request.