Originally submitted on Github

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated.

Specification

Quick overview

Claro Messages quick specs
This image is just a quick overview for messages specs. Please use the Figma link to full specification as the main resource for specs.

Full specification

FIGMA: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-i...
This link is anchored to the board with the full specification. As an anonymous user you can see the design, but to actually be able to pick colors and sizes please login on Figma.

Remaining tasks

  • Update patch styling to include time inputs
  • Accessibility review
  • RTL review (Right to left)

User interface changes

All messages styles will be changed, no functional differences.

Test Pages

  • /admin/appearance
  • /admin/modules
  • /admin/modules/update (click on Check Manually and wait for result)
  • /admin/reports/status (click on RUN CRON and wait for result)
CommentFileSizeAuthor
#76 messagesScreenshots--high-contrast.zip506.3 KBhuzooka
#76 messagesScreenshots.zip6.39 MBhuzooka
#74 interdiff.txt4.26 KBlauriii
#74 claro-messages-3023301-74.patch11.63 KBlauriii
#73 Screenshot 2019-09-03 at 15.20.20.png112.1 KBhuzooka
#70 interdiff.txt447 byteslauriii
#70 claro-messages-3023301-70.patch11.1 KBlauriii
#69 Screenshot 2019-09-03 at 11.15.14.png68.66 KBhuzooka
#68 interdiff.txt2.02 KBlauriii
#68 claro-messages-3023301-68.patch11.25 KBlauriii
#68 Screen Shot 2019-09-02 at 22.28.20.png53.22 KBlauriii
#68 Screen Shot 2019-09-02 at 22.33.40.png23.65 KBlauriii
#68 Screen Shot 2019-09-02 at 22.26.58.png42.12 KBlauriii
#67 claro-messages--grouped-ungrouped.png557.52 KBhuzooka
#64 interdiff-59-64.txt29.73 KBfinnsky
#64 3023301-64.patch33.39 KBfinnsky
#59 interdiff.txt12.71 KBlauriii
#59 claro-messages-3023301-59.patch9.84 KBlauriii
#59 Screen Shot 2019-08-30 at 23.45.00.png42.49 KBlauriii
#56 interdiff_50-56.txt2.94 KBkostyashupenko
#56 3023301-56.patch8.36 KBkostyashupenko
#54 Screen Shot 2019-08-29 at 22.19.52.png62.59 KBlauriii
#50 interdiff_44-50.txt10.99 KBkostyashupenko
#50 3023301-50.patch8.3 KBkostyashupenko
#44 3023301-44.patch8.07 KBfinnsky
#41 messages-link-focus.PNG3.72 KBant1
#40 cur.png78.54 KBfinnsky
#39 interdiff_36_39.txt1.91 KBfinnsky
#39 3023301-39.patch16.97 KBfinnsky
#37 dark-messages.png21.4 KBckrina
#36 interdiff_29_36.txt4.88 KBfinnsky
#36 3023301-36.patch17.61 KBfinnsky
#36 info-title-missed.png89.23 KBfinnsky
#30 desktop.png154.22 KBfinnsky
#30 mobile.png88.83 KBfinnsky
#30 interdiff-21-29.txt12.19 KBfinnsky
#30 3023301-29.patch8.43 KBfinnsky
#21 Bildschirmfoto 2019-06-27 um 12.11.14.png339.69 KBfhaeberle
#21 interdiff.3023301.14-21.txt1.82 KBfhaeberle
#21 3023301-21.claro_.Messages-style-update.patch4.71 KBfhaeberle
#14 interdiff.3023301.11-14.txt921 bytesfhaeberle
#14 3023301-14.claro_.Messages-style-update.patch5.28 KBfhaeberle
#11 3023301-11.claro_.Messages-style-update.patch4.77 KBfhaeberle
#6 claro_messages@2x.png73.66 KBsaschaeggi
message-style.png27.72 KBantonellasevero
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

antonellasevero created an issue. See original summary.

antonellasevero’s picture

Issue summary: View changes
ckrina’s picture

Version: » 8.x-1.x-dev
Status: Active » Postponed

Designs aren't finished yet.

ckrina’s picture

Component: Code » Needs design
Issue summary: View changes

saschaeggi’s picture

Issue summary: View changes
FileSize
73.66 KB

saschaeggi’s picture

saschaeggi’s picture

Component: Needs design » Code
Status: Postponed » Active

This can now be worked on! :-)

fhaeberle’s picture

Status: Active » Needs review
FileSize
4.77 KB

For now, the 3 messages ('status', 'warning', 'error') are available.
What about the "todo" info message in Figma? Is that a planned one by Drupal?

saschaeggi’s picture

@fhaeberle that's planned and not yet available in Drupal 8. But I quickly updated Figma with the inclusion of the spacings how it should be on smaller devices.

fhaeberle’s picture

Status: Needs review » Needs work
fhaeberle’s picture

Status: Needs work » Needs review
FileSize
5.28 KB
921 bytes

@saschaeggi I added your additions for small screens.

ckrina’s picture

It is great to get messages moved so fast! Thanks for everyone's work!
IMO we should take the chance to evaluate or plan the status messages implementation for Claro and/or open follow-ups if needed on core/other issues.
Edit: I've removed the @todo from Figma because the design is already agreed and it needs to be implemented too.

ckrina credited kiboman.

ckrina’s picture

saschaeggi’s picture

Status: Needs review » Needs work

@fhaeberle can you also style the Default message? Also I did a small change to vertically center align the text if there is only 1 line of text. Should be possible to implement with flex. Thanks! (and sorry)

fhaeberle’s picture

Assigned: Unassigned » fhaeberle

@saschaeggi I'll have a look.

fhaeberle’s picture

Assigned: fhaeberle » Unassigned
Status: Needs work » Needs review
FileSize
4.71 KB
1.82 KB
339.69 KB

Implemented the info style and applied vertical centering.

messages

lauriii’s picture

Component: Code » Needs design
Status: Needs review » Needs work

Thanks for starting to work on this! I didn't review the code yet because I wanted to first give some feedback on the designs for the design team. I think the current design looks greatest when there's a very long message in it. However, most messages are quite short; few lines on a mobile screen and a single line on desktop. I think the current design is too heavily optimized for the edge case of having a really long message.

Something else that I noticed when viewing this on an actual site was that the current designs have dramatically less weight on messages compared to what Seven used to have. As a result, messages are much harder to notice on the initial skim.

I'm also wondering if we could try to use some other color for the warning messages? It seems like the accessible color options of yellow just don't look that nice. Maybe there's another color that would look better and be still accessible.

huzooka’s picture

message test module added to Clarodist Tools!

philosurfer’s picture

Is there any consideration of being able to close these messages? or is this the wrong place for that?

I think and individual close ( we would need to accommodate X on the right ) and a close all.

saschaeggi’s picture

@philosurfer very good point. you're not the only one who misses this feature for sure! ;-)
yes this will be part of the new UI almost certainly. But it's not in the scope for the release of Claro.

antonellasev’s picture

Issue tags: +beta blocker
finnsky’s picture

Assigned: Unassigned » finnsky
finnsky’s picture

Assigned: finnsky » Unassigned
finnsky’s picture

Assigned: Unassigned » finnsky
finnsky’s picture

Assigned: finnsky » Unassigned
Status: Needs work » Needs review
FileSize
8.43 KB
12.19 KB
88.83 KB
154.22 KB

Updated messages styles according last final specs.

1) Removed classy/messages dependency
2) Added template for messages. Added inline svg with fill property of type color. We doing modern theme here, right? :)
3) Added small .messages-list component to manage messages margin in valid BEM way.

mobile
mobile
desktop
desktop

eleleka’s picture

Don't you think the dark design is too contrast on light theme? Also it seems less informative, I mean a small color difference between type of messages. You need to pay more attention on what type of message you've got.

lauriii’s picture

Don't you think the dark design is too contrast on light theme?

The messages are dark on purpose since they are supposed to be visible. Multiple designers have reviewed this, and no one raised major concerns about this approach.

Also it seems less informative, I mean a small color difference between type of messages. You need to pay more attention on what type of message you've got.

It's very hard to come up with colors that are both accessible and informative. This seemed like the best approach since it's accessible and highly visible. We've added a text to describe the priority for extra clarity.

I'd like to remind that we shouldn't feel too strongly about any particular design. We should feel OK to test if a design works with users, and if it doesn't, we shouldn't feel bad to change it to something else. We've been iterating designs for messages for months, and it would be great to move forward since we are planning to make a beta release next month.

fhaeberle’s picture

Assigned: Unassigned » fhaeberle

+1 for the dark design and moving forward, I'm reviewing this.

jasonbarrie’s picture

The designs for this component have minor updates (CSS). See below for the new specs

https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

finnsky’s picture

gonna apply that small change.

finnsky’s picture

FileSize
89.23 KB
17.61 KB
4.88 KB

Hi all. Updated with last design changes. Meet one problem that info message lost its title.

title missed

ckrina’s picture

Component: Needs design » Code
Issue summary: View changes
FileSize
21.4 KB

Here are the final designs for Messages. To point out the Status/info message is not ready yet. But warning, error and success are ready. Also, I don't thing we need to address the Status one on this issue.

Please take into account that designs have changed from #36: Icons are new, and the paddings/margings, colors and font sizes have been integrated with the rest of the Design System.

Claro Messages quick specs

lauriii’s picture

Status: Needs review » Needs work

Thanks @ckrina, @jasonbarrie and the whole design team for pushing the designs to the finish line!

I agree that we should leave the info message outside the scope of this patch. It's not something that is explicitly supported by core. We should open a separate issue against core to add explicit support, and after that has been resolved, we could add support in Claro.

finnsky’s picture

Status: Needs work » Needs review
FileSize
16.97 KB
1.91 KB

Removed everything related to messages--info (styles/tpl/icon)

finnsky’s picture

FileSize
78.54 KB

current result

ant1’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll
FileSize
3.72 KB

The patch doesn't apply because of the recent changes to the pagers.
Also the focus styling of links needs to be looked at.

Focus of a link in a status message
(old screenshot but I believe the issue still applies)

fhaeberle’s picture

Assigned: fhaeberle » Unassigned

@finnsky Can you check your patch provided in #39 (#36)? It seems that there are pager styles accidentally added to the patch.

finnsky’s picture

Assigned: Unassigned » finnsky

yep. sorry mates. gonna fix it.

finnsky’s picture

FileSize
8.07 KB

Rerolled. interdiff_36_39.txt is active

finnsky’s picture

Assigned: finnsky » Unassigned
Status: Needs work » Needs review
finnsky’s picture

Focus link imo is out of this issue area.

lauriii’s picture

Status: Needs review » Needs work
Issue tags: -Needs reroll
  1. +++ b/claro.info.yml
    --- a/css/src/components/messages.css
    +++ b/css/src/components/messages.css
    

    Let's rename this file to message.css to be more consistent.

  2. +++ b/css/src/components/messages.css
    @@ -1,26 +1,137 @@
    +  --messages-border-radius: 4px;
    

    According to the design system, this should be 2px.

  3. +++ b/css/src/components/messages.css
    @@ -1,26 +1,137 @@
    +@media screen and (min-width: 48rem) {
    +  .messages__header {
    +    margin-bottom: var(--space-l);
    +  }
    +}
    

    We can remove this since the margin-bottom is supposed to be --space-m.

  4. +++ b/css/src/components/messages.css
    @@ -1,26 +1,137 @@
    +.messages-list__item {
    +  margin-bottom: var(--space-m);
    +}
    +
    +.messages-list__item:last-child {
    +  margin-bottom: 0;
    +}
    +
    +@media screen and (min-width: 48rem) {
    +  .messages-list__item {
    +    margin-bottom: var(--space-l);
    +  }
     }
    

    Let's confirm the correct values from the design team.

  5. +++ b/css/src/components/messages.css
    --- /dev/null
    +++ b/images/src/message--error.svg
    
    +++ b/images/src/message--error.svg
    --- /dev/null
    +++ b/images/src/message--status.svg
    
    +++ b/images/src/message--status.svg
    --- /dev/null
    +++ b/images/src/message--warning.svg
    

    Let's update icons with the most recent versions of icons.

  6. +++ b/templates/misc/status-messages.html.twig
    @@ -0,0 +1,74 @@
    +<div data-drupal-messages class="messages-list">
    ...
    +      'messages',
    

    Let's rename these to message-list and message to be more consistent.

  7. .messages__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .messages__item + .messages__item {
      margin-top: var(--space-s);
    }
    

    We should add something like this to render multiple messages nicely.

  8. +++ b/css/src/components/messages.css
    @@ -1,26 +1,137 @@
    +  line-height: 135%;
    

    Why do we need this?

  9. +++ b/templates/misc/status-messages.html.twig
    @@ -0,0 +1,74 @@
    +{% block messages %}
    ...
    +{% endblock messages %}
    

    We could probably remove the block. I don't think there's any reason for us to have that given that Claro isn't designed to be extended.

lauriii’s picture

+++ b/css/src/components/messages.css
@@ -1,26 +1,137 @@
+  padding: var(--space-l) var(--space-l) var(--space-l) calc(var(--space-l) - var(--messages-border-width));

The padding-bottom should be 2rem according to the style guide

kostyashupenko’s picture

Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

Assigned: kostyashupenko » Unassigned
Status: Needs work » Needs review
FileSize
8.3 KB
10.99 KB

Fixed everything from #47 and #48 comments.
but:

+.message-list__item + .message-list__item {
+  margin-top: var(--space-m);
+}
+
+@media screen and (min-width: 48rem) {
+  .message-list__item + .message-list__item {
+    margin-top: var(--space-l);
+  }
+}

RE: Let's confirm the correct values from the design team. (#47, 4th point)

finnsky’s picture

@kostyashupenko svg pictures has filled with type color. you should remove fill attribute in svgs.

ckrina’s picture

Status: Needs review » Needs work

Re #41:
I'd say this might be related to some component using a white border between the component and the focus, but it doesn't makes sense using it everywhere. Specially not in dark regions.

So I'd remove the white at least on dark regions.

huzooka’s picture

I just released cd_tools 1.8.4.

This new release adds an new message test page (at /message/js) that sets messages with Javascript theme functions.

lauriii’s picture

Thank you @huzooka! It seems like the JavaScript rendered messages still need some extra work.

The margins are now also defined in the style guide:

kostyashupenko’s picture

Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

Assigned: kostyashupenko » Unassigned
Status: Needs work » Needs review
FileSize
8.36 KB
2.94 KB

- Fixed icons to `path` instead of having objects with `stroke`
- Added margins between messages

lauriii’s picture

Status: Needs review » Needs work

Thank you! Setting back to needs work because the JavaScript rendered messages still need some extra work.

lauriii’s picture

Issue tags: +Needs followup

We would have to override at least Drupal.theme.message and Drupal.theme.tableDragChangedWarning. Unfortunately, I found also multiple instances where messages class is hardcoded to UIs in PHP. 🤷‍♂️I think we should revert back to messages class (instead of message) and open a follow-up to try to remove all hardcoded instances of messages class. In this case we also don't have to override these JavaScript theme functions

lauriii’s picture

Issue summary: View changes
Status: Needs work » Needs review
FileSize
42.49 KB
9.84 KB
12.71 KB

Fixed #58. This looks decent on markup that hasn't been updated so we can fix those instances later in a follow-up where we standardize the way messages get rendered.

Here's how messages with old markup look like:

lauriii’s picture

finnsky’s picture

@lauriii still not clear for me why can't we use inline svg here?

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat left center;

i'm not sure it is good.

lauriii’s picture

@finnsky Sorry! I was supposed to explain that. I like the idea of using inline SVG, but I run into issues trying to implement that in JavaScript. I moved the icons to CSS to avoid that problem. Basically, we lack JavaScript APIs to create URLs for assets. 😕

finnsky’s picture

Assigned: Unassigned » finnsky
finnsky’s picture

Assigned: finnsky » Unassigned
FileSize
33.39 KB
29.73 KB

Hi!
As described in slack added patch using https://github.com/iest/babel-plugin-inline-svg
Works pretty nice.
Pros:
1) Same source in twig and js. not duplicated in css
2) Fill with message type color
3) All nice things which give inline svg

Cons:
1) Global variable messageIcons.

lauriii’s picture

This seems like a nice improvement but I'm concerned about the complexity this creates to our build processes. Until now, our JavaScript build process has been exactly the same with Drupal Core. This means that this might be the only change that would require us to have our custom build process once this gets added to core.

I'm also concerned that the library haven't been documented their license. We would at least have to work with the author to properly document what license does he wants to provide his library under.

Given these two reasons, I'd be willing to move forward with #59 or another solution that doesn't come with these downsides.

finnsky’s picture

This plugin is pretty simple.
It is just parse svg and inline it into js, we can do something close in /scripts/js/compile.js
This way build process will be same without extra packages.
So both downsides not looks critical.

huzooka’s picture

Status: Needs review » Needs work
FileSize
557.52 KB

Reviewed #59.

  1. +++ b/claro.libraries.yml
    @@ -222,3 +222,7 @@ views:
    +messages:
    +  js:
    +    js/messages.js: {}
    

    The built file is missing from the patch #59.

  2. +++ b/claro.theme
    @@ -852,3 +852,13 @@ function claro_preprocess_views_mini_pager(&$variables) {
    +/**
    + * Implements hook_preprocess_HOOK() for status_messages.
    + */
    +function claro_preprocess_status_messages(&$variables) {
    +  $variables['title_ids'] = [];
    +  foreach ($variables['message_list'] as $message_type => $messages) {
    +    $variables['title_ids'][$message_type] = Html::getUniqueId("message-$message_type-title");
    +  }
    +}
    
    +++ b/templates/misc/status-messages.html.twig
    @@ -0,0 +1,72 @@
    +
    +  <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
    +    {% if type == 'error' %}
    ...
    +            <h2 id="{{ title_ids[type] }}" class="messages__title">
    +              {{ status_headings[type] }}
    +            </h2>
    

    Nice catch!

  3. +++ b/css/src/components/messages.css
    @@ -1,26 +1,113 @@
    +.messages--error .messages__header {
    +  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat left center;
    +}
    +
    +.messages--status .messages__header {
    +  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat left center;
    +}
    +
    +.messages--warning .messages__header {
    +  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat left center;
    ...
    +
    

    We need some high-contrast theming for these.

    For IE11, we should remove the icons and the start margin of .messages__title and .messages__content(IE11 does not displays SVGs in high contrast mode).

    On Edge, we should use e.g. windowText color for stroke / fill

  4. +++ b/css/src/components/messages.css
    @@ -1,26 +1,113 @@
    +/* Adding 32px bottom padding only when messages with header. */
    +.messages__header + .messages__content {
    +  margin-bottom: var(--space-xs);
    +}
    

    The bottom padding of .messages already determines the bottom spacing. This increases the bottom spacing to 2.5rem (40px).

  5. +++ b/css/src/components/messages.css
    @@ -1,26 +1,113 @@
    +.messages__item + .messages__item {
    +  margin-top: var(--space-s);
    +}
    

    This is a really good question: how we want to separate the actual message items which have the same type? This Figma page suggests that we shouldn't group these items anymore.

    Anyway, since Drupal.Message allows to insert a message anywhere, this should have a margin-top as well imho.

     ungrouped messages, as suggested on the design.

lauriii’s picture

  1. #67.1 👍
  2. #67.2 ✌️
  3. #67.3 Added some high contrast specific styles. I don't think we have to change margins for the IE 11 high contrast even though the icon is missing since that's the same behavior with the scenario where the icon hasn't been defined for the message type.
    IE 11 high contrast:

    Microsoft Edge high contrast:

  4. #67.4 This has been implemented according to the design system:
  5. I think we can keep the logic the same at least for now. Changing the logic would be a bigger change that should involve some user testing. The design system doesn't define any top margin which is consistent with how messages used to work in Seven.
huzooka’s picture

Status: Needs review » Needs work
FileSize
68.66 KB

Re #68.4:

Please check the attached screenshot:

lauriii’s picture

Status: Needs work » Needs review
FileSize
11.1 KB
447 bytes

This should address #69.

huzooka’s picture

In review.

huzooka’s picture

Status: Needs review » Needs work
+++ b/css/src/components/messages.css
@@ -1,26 +1,117 @@
+.messages__title {
+  margin: 0 0 0 var(--messages__text-margin);
...
+.messages--error .messages__header {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat left center;
+}
...
+.messages--status .messages__header {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat left center;
+}
...
+.messages--warning .messages__header {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat left center;
 }

I think that these properties are for LTR.

We need to add the /* LTR */ comment for these and handle the RTL version.

huzooka’s picture

RTL screenshot attached.

lauriii’s picture

Status: Needs work » Needs review
FileSize
11.63 KB
4.26 KB

Thanks for the review! ✌️This should address #72.

huzooka’s picture

I'm checking #74.

huzooka’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
6.39 MB
506.3 KB

#74 addresses everything.

I attached the usual sc reenshots, and I will commit this in minutes.

  • huzooka committed 06d0a09 on 8.x-1.x
    Issue #3023301 by finnsky, lauriii, fhaeberle, kostyashupenko, huzooka,...
huzooka’s picture

Status: Reviewed & tested by the community » Fixed

Thank you all! 🎉

svettes’s picture

Great job on this, love the new look!

Status: Fixed » Closed (fixed)

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

MrPaulDriver’s picture

I realise this issue is closed but I must say the dark theming of messages is too much.

Colored messages as suggested in #21 are much easier on the eye and no less visible or accessible.

I feel sure that many others will voice the same opinion once the theme gains wider usage.