Bug 26838: Improve styling of checkin message

This patch makes some changes to the style and use of the "problem"
class in the staff interface:

- Remove the background color
- Remove the extra line height

Some changes to the template:

 - Remove the problem class from the checkin message. The checkin
   message configuration determines whether the dialog is an alert or a
   message-style dialog.
 - Add Font Awesome icons to the "problem" messages in patron details
   and serials collection. This is to help emphasize the message for
   users  who might have difficulty seeing the color difference.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Go to Administration -> Item types and configure a checkin message
   for an item type: Add a message and select "Message" as the checkin
   message type.
 - Check in an item with that item type and confirm that you see the
   checkin message. It should be displayed in a message-style dialog
   without any additional styling.
 - Change the item type configuration to use "Alert" as the checkin
   message type. Confirm that the correct style is shown in this case as
   well.

 - Locate a patron with a NULL value in borrowers.password. View the
   detail page for that patron.
 - Under the "Library use" heading, the "Password" line should contain a
   link with the text "Undefined," preceded by a red-colored Font
   Awesome  icon.

 - In Serials, locate a subscription which is expired.
 - View the details for the subscription, and then open "serial
   collection" from the sidebar menu.
 - On the serial collection page there should be a cell in the
   subscription summary table showing the message "Subscription expired"
   preceded by a red-colored Font Awesome icon.

Signed-off-by: Salman Ali <salman.ali@inLibro.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss

@@ -615,10 +615,8 @@ ol {
 }
 
 .problem {
-    background-color: #FFFFCC;
     color: #990000;
     font-weight: bold;
-    line-height: 1.7em;
 }
 
 fieldset {
@@ -1775,7 +1773,7 @@ i {
     h2,
     h3,
     h4 {
-        margin: auto;
+        margin: 5px auto;
         text-align: center;
     }
 
@@ -1798,6 +1796,13 @@ i {
         list-style-position: inside;
     }
 
+    p {
+        margin-top: 0;
+        &+p {
+            margin-top: 5px;
+        }
+    }
+
     table {
         margin: .5em auto;
 
@@ -2350,19 +2355,11 @@ td {
         &.alert {
             background: #FFFADE none;
             border-color: #E0C726;
-
-            .problem {
-                background-color: transparent;
-            }
         }
 
         &.message {
             background: #E8EDF6 none;
             border-color: #A4BEDD;
-
-            .problem {
-                background-color: transparent;
-            }
         }
     }
 

koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt

@@ -344,7 +344,7 @@
                                 [% ELSE %]
                                     <div class="dialog message">
                                 [% END %]
-                                        <p class="problem ret_checkinmsg">[% checkinmsg | html_line_break %]</p>
+                                        <p class="ret_checkinmsg">[% checkinmsg | html_line_break %]</p>
                                     </div>
                             [% END # /IF checkinmsg %]
                         [% END # /BLOCK all_checkin_messages %]

koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt

@@ -560,7 +560,7 @@
                                             [% IF ( patron.password ) %]
                                                 *******
                                             [% ELSE %]
-                                                <span class="problem"><a href="/cgi-bin/koha/members/member-password.pl?member=[% patron.borrowernumber | uri %]">Undefined</a></span>
+                                                <i class="fa fa-exclamation-circle problem" aria-hidden="true"></i> <a href="/cgi-bin/koha/members/member-password.pl?member=[% patron.borrowernumber | uri %]">Undefined</a>
                                             [% END %]
                                         </li>
 

koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-collection.tt

@@ -101,7 +101,7 @@
         <td> [% subscription.notes | html | html_line_break %]
             [% UNLESS subscription.closed %]
                 [% IF ( subscription.subscriptionexpired ) %]
-                    <br /><span class="problem"> Subscription expired</span>
+                    <p class="problem"><i class="fa fa-exclamation-circle problem" aria-hidden="true"></i> Subscription expired</p>
                 [% END %]
             [% ELSE %]
                 <br /> Subscription closed