Btn-close class in Stucco theme

Using Concrete / Help
1

I’m looking for help digging into an issue after upgrading to Concrete CMS 9. The theme I’m using wasn’t updated yet (Stucco) but I have it mostly working.

A remaining issue is that the “btn-close” css class isn’t behaving the same when using Loader::element('system_errors', ...). Instead of an X button aligned to the right I now see a black box aligned to left.

I only found reference to btn-close in,
concrete\css\build\vendor\tourist\tourist.less

However, it’s unclear what has caused the change in behavior.

Any assistance would be appreciated.
Thanks,
Tom

Concrete Version
Core Version - 9.1.3
Version Installed - 9.1.3
Database Version - 20220908074900

Database Information
Version: 8.0.28-0ubuntu0.20.04.3
SQL Mode: NO_ENGINE_SUBSTITUTION

Theme Stucco (2.1.6)
2

Here’s the original button and how it looks now,
image

Here are the warnings showing up with firefox introspection,

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. [mail_submit]

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. modernizr-2.8.3-respond-1.4.2.min.js:6:12070(./packages/theme_stucco/themes/stucco/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js)

Feature Policy: Skipping unsupported feature name “clipboard-write”. web-client-content-script.js:1:126624(moz-extension://489691a8-6ea7-484b-877a-3c1fad3fe109/web-client-content-script.js)

Feature Policy: Skipping unsupported feature name “clipboard-write”. web-client-content-script.js:1:126849(moz-extension://489691a8-6ea7-484b-877a-3c1fad3fe109/web-client-content-script.js)

Feature Policy: Skipping unsupported feature name “clipboard-write”. web-client-content-script.js:1:205986(moz-extension://489691a8-6ea7-484b-877a-3c1fad3fe109/web-client-content-script.js)

I tried rebuilding the modernizr code but that did not seem to help. I’m not sure if the “zoom” message is relevant or how where to address this.

3

Just to start, you might find where in the core there are currently dismissible alerts - I can’t think of any off the top of my head. But anyway make sure the markup you’re getting returned from that Loader::element call matches that markup.

Here’s the Bootstrap 5 stuff for reference: