Move general mail styles to inline for fully compatible mail client

[mrtuvn]

Description (*)

Instead add styles via head tag -> Should add via inline styles for more compatible with mail client (Yopmail, Gmail)
Previous: Some code styles may missing because email client not include external styles (styles in head tag)
After: All styles put directly as inline email styles

THe goal of this merge is make sure styles consist between all mails clients display styles should be the same

Email Client	Embedded	External	Inline
Apple Mail	yes	yes	yes
iOS Mail	yes	yes	yes
Gmail	yes	no	yes
Gmail App	yes	no	yes
Samsung Mail App	yes	yes	yes
Outlook 2000-2003	yes	yes	yes
Outlook 2007-2016	yes	yes	yes
Outlook.com/Office 365	yes	no	yes
Yahoo! Mail	yes	no	yes
AOL Mail	yes	no	yes
Yopmail	no	no	yes

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes Template Styles of email missing in some mail client  #37583

Manual testing scenarios (*)

1. ...
2. ...

Questions or comments

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @mrtuvn. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

[mrtuvn]

If you test with yopmail same content but check for 2 different client mail (pair- gmail <-> yopmail) you can see very clearly difference. This area noted in my screenshot will broken not same as expect styles build. Here is normal with styles code. But when missing styles the text will be very close together

[mrtuvn]

add template_styles at lasts for css specificity

[mrtuvn]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[mrtuvn]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.