Fix #693 (NEW) - Add Sign up Btn in Header #994
Conversation
| data-ga="send-ga-funnel-pings" | ||
| data-event-category="Sign In Buttons" | ||
| data-event-label="sign-in-btn-header" | ||
| class="sign-in sign-up button" |
There was a problem hiding this comment.
Suggestion: Use the .header-link class to make the button behave like the Home/FAQ buttons. You may need to play with the padding to compensate.
| class="sign-in sign-up button" | |
| class="header-link" |
|
Demo @maxxcrawford Screen.Recording.2021-08-06.at.10.24.14.AM.mov |
| <a | ||
| data-entrypoint="relay-sign-in-header" | ||
| data-form_type="button" | ||
| data-ga="send-ga-funnel-pings" | ||
| data-event-category="Sign In Buttons" | ||
| data-event-label="sign-in-btn-header" | ||
| class="sign-in button btn-transparent" | ||
| class="mzp-c-button mzp-t-secondary mzp-t-dark home-sign-in" |
There was a problem hiding this comment.
Added Protocol button classes here
There was a problem hiding this comment.
nit: Recommend using a different class name than home-sign-in that closer matches the class naming convention.
static/scss/components/buttons.scss
Outdated
| .mzp-c-button.home-sign-in { | ||
| font-family: $font-metropolis; | ||
| font-weight: normal; | ||
| font-size: 1.1rem; |
There was a problem hiding this comment.
I overwrote some of the Protocol properties to fit the Figma design. One thing I'm not sure about is increasing the font-size to 1.1rem, because for some reason the button looks subtly smaller by default.
Screen.Recording.2021-08-06.at.10.31.46.AM.mov
There was a problem hiding this comment.
Good call out about the 1.1rem. I would actually recommend updating the .header-link size to match the font size of the default button. That keeps it cleaner. Great job switching to a Protocol button here!
| <a | ||
| data-entrypoint="relay-sign-in-header" | ||
| data-form_type="button" | ||
| data-ga="send-ga-funnel-pings" | ||
| data-event-category="Sign In Buttons" | ||
| data-event-label="sign-in-btn-header" | ||
| class="sign-in button btn-transparent" | ||
| class="mzp-c-button mzp-t-secondary mzp-t-dark home-sign-in" |
There was a problem hiding this comment.
nit: Recommend using a different class name than home-sign-in that closer matches the class naming convention.
static/scss/partials/fx-bento.scss
Outdated
| firefox-apps.home-page { | ||
| margin: 0 0 0 $spacing-lg; | ||
| } | ||
|
|
||
| firefox-apps.profile-page { | ||
| margin: 0 $spacing-lg; |
There was a problem hiding this comment.
nit: This specificity may not be necessary.
| firefox-apps.home-page { | |
| margin: 0 0 0 $spacing-lg; | |
| } | |
| firefox-apps.profile-page { | |
| margin: 0 $spacing-lg; | |
| .home-page { | |
| margin: 0 0 0 $spacing-lg; | |
| } | |
| .profile-page { | |
| margin: 0 $spacing-lg; |
Home page preview:
Desktop -
Mobile -
Profile page stays the same
Updated breakpoint to
660pxdemo:Screen.Recording.2021-08-05.at.8.48.56.AM.mov