From ca8d50552f991168e7358812c194bf17e79e4718 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Mon, 27 Apr 2020 12:37:42 -0400
Subject: [PATCH 1/6] Style ForgotPassword Hub and rename locale variable to
 place

---
 app/hub/index.jsx                             |  2 +-
 app/panel/index.jsx                           |  2 +-
 .../ForgotPassword/ForgotPassword.jsx         | 12 ++++-----
 .../ForgotPassword/ForgotPassword.scss        | 26 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/app/hub/index.jsx b/app/hub/index.jsx
index 9f6590bbe..5b052a05e 100644
--- a/app/hub/index.jsx
+++ b/app/hub/index.jsx
@@ -46,7 +46,7 @@ const Hub = () => (
 		<Route exact path="/rewards" component={RewardsView} />
 		<Route exact path="/products" component={ProductsView} />
 		<Route exact path="/create-account" component={CreateAccountView} />
-		<Route exact path="/forgot-password" render={() => <ForgotPasswordView locale="hub" />} />
+		<Route exact path="/forgot-password" render={() => <ForgotPasswordView place="hub" />} />
 		<Route exact path="/log-in" component={LogInView} />
 	</AppView>
 );
diff --git a/app/panel/index.jsx b/app/panel/index.jsx
index 3ab83e39e..f4b6ddc7b 100644
--- a/app/panel/index.jsx
+++ b/app/panel/index.jsx
@@ -51,7 +51,7 @@ const Ghostery = () => (
 		<Route path="/subscribe/:loggedIn" component={Subscribe} />
 		<Route path="/login" component={Login} />
 		<Route path="/create-account" component={CreateAccount} />
-		<Route path="/forgot-password" render={() => <ForgotPassword locale="panel" />} />
+		<Route path="/forgot-password" render={() => <ForgotPassword place="panel" />} />
 		<Route path="/account-success" component={AccountSuccess} />
 	</Panel>
 );
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx
index 059b75de8..53e6a4a0b 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.jsx
+++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx
@@ -46,9 +46,9 @@ class ForgotPassword extends React.Component {
 		e.preventDefault();
 		this.setState({ loading: true }, () => {
 			const { email } = this.state;
-			const { locale } = this.props;
-			const isInPanel = locale === 'panel';
-			const isInHub = locale === 'hub';
+			const { place } = this.props;
+			const isInPanel = place === 'panel';
+			const isInHub = place === 'hub';
 
 			// validate the email and password
 			if (!validateEmail(email)) {
@@ -86,9 +86,9 @@ class ForgotPassword extends React.Component {
 	 */
 	render() {
 		const { email, loading, emailError } = this.state;
-		const { locale } = this.props;
-		const isInPanel = locale === 'panel';
-		const isInHub = locale === 'hub';
+		const { place } = this.props;
+		const isInPanel = place === 'panel';
+		const isInHub = place === 'hub';
 		const buttonClasses = ClassNames('button ghostery-button', { loading });
 
 		const ContainerClassNames = ClassNames('', {
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index bd679244e..cb4d88032 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -39,9 +39,33 @@
 		width: 456px;
 	}
 	.ForgotPasswordButtonsContainer {
-		margin-top: 10px;
+		margin-left: 3px;
 		width: 456px;
 	}
+	input#ForgotPasswordMessage {
+		// Foundation Overrides
+		border: 1px solid #c8c7c2;
+		border-radius: 0;
+		box-shadow: none;
+
+		&:focus {
+			// Foundation Overrides
+			box-shadow: none;
+			border-color: #4a4a4a;
+		}
+	}
+	#forgot-password-cancel {
+		border-color: #930194;
+		color: #930194;
+		width: 150px;
+	}
+	.button.ghostery-button {
+		background-color: #930194;
+		width: 150px;
+	}
+	.loader:after {
+		background: #930194;
+	}
 }
 
 /* FORGOT PASSWORD SHARED */

From 00e9c38f5b1e716ab3b3917295ead4f0fabba8e7 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Tue, 28 Apr 2020 09:35:20 -0400
Subject: [PATCH 2/6] Make ForgotPassword in hub responsive. Use foundation
 classes for button styling

---
 app/hub/index.jsx                             |   2 +-
 app/panel/index.jsx                           |   2 +-
 app/scss/partials/_loader.scss                |   3 +
 .../ForgotPassword/ForgotPassword.jsx         | 117 ++++++++++--------
 .../ForgotPassword/ForgotPassword.scss        |  32 ++---
 5 files changed, 84 insertions(+), 72 deletions(-)

diff --git a/app/hub/index.jsx b/app/hub/index.jsx
index 5b052a05e..020cde46e 100644
--- a/app/hub/index.jsx
+++ b/app/hub/index.jsx
@@ -46,7 +46,7 @@ const Hub = () => (
 		<Route exact path="/rewards" component={RewardsView} />
 		<Route exact path="/products" component={ProductsView} />
 		<Route exact path="/create-account" component={CreateAccountView} />
-		<Route exact path="/forgot-password" render={() => <ForgotPasswordView place="hub" />} />
+		<Route exact path="/forgot-password" render={() => <ForgotPasswordView hub />} />
 		<Route exact path="/log-in" component={LogInView} />
 	</AppView>
 );
diff --git a/app/panel/index.jsx b/app/panel/index.jsx
index f4b6ddc7b..4b3f5613e 100644
--- a/app/panel/index.jsx
+++ b/app/panel/index.jsx
@@ -51,7 +51,7 @@ const Ghostery = () => (
 		<Route path="/subscribe/:loggedIn" component={Subscribe} />
 		<Route path="/login" component={Login} />
 		<Route path="/create-account" component={CreateAccount} />
-		<Route path="/forgot-password" render={() => <ForgotPassword place="panel" />} />
+		<Route path="/forgot-password" render={() => <ForgotPassword />} />
 		<Route path="/account-success" component={AccountSuccess} />
 	</Panel>
 );
diff --git a/app/scss/partials/_loader.scss b/app/scss/partials/_loader.scss
index cf3aa0d42..91c34bb93 100644
--- a/app/scss/partials/_loader.scss
+++ b/app/scss/partials/_loader.scss
@@ -56,6 +56,9 @@
 	bottom: 0;
 	right: 0;
 }
+.loader.success:after {
+	background: #930194;
+}
 @-webkit-keyframes load3 {
 	0% {
 		-webkit-transform: rotate(0deg);
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx
index 53e6a4a0b..0fe3deb02 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.jsx
+++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx
@@ -46,9 +46,8 @@ class ForgotPassword extends React.Component {
 		e.preventDefault();
 		this.setState({ loading: true }, () => {
 			const { email } = this.state;
-			const { place } = this.props;
-			const isInPanel = place === 'panel';
-			const isInHub = place === 'hub';
+			const { hub } = this.props;
+			const panel = !hub;
 
 			// validate the email and password
 			if (!validateEmail(email)) {
@@ -62,14 +61,14 @@ class ForgotPassword extends React.Component {
 			this.props.actions.resetPassword(email)
 				.then((success) => {
 					this.setState({ loading: false });
-					if (success && isInHub) {
+					if (success && hub) {
 						this.navigateToLogIn();
 
 						this.props.actions.setToast({
 							toastMessage: t('banner_check_your_email_title'),
 							toastClass: 'success',
 						});
-					} else if (success && isInPanel) {
+					} else if (success && panel) {
 						this.props.history.push('/login');
 					}
 				});
@@ -86,71 +85,79 @@ class ForgotPassword extends React.Component {
 	 */
 	render() {
 		const { email, loading, emailError } = this.state;
-		const { place } = this.props;
-		const isInPanel = place === 'panel';
-		const isInHub = place === 'hub';
-		const buttonClasses = ClassNames('button ghostery-button', { loading });
-
+		const { hub } = this.props;
+		const panel = !hub;
+		const buttonClasses = ClassNames('button ghostery-button', {
+			loading,
+			success: hub
+		});
 		const ContainerClassNames = ClassNames('', {
-			'forgot-password-panel': isInPanel,
-			ForgotPasswordView: isInHub,
+			'forgot-password-panel': panel,
+			ForgotPasswordView: hub,
 		});
 		const MessageClassNames = ClassNames('', {
-			'forgot-password-message': isInPanel,
-			ForgotPasswordMessage: isInHub,
+			'forgot-password-message': panel,
+			ForgotPasswordMessage: hub,
 		});
 		const EmailClassNames = ClassNames('', {
-			'forgot-input-email': isInPanel,
-			ForgotPasswordMessage: isInHub,
+			'forgot-input-email': panel,
+			ForgotPasswordMessage: hub,
 		});
-
 		const ButtonsContainerClassNames = ClassNames('row', {
-			'buttons-container': isInPanel,
-			ForgotPasswordButtonsContainer: isInHub,
+			'buttons-container': panel,
+			ForgotPasswordButtonsContainer: hub,
+		});
+		const loaderClassNames = ClassNames('loader', {
+			success: hub
 		});
 		return (
 			<div id={ContainerClassNames}>
 				<div className="row align-center">
-					<div className="small-11 medium-8 columns">
-						<form onSubmit={this.handleSubmit}>
+					<form onSubmit={this.handleSubmit}>
+						{panel && (
 							<h4 id={MessageClassNames}>
-								{ t('forgot_password_message') }
+								{t('forgot_password_message')}
 							</h4>
-							<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
-								<label htmlFor={EmailClassNames}>
-									{ t('email_colon') }
-									<span className="asterisk">*</span>
-									<input onChange={this.handleInputChange} value={email} id={EmailClassNames} type="text" name="email" pattern=".{1,}" autoComplete="off" required />
-								</label>
-								<p className="invalid-email warning">
-									{ t('invalid_email_forgot') }
-								</p>
-								<p className="not-found-error warning">
-									{ t('error_email_forgot') }
-								</p>
+						)}
+						{hub && (
+							<h3 id={MessageClassNames}>
+								{t('forgot_password_message')}
+							</h3>
+						)}
+						<div id="forgot-email" className={(emailError ? 'panel-error invalid-email' : '')}>
+							<label htmlFor={EmailClassNames}>
+								{t('email_colon')}
+								<span className="asterisk">*</span>
+								<input onChange={this.handleInputChange} value={email} id={EmailClassNames} type="text" name="email" pattern=".{1,}" autoComplete="off" required />
+							</label>
+							<p className="invalid-email warning">
+								{t('invalid_email_forgot')}
+							</p>
+							<p className="not-found-error warning">
+								{t('error_email_forgot')}
+							</p>
+						</div>
+						<div className={ButtonsContainerClassNames}>
+							<div className="small-6 columns text-center">
+								{panel && (
+									<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
+										{t('button_cancel')}
+									</Link>
+								)}
+								{hub && (
+									<div id="forgot-password-cancel" className="cancel button hollow success" onClick={this.navigateToLogIn}>
+										{t('button_cancel')}
+									</div>
+								)}
 							</div>
-							<div className={ButtonsContainerClassNames}>
-								<div className="small-6 columns text-center">
-									{isInPanel && (
-										<Link to="/login" id="forgot-password-cancel" className="cancel button hollow">
-											{t('button_cancel')}
-										</Link>
-									)}
-									{isInHub && (
-										<div id="forgot-password-cancel" className="cancel button hollow" onClick={this.navigateToLogIn}>
-											{t('button_cancel')}
-										</div>
-									)}
-								</div>
-								<div className="small-6 columns text-center">
-									<button type="submit" id="send-button" className={buttonClasses}>
-										<span className="title">{ t('send_button_label') }</span>
-										<span className="loader" />
-									</button>
-								</div>
+							<div className="small-6 columns text-center">
+								<button type="submit" id="send-button" className={buttonClasses}>
+									<span className="title">{t('send_button_label')}</span>
+									<span className={loaderClassNames} />
+								</button>
 							</div>
-						</form>
-					</div>
+						</div>
+					</form>
 				</div>
 			</div>
 		);
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index cb4d88032..7e238e71a 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -13,14 +13,14 @@
 
 /* FORGOT PASSWORD PANEL */
 #forgot-password-panel {
-	margin-top: 75px;
+	margin: 75px auto 0 auto;
+	width: 356px;
 	h4#forgot-password-message {
 		font-size:14px;
 		font-weight: normal;
 		color: #333333;
 		margin-bottom: 50px;
 	}
-
 	.buttons-container {
 		margin-top: 60px;
 		#send-button {
@@ -31,16 +31,18 @@
 
 /* FORGOT PASSWORD HUB */
 #ForgotPasswordView {
-	margin: 70px 0 70px 182px;
+	height: 100%;
+	display: flex;
+	align-items: center;
 	#forgot-email {
-		margin: 25px auto;
+		margin: 40px auto;
 	}
 	#ForgotPasswordMessage {
-		width: 456px;
+		width: 548px;
 	}
 	.ForgotPasswordButtonsContainer {
 		margin-left: 3px;
-		width: 456px;
+		width: 548px;
 	}
 	input#ForgotPasswordMessage {
 		// Foundation Overrides
@@ -54,17 +56,17 @@
 			border-color: #4a4a4a;
 		}
 	}
-	#forgot-password-cancel {
-		border-color: #930194;
-		color: #930194;
-		width: 150px;
-	}
-	.button.ghostery-button {
-		background-color: #930194;
+	#send-button {
 		width: 150px;
 	}
-	.loader:after {
-		background: #930194;
+	@media only screen and (max-width: 800px) {
+		#ForgotPasswordMessage {
+			width: 456px;
+			text-align: center;
+		}
+		.ForgotPasswordButtonsContainer {
+			width: 456px;
+		}
 	}
 }
 

From 3167e20fedd355ba19d1eeea1acfef978eb30cf3 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Tue, 28 Apr 2020 10:19:51 -0400
Subject: [PATCH 3/6] Move ForgotPassword hub content upwards from center

---
 app/shared-components/ForgotPassword/ForgotPassword.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index 7e238e71a..bb30076f1 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -34,6 +34,7 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
+	margin-top: -10%;
 	#forgot-email {
 		margin: 40px auto;
 	}

From 3a5dacc0ff8dfcc0a6ea195edaef0e85b671f201 Mon Sep 17 00:00:00 2001
From: Ben <benjamin.strumeyer@gmail.com>
Date: Tue, 28 Apr 2020 13:55:22 -0400
Subject: [PATCH 4/6] Refactor css

---
 .../ForgotPassword/ForgotPassword.jsx         |  4 ++--
 .../ForgotPassword/ForgotPassword.scss        | 21 +++----------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx
index 0fe3deb02..5eaa5ead5 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.jsx
+++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx
@@ -113,14 +113,14 @@ class ForgotPassword extends React.Component {
 		return (
 			<div id={ContainerClassNames}>
 				<div className="row align-center">
-					<form onSubmit={this.handleSubmit}>
+					<form className="ForgotPasswordForm" onSubmit={this.handleSubmit}>
 						{panel && (
 							<h4 id={MessageClassNames}>
 								{t('forgot_password_message')}
 							</h4>
 						)}
 						{hub && (
-							<h3 id={MessageClassNames}>
+							<h3 id={MessageClassNames} className="text-center">
 								{t('forgot_password_message')}
 							</h3>
 						)}
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index bb30076f1..b61cc7da3 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -32,18 +32,12 @@
 /* FORGOT PASSWORD HUB */
 #ForgotPasswordView {
 	height: 100%;
-	display: flex;
-	align-items: center;
-	margin-top: -10%;
+	margin-top: 100px;
 	#forgot-email {
 		margin: 40px auto;
 	}
-	#ForgotPasswordMessage {
-		width: 548px;
-	}
-	.ForgotPasswordButtonsContainer {
-		margin-left: 3px;
-		width: 548px;
+	.ForgotPasswordForm {
+		width: 456px;
 	}
 	input#ForgotPasswordMessage {
 		// Foundation Overrides
@@ -60,15 +54,6 @@
 	#send-button {
 		width: 150px;
 	}
-	@media only screen and (max-width: 800px) {
-		#ForgotPasswordMessage {
-			width: 456px;
-			text-align: center;
-		}
-		.ForgotPasswordButtonsContainer {
-			width: 456px;
-		}
-	}
 }
 
 /* FORGOT PASSWORD SHARED */

From 80b618064b35188a09527bcb8dec0ca79090249a Mon Sep 17 00:00:00 2001
From: Ethan Gooding <ethangooding@gmail.com>
Date: Tue, 28 Apr 2020 14:04:59 -0400
Subject: [PATCH 5/6] Fix width on smallest view, don't change header size on
 resize

---
 app/shared-components/ForgotPassword/ForgotPassword.jsx  | 3 +--
 app/shared-components/ForgotPassword/ForgotPassword.scss | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/shared-components/ForgotPassword/ForgotPassword.jsx b/app/shared-components/ForgotPassword/ForgotPassword.jsx
index 5eaa5ead5..21ec7ea61 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.jsx
+++ b/app/shared-components/ForgotPassword/ForgotPassword.jsx
@@ -101,11 +101,10 @@ class ForgotPassword extends React.Component {
 		});
 		const EmailClassNames = ClassNames('', {
 			'forgot-input-email': panel,
-			ForgotPasswordMessage: hub,
+			ForgotPasswordEmail: hub,
 		});
 		const ButtonsContainerClassNames = ClassNames('row', {
 			'buttons-container': panel,
-			ForgotPasswordButtonsContainer: hub,
 		});
 		const loaderClassNames = ClassNames('loader', {
 			success: hub
diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index b61cc7da3..a2bf41983 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -37,9 +37,12 @@
 		margin: 40px auto;
 	}
 	.ForgotPasswordForm {
-		width: 456px;
+		width: 420px;
 	}
-	input#ForgotPasswordMessage {
+	#ForgotPasswordMessage {
+		font-size: 1.25rem;
+	}
+	#ForgotPasswordEmail {
 		// Foundation Overrides
 		border: 1px solid #c8c7c2;
 		border-radius: 0;

From c6cfbc92e0b46ee425fac206c1e1b73377e6cd20 Mon Sep 17 00:00:00 2001
From: Ethan Gooding <ethangooding@gmail.com>
Date: Tue, 28 Apr 2020 14:13:46 -0400
Subject: [PATCH 6/6] Update input error handling to match Create Account input
 error handling

---
 app/shared-components/ForgotPassword/ForgotPassword.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/shared-components/ForgotPassword/ForgotPassword.scss b/app/shared-components/ForgotPassword/ForgotPassword.scss
index a2bf41983..1e272e2d2 100644
--- a/app/shared-components/ForgotPassword/ForgotPassword.scss
+++ b/app/shared-components/ForgotPassword/ForgotPassword.scss
@@ -54,6 +54,10 @@
 			border-color: #4a4a4a;
 		}
 	}
+	.panel-error #ForgotPasswordEmail {
+		border-color: #e74055;
+		background-color: white;
+	}
 	#send-button {
 		width: 150px;
 	}