Fix custom button colors not being applied in Learning Mode

[donnapep]

Resolves #6995.

Proposed Changes

• Remove the !important from the button color properties.
• Load custom CSS for Astra when Learning Mode is enabled to handle overrides.

Note: This PR does not attempt to handle borders and border colors, nor try to fix any mismatch between the editor and the frontend when the default colors are used.

Testing Instructions

• Activate Astra.
• Enable Learning Mode.
• Go to the lesson editor.
• Add 2 buttons - one with the default style and the other with outline style.
• View the lesson on the frontend and check that the buttons look as they did before this change.
• Set custom background and text colors for the buttons.
• View the lesson on the frontend and check that the buttons use the custom colors.
• Repeat the above with the Divi and Course themes or any other popular Sensei theme - P6rkRX-2wW-p2.

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

[github-actions]

WordPress Dependencies Report

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

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
css/3rd-party/themes/astra/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 #7080 (26ef3f4) into trunk (f979ba1) will not change coverage.
Report is 1 commits behind head on trunk.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              trunk    #7080   +/-   ##
=========================================
  Coverage     49.32%   49.32%           
  Complexity    10538    10538           
=========================================
  Files           575      575           
  Lines         44501    44501           
  Branches        402      402           
=========================================
  Hits          21950    21950           
  Misses        22224    22224           
  Partials        327      327           

---

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 3f9d1ef...26ef3f4. Read the comment docs.

[Imran92]

Works nicely 👍

I noticed one little issue with Astra theme. The default text color looks a bit different on trunk than on this branch.

Before:

After:

[donnapep]

@Imran92 This bit of CSS was supposed to take care of that - https://github.com/Automattic/sensei/pull/7080/files#diff-eb4a32549d4117caaa690a3596f74b1bec68d04e415035f117ec174d236d76a6R2. Would you mind checking if it's being applied?

[Imran92]

Working perfect now 🚀 Had to restart my already running 'npm run start', didn't pick up the webpack change otherwise