GH-2032 Style Forgot Password in Hub #535
Conversation
|
Could you center the Forgot Password form vertically to match the other views? It is currently positioned at the top of the page. Also, as you resize the window horizontally, the horizontal positioning starts to get funky: And on the smallest screen, you can't see the submit button and the header copy gets cut off: The Forgot Password form should match the other forms in the Hub, which are centered and in full view no matter which window size you are using. |
| @@ -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" />} /> | |||
Eden12345
Apr 27, 2020
•
Contributor
Another option is to have a boolean prop called hub. Then, all you would need here is to write <ForgotPasswordView hub />, and for the same component in the extension panel you wouldn't have to pass any prop (which will lead to it being falsey). This will also make the logic in your ForgotPassword.jsx file a little more straightforward. (This is just a suggestion; there is a lot of disagreement online about whether or not this is a good practice, but I prefer it which is why we do it in Insights.)
Another option is to have a boolean prop called hub. Then, all you would need here is to write <ForgotPasswordView hub />, and for the same component in the extension panel you wouldn't have to pass any prop (which will lead to it being falsey). This will also make the logic in your ForgotPassword.jsx file a little more straightforward. (This is just a suggestion; there is a lot of disagreement online about whether or not this is a good practice, but I prefer it which is why we do it in Insights.)
benstrumeyer
Apr 27, 2020
•
Author
Contributor
I like this idea of boolean props. Changed to hub, however kept the panel variable for better readability
I like this idea of boolean props. Changed to hub, however kept the panel variable for better readability
| color: #930194; | ||
| width: 150px; | ||
| } | ||
| .button.ghostery-button { |
Eden12345
Apr 27, 2020
Contributor
Is there no way to use existing Sass from the Hub to take care of this and avoid duplicating markdown? For example, refactoring Sass from individual form components into helper classes in the root Sass file for the Hub, so that you can assign those classes in your ForgotPassword.jsx file when you're in the Hub view?
Is there no way to use existing Sass from the Hub to take care of this and avoid duplicating markdown? For example, refactoring Sass from individual form components into helper classes in the root Sass file for the Hub, so that you can assign those classes in your ForgotPassword.jsx file when you're in the Hub view?
benstrumeyer
Apr 28, 2020
Author
Contributor
Perfect, it looks like we do have the styling for these buttons already. I noticed button widths aren't standardized inside the hub, so we're still going to have to use width here
Perfect, it looks like we do have the styling for these buttons already. I noticed button widths aren't standardized inside the hub, so we're still going to have to use width here
Ticket: https://cliqztix.atlassian.net/browse/GH-2032