Fix notice style for not logged in users in learning mode

[Imran92]

Resolves #7242

Proposed Changes

• Updated styles of the notice that's shown to the user on the lesson page in learning mode when the user is not logged in.

Testing Instructions

We don't have an exact design for this notice, so we followed the other notices we have that has two buttons.

1. Create a Course with a lesson, learning mode should be enabled for the lesson
2. Try to access the lesson without logging in
3. Make sure the notice looks as expected
4. Check with all variations of course theme
5. Check with other themes
6. Check in mobile view

Desktop

Mobile

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 #7264 (f8e072c) into trunk (dc309f7) will not change coverage.
Report is 1 commits behind head on trunk.
The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##              trunk    #7264   +/-   ##
=========================================
  Coverage     50.79%   50.79%           
  Complexity    11049    11049           
=========================================
  Files           611      611           
  Lines         46703    46703           
  Branches        404      404           
=========================================
  Hits          23724    23724           
  Misses        22652    22652           
  Partials        327      327           

Files	Coverage Δ
.../course-theme/class-sensei-course-theme-lesson.php	94.81% <100.00%> (ø)

---

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 711d3f6...f8e072c. Read the comment docs.

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit f8e072c and trunk. Please review and confirm the following are correct before merging.

No changes detected in the current commit. But the comment was left so it is possible to check for the edit history.

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[merkushin]

Looks better and more consistent now, but styles are a bit different. I took the example from the issue with a quiz.
In the quiz notice the header is larger (font-size).

[Imran92]

Hi Dmitry 👋 Thanks for taking a look

Looks better and more consistent now, but styles are a bit different. I took the example from the issue with a quiz.
In the quiz notice the header is larger (font-size).

Right, actually we don't have an exact design for this specific notice. For example, we don't have a small Title, like "Awaiting Grade", rather it's a long text. So making it h2 sized makes the font look a bit too big. So I didn't change the font size intentionally, as we don't have a style to follow exactly. This is how it looks in h2 size. If you think it looks alright, we can change it. LMKWYT

[merkushin]

Looks good 👍

The base branch was changed.

[donnapep]

I'm not sure why (as I don't have any template customizations and I don't appear to have set any global styles either), but this is what I'm seeing for this PR:

And when I'm logged out and on the trunk branch to test #7263, I see the following. The button text is the same color as the background and the "Please register" text is too big (because it's an h2, more below):

Could I have missed some Course theme changes or anything like that? 🤔

It's coming from this CSS, which is changing the button text color:

At some point, we seem to have changed the "Please register..." text to an h2. I'm guessing this was for styling purposes? The problem is that this is not semantic HTML as this text is not a heading. Can we change it back to a <p> and fix any styling with CSS? Incidentally, I think it looks just fine when I switch it to a <p>:

[Imran92]

Hi @donnapep 👋 Thanks for taking a look!

I'm not sure why (as I don't have any template customizations and I don't appear to have set any global styles either), but this is what I'm seeing for this PR:

I've fixed it here 55ab34f!

Can we change it back to a

and fix any styling with CSS? Incidentally, I think it looks just fine when I switch it to a

:

Thanks for identifying the semantics issue, I've updated it here 6236726. The style looks go to me too, so I haven't changed anything else.

[donnapep]

👍🏻