Adjust course theme spacings and alignments

[gabrielcaires]

Resolves #6834

Proposed Changes

• Move some opinionated style from the button.scss file to the file learning-mode-compat.scss
• Update course theme styles to follow the new designs

Testing Instructions

1. Go to the Branch
2. npm run start
3. Active the "Automattic/Course" theme at least version 1.2.4
4. Check if the layout matches the design files

Extra Notes

There are opportunities to refactor the file using SCSS selector, but to avoid conflicts with other cards, I avoid doing it now.

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Decisions are publicly documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari

[github-actions]

WordPress Dependencies Report

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

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
home/index.js			21.1 kB	+10 B ( +0.05% 🔼 )
blocks/quiz/index.js			32.2 kB	-28 B ( -0.09% ⬇️ )
course-theme/blocks/index.js			13.8 kB	+428 B ( +3.21% 🔼 )
css/3rd-party/themes/course/learning-mode.js	wp-polyfill		24 B	+24 B ( +100% 🔼 )

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

[codecov]

Codecov Report

Merging #6854 (0e3b352) into feature/learning-mode-improvements (c2a3c62) will not change coverage.
The diff coverage is n/a.

@@                          Coverage Diff                          @@
##             feature/learning-mode-improvements    Automattic/sensei#6854   +/-   ##
=====================================================================
  Coverage                                 47.21%   47.21%           
  Complexity                                10131    10131           
=====================================================================
  Files                                       499      499           
  Lines                                     35886    35886           
  Branches                                    283      283           
=====================================================================
  Hits                                      16945    16945           
  Misses                                    18729    18729           
  Partials                                    212      212           

---

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 06aec10...0e3b352. Read the comment docs.

[gabrielcaires]

@merkushin the following points were fixed.

• Button height on mobile. c103387
• Logo Size Fix logo size
• Fix spacing between modules
• Extra spacing between a lesson name and the sidebar 2da0d84
• Fix header size

There is an issue with the spacing on the. I am suspecting it is caused by a " display: flow-root;" that is set here. I still not have sure how it works, but I suspect that removing it will requires to rewrite part of the styles 😢 .

[Imran92]

Getting an error building the sass locally, looks like a brace issue

[gabrielcaires]

Getting an error building the sass locally, looks like a brace issue

fixed @Imran92

[Imran92]

I've checked it against all our variations of Course theme, it looks pretty good and matches pretty well. I'm attaching some screenshots. The mismatches in the content area is mostly due to difference of post content and video dimension. But the spacings are mostly uniform

Dark:

Blue:

Gold:

[merkushin]

In general it looks really good.

I found the only issue with the spacing above the lesson title (or the module name if it exists), it should be 56px (3.5rem).
Here it is 48px.

I also found an issue with buttons, but we have a separate card for buttons in progress.

[gabrielcaires]

@merkushin Fixed here 5e45aa9

I just noticed I am seeing different results from you. On your screenshot, the top was 48px, and on my side was 52 (both incorrect but different 🤔 ).

Same for the buttons.

@Imran92 could you please review it in your env to double-check it?

[Imran92]

It looks pretty good to me and matches closely with all variations in my env.

There are two issues I think we can address if possible:

The space on the left between the lesson content and the course navigation panel is a bit smaller. I think we need to make our content space narrower in the desktop version. In mobile, it's good. I'm talking about the space here

The spacing before the course title in mobile can be improved

[merkushin]

@gabrielcaires

Checked again.
Buttons and the space in the top are okay now 👍

[merkushin]

@Imran92

The spacing before the course title in mobile can be improved

I think the difference here is because of the mobile status bar in the design that we don't see in our browser, so we need to "apply" it manually.

[merkushin]

@Imran92
I updated the content width here: 0e3b352

In our design, we have 830px for all themes.

[Imran92]

I updated the content width here: https://github.com/Automattic/sensei/commit/0e3b35277cd80ac30101525a8d449fce5a87c0aa
Thanks @merkushin !

Another thing that I've noticed is #6897 is probably an issue caused by this branch. Should it also be fixed here?

[gabrielcaires]

I updated the content width here: https://github.com/Automattic/sensei/commit/0e3b35277cd80ac30101525a8d449fce5a87c0aa Thanks @merkushin !

Another thing that I've noticed is #6897 is probably an issue caused by this branch. Should it also be fixed here?

Nice catch!
I think we should merge this PR because the premium templates were not on the card scope and another PR only for fix that, because the scope of this PR is too wide.

[Imran92]

LGTM 👍 We can address the outstanding issue in another PR