Improve styles for sensei login page

[Imran92]

Resolves #6368

Proposed Changes

• Improved the style of the login page following the Woocommerce login
• Improved the alert message shown when there's a login error
• Fixed the issue of "My Messages" button getting rendered even for logged-out users

Testing Instructions

1. Log out
2. Go to My Courses page from frontend
3. It should look better than before and nothing should be broken
4. Try with all variations of the Course theme, Divi and Astra
5. Enable registration from Settings -> General -> Anyone can Register
6. Make sure it looks better with the Registration form too
7. Check in mobile view as well for all the above
8. Check the error alert with a wrong password

Course theme:

Divi

Astra

Mobile

Error message

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[codecov]

Codecov Report

Merging #7204 (c8a3e27) into trunk (ac5e9a4) will decrease coverage by 0.01%.
Report is 1 commits behind head on trunk.
The diff coverage is 14.28%.

@@             Coverage Diff              @@
##              trunk    #7204      +/-   ##
============================================
- Coverage     50.31%   50.31%   -0.01%     
- Complexity    10860    10862       +2     
============================================
  Files           601      601              
  Lines         45673    45675       +2     
  Branches        402      402              
============================================
  Hits          22980    22980              
- Misses        22366    22368       +2     
  Partials        327      327              

Files	Coverage Δ
...cks/class-sensei-learner-messages-button-block.php	0.00% <0.00%> (ø)
includes/class-sensei-frontend.php	17.46% <16.66%> (-0.06%)	⬇️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7a5caf4...c8a3e27. Read the comment docs.

[Imran92]

I didn't name input-text as per the convention because the same class name is used in the registration form. It's also looks like a convention to use this class in form input text fields, also used in woocommerce forms.

[renatho]

It's getting waaay better! 🎉

But I noticed a few things:

Different pages

• When I set up a new site, the default My Course page is using the "Course List" variation, and the new styles aren't being applied there.
• We also have the legacy My Courses with the [sensei_user_courses] shortcode where the new styles aren't being applied. Do we want to also improve the login there?

Maybe we could just use another class instead of the wp-block-sensei-lms-learner-courses to make it work for all the cases? If yes, I'd suggest adding a new class where we have the my-courses ID in sensei_login_form, just to not use the ID to encapsulate styles.

For discussion: Not part of this issue, but should we deprecate the Student Courses block? Or are we still using or encouraging it somehow?

Other styles

Changing the class manually to test the [sensei_user_courses] shortcode, I noticed it has a width: 90% on the inputs coming from assets/css/frontend.scss (see following screenshot), which also adds some styles to the login/registration form 🤔. Should we just tweak this? Or maybe try to remove those styles completely? I didn't investigate to see what is the reason for the 2 different files. Any idea?

Error in the wrong place in some themes

With Divi and Twenty Twenty-One, I noticed that the error is displayed in the wrong place. See following screenshots.

In Divi, I could see it after scrolling, otherwise the error is displayed behind the header

Smaller screens

In Twenty Twenty-One, Two and Three, I noticed that it doesn't have enough space, so the "Lost your password?" is breaking the line in a weird way. Maybe we could improve in a way that it breaks the line in the link space only?

[Imran92]

Hi @renatho , thanks so much for reviewing -

When I set up a new site, the default My Course page is using the "Course List" variation, and the new styles aren't being applied there.
We also have the legacy My Courses with the [sensei_user_courses] shortcode where the new styles aren't being applied. Do we want to also improve the login there?
Maybe we could just use another class instead of the wp-block-sensei-lms-learner-courses to make it work for all the cases? If yes, I'd suggest adding a new class where we have the my-courses ID in sensei_login_form, just to not use the ID to encapsulate styles.

I've just fallen back to use the previous my-courses ID selector as it is already there. It has solved issues with both the login shortcode and course list case e260a0d .

I noticed it has a width: 90% on the inputs coming from assets/css/frontend.scss

Yap right, thanks. It was some now-stale CSS. I've removed it here 22bdc7a

In Twenty Twenty-One, Two and Three, I noticed that it doesn't have enough space, so the "Lost your password?" is breaking the line in a weird way. Maybe we could improve in a way that it breaks the line in the link space only?

Actually, in all the TwentyTwenty series themes, the whole content was getting shrunk for some styles in those themes making the whole page look bad. So I've fixed it here e260a0d and now it has the same width as the woocommerce login page.

With Divi and Twenty Twenty-One, I noticed that the error is displayed in the wrong place. See following screenshots.

I did a bit of investigation and it turns out that the issue was not only with Divi and Twenty Twenty One, rather it was in all non-block themes. The notices got printed on top of the page, even above the navbar or header. It was due to how we handle the notices in the template. I've added a fix 7f7270d which makes the notices load nicely in all themes now.

Divi:

Twenty Twenty One:

Thanks!

[renatho]

Thank you for the fixes, @Imran92!

I did a bit of investigation and it turns out that the issue was not only with Divi and Twenty Twenty One, rather it was in all non-block themes. The notices got printed on top of the page, even above the navbar or header. It was due to how we handle the notices in the template. I've added a fix 7f7270d which makes the notices load nicely in all themes now.

It seems it only fixes it for this specific notice, but the others using this method continue with the issue. I found #6173. If it's not very easy to fix, maybe we could revert the commit and work on that in another PR?

---

About Twenty Twenty-One, I still noticed that we don't have spacing on the buttons. But feel free to ignore this one if it's not easy or needs a hacky solution to be fixed, since it doesn't seem to be a theme very used for Sensei currently.

[Imran92]

It seems it only fixes it for this specific notice, but the others using this method continue with the issue. I found #6173. If it's not very easy to fix, maybe we could revert the commit and work on that in another PR?

I think we need to address the other notice issues in a separate PR as this PR is login-specific and there are good chances of side effects of any global changes.

About Twenty Twenty-One, I still noticed that we don't have spacing on the buttons. But feel free to ignore this one if it's not easy or needs a hacky solution to be fixed, since it doesn't seem to be a theme very used for Sensei currently.

Right, I also don't think we probably shouldn't be too concerned about twenty twenty one theme issues. But I just added a little style here to add some space there only for twenty twenty one theme c8a3e27

[renatho]

Looks good!! =)

I think we need to address the other notice issues in a separate PR as this PR is login-specific and there are good chances of side effects of any global changes.

About this, I wonder if we should revert the commit with the fix we did specifically to this part. So when we fix it globally, it gets fixed the same way in all the places. WDYT?

[Imran92]

About this, I wonder if we should revert the commit with the fix we did specifically to this part. So when we fix it globally, it gets fixed the same way in all the places. WDYT?

That's a very good thought @renatho and I also thought about this. But the login form has its own function call to notice printing to make sure it is displayed immediately above the login form or login block

sensei/includes/class-sensei-frontend.php

Line 1033 in 7a5caf4

<?php Sensei()->notices->maybe_print_notices(); ?>

which is different from other pages in general, separated from the global way of displaying notices. There's a chance that we'll still need to keep this change even then depending on how we decide to fix that. So for now, I'm keeping the current change to make it look not broken.