Problem/Motivation

The site messages are not properly designed. For instance, error messages should be displayed in red to clearly indicate an issue, and users should be able to easily differentiate between errors, warnings, and status messages.

Steps to reproduce

  • Install the theme and enable
  • Back to the website or home page
  • Clear cache using admin toolbar option
  • User can see the issue in the status massage
  • For more clarity, refer to the attached screenshot.
CommentFileSizeAuthor
#8 Issue-3496897.png8.63 KBsandip
#5 after_message_styled.png24.69 KBrahuly072
#2 Site-messages.png92.97 KByogesh.k
site-massages.png92.97 KByogesh.k

Issue fork flexi_style-3496897

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

yogesh.k created an issue. See original summary.

yogesh.k’s picture

yogesh.k commented
StatusFileSize
new Site-messages.png92.97 KB
rahuly072’s picture

rahuly072 commented
Assigned: Unassigned » rahuly072

rahuly072 opened merge request !10

rahuly072’s picture

rahuly072 commented
Assigned: rahuly072 » Unassigned
Status: Active » Needs review
StatusFileSize
new after_message_styled.png24.69 KB

Please check styled all three Status , Error and Warning message.

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Status: Needs review » Needs work

This seems to be a JavaScript or dependency error, not a CSS issue.

@rahuly072, this is not a CSS issue. The message design has already been implemented. You can review it here: messages.css.

https://git.drupalcode.org/project/flexi_style/-/blob/1.4.x/css/component/messages.css?ref_type=heads

Suggested Solution (1st):
Try disabling the BigPipe module and check if the issue persists.

sandip’s picture

sandip commented
Assigned: Unassigned » sandip

I am looking into it.

sandip’s picture

sandip commented
Assigned: sandip » Unassigned
Status: Needs work » Needs review
StatusFileSize
new Issue-3496897.png8.63 KB

Hi @anoopsingh92, after disabling Bigpipe module the issue is not coming. But instead of disabling Bigpipe module we can go with this solution

use Drupal\Core\Render\Element\StatusMessages;

function flexi_style_preprocess_block__system_messages_block(&$variables) {
  $variables['content'] = StatusMessages::renderMessages();
  $variables['#cache']['max-age'] = 0;
}

you can see this core issue for reference: https://www.drupal.org/project/drupal/issues/3456176#comment-15738200. Kindly share your review on the changes.

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented

Thanks @sandip-poddar for identify the issue.
You didn't make any changes in the CSS file, can you please checkout this file from the MR css/base/elements.css

sandip’s picture

sandip commented
Assigned: Unassigned » sandip

Yes @anoopsingh92, I am doing it.

sandip’s picture

sandip commented
Assigned: sandip » Unassigned

Please verify the MR.

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
sandip’s picture

sandip commented

@anoopsingh92,
Since the issue has been solved and MR has been merged, can we move this issue to fixed now?

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.