From cacded8474967744e0eee5e9a0197c51457247f3 Mon Sep 17 00:00:00 2001
From: Evonne <evonne@catalyst.net.nz>
Date: Tue, 8 Oct 2019 11:59:43 +1300
Subject: [PATCH] Bug 1835329 Alert message icons

Taken out spans within alert and put in icons in alert:before,
added variation for site-messages so it can be shorter and hang
with page breakpoints. Also added icons for error messages under
form inputs.

behatnotneeded

Change-Id: Ia31af160808ecc2943bb16ba68f04e8a98c0e055
---
 .../openbadgedisplayer/js/configform.js       |  5 ++-
 htdocs/blocktype/openbadgedisplayer/lib.php   |  2 +-
 .../sass/layout/card/_card-header.scss        |  9 ++---
 htdocs/theme/raw/sass/form/_alert.scss        | 30 ++++++++++++++++
 htdocs/theme/raw/sass/form/_form-group.scss   |  8 +++++
 .../theme/raw/sass/form/_site-messages.scss   | 34 ++++++++++++++++++-
 htdocs/theme/raw/templates/header.tpl         | 16 ++++-----
 htdocs/theme/raw/templates/styleguide.tpl     | 12 +++----
 8 files changed, 89 insertions(+), 27 deletions(-)

diff --git a/htdocs/blocktype/openbadgedisplayer/js/configform.js b/htdocs/blocktype/openbadgedisplayer/js/configform.js
index 91f81012ea..c6c52ecb2f 100644
--- a/htdocs/blocktype/openbadgedisplayer/js/configform.js
+++ b/htdocs/blocktype/openbadgedisplayer/js/configform.js
@@ -43,16 +43,15 @@ if ((badgegroups_hosts instanceof Array && badgegroups_hosts.length >= 1)
             count++;
             /* Fetching the badge info via ajax and render the pieform checkbox element */
             sendjsonrequest(config['wwwroot'] + '/blocktype/openbadgedisplayer/badgegroupnames.json.php', params, 'POST', function(data) {
-                var icon = jQuery('<span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>');
                 var container = jQuery('<div class="alert alert-warning" role="alert">');
                 if (!data.uid) {
                     var msg = jQuery('<span>').text(data.nobackpackmsg);
-                    container.append(icon).append(msg);
+                    container.append(msg);
                     jQuery("div#instconf_loadinginfo_container > div").append(container);
                 }
                 else if (!data.badgegroups || data.badgegroups.length === 0) {
                     var msg = jQuery('<span>').text(data.nobadgegroupsmsg);
-                    container.append(icon).append(msg);
+                    container.append(msg);
                     jQuery("div#instconf_loadinginfo_container > div").append(container);
                 }
                 else {
diff --git a/htdocs/blocktype/openbadgedisplayer/lib.php b/htdocs/blocktype/openbadgedisplayer/lib.php
index 2934340136..299cbfeab7 100644
--- a/htdocs/blocktype/openbadgedisplayer/lib.php
+++ b/htdocs/blocktype/openbadgedisplayer/lib.php
@@ -352,7 +352,7 @@ class PluginBlocktypeOpenbadgedisplayer extends SystemBlocktype {
                 'message' => array(
                     'type' => 'html',
                     'class' => '',
-                    'value' => '<div class="alert alert-warning" role="alert"><span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
+                    'value' => '<div class="alert alert-warning" role="alert">' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
                 ),
             );
             return $fields;
diff --git a/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss b/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
index da0e3e9849..5f5f6d604c 100755
--- a/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
+++ b/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
@@ -96,8 +96,7 @@
 
 .card {
     .card-header:before {
-        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
-        font-weight: 900;
+        @include fonttype(solid);
         color: rgba(255, 255, 255, 0.6);
         padding-right: 5px;
     }
@@ -212,10 +211,8 @@
     }
 }
 .card.card-regular .card-header:before {
-    font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
-    font-weight: 400;
+    @include fonttype(regular);
 }
 .card.card-brand .card-header:before {
-    font-family: "Font Awesome 5 Brands Regular", "Font Awesome 5 Free" !important;
-    font-weight: 400;
+    @include fonttype(brands);
 }
diff --git a/htdocs/theme/raw/sass/form/_alert.scss b/htdocs/theme/raw/sass/form/_alert.scss
index 617948936a..8ab216a4b3 100644
--- a/htdocs/theme/raw/sass/form/_alert.scss
+++ b/htdocs/theme/raw/sass/form/_alert.scss
@@ -46,26 +46,56 @@
     color: $gray-500;
 }
 
+.alert {
+    position: relative;
+    padding: .75rem 1.25rem .75rem 3rem;
+
+    &:before {
+      @include fonttype(solid);
+      position: absolute;
+      left: 20px;
+      top: 15px;
+      font-size: 1.33333em;
+      line-height: .75em;
+    }
+}
+
 // overrides bootstrap calculations so this is same as states
 .alert-success {
     color: scale-color($success, $lightness: -30%);
     background-color: scale-color($success, $lightness: 70%);
     border-color: scale-color($success, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-check);
+      color: scale-color($success, $lightness: -30%);
+    }
 }
 .alert-info {
     color: scale-color($info, $lightness: -30%);
     background-color: scale-color($info, $lightness: 70%);
     border-color: scale-color($info, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-info-circle);
+      color: scale-color($info, $lightness: -30%);
+    }
 }
 .alert-warning {
     color: scale-color($warning, $lightness: -40%);
     background-color: scale-color($warning, $lightness: 85%);
     border-color: scale-color($warning, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-exclamation-triangle);
+      color: scale-color($warning, $lightness: -40%);
+    }
 }
 .alert-danger {
     color: scale-color($danger, $lightness: -30%);
     background-color: scale-color($danger, $lightness: 70%);
     border-color: scale-color($danger, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-times);
+      color: scale-color($danger, $lightness: -30%);
+    }
 }
 .alert-submitted {
     background-color: $state-submitted-bg;
diff --git a/htdocs/theme/raw/sass/form/_form-group.scss b/htdocs/theme/raw/sass/form/_form-group.scss
index 70a93f81ed..47d03fe98f 100644
--- a/htdocs/theme/raw/sass/form/_form-group.scss
+++ b/htdocs/theme/raw/sass/form/_form-group.scss
@@ -505,6 +505,14 @@
         font-size: $font-size-base - 1;
         display: block;
         padding-top: 10px;
+        font-size: $font-size-sm;
+
+        &:before {
+          @include fonttype(solid);
+          content: fa-content($fa-var-times);
+          color: scale-color($danger, $lightness: -30%);
+          padding-right: 5px;
+        }
 
         @include media-breakpoint-up(lg) {
             margin-left: 265px;
diff --git a/htdocs/theme/raw/sass/form/_site-messages.scss b/htdocs/theme/raw/sass/form/_site-messages.scss
index ab88a11be7..db15905643 100755
--- a/htdocs/theme/raw/sass/form/_site-messages.scss
+++ b/htdocs/theme/raw/sass/form/_site-messages.scss
@@ -3,10 +3,42 @@
     top: 0;
     width: 100%;
     z-index: 1001;
+
     .site-message.alert {
         margin-bottom: 0;
         border-radius: 0;
-        padding: 5px 15px;
+        padding: 6px 1.25rem;
+        border: 0;
+
+        // take away default alert icon so it can be aligned with different break points
+        &:before {
+            display: none;
+        }
+        // puts the alert icons into the container with break points
+        .container:before {
+            @include fonttype(solid);
+            position: relative;
+            top: 1px;
+            font-size: 1.33333em;
+            line-height: .75em;
+            padding-right: 5px;
+        }
+        &.alert-success .container:before {
+            content: fa-content($fa-var-check);
+            color: scale-color($success, $lightness: -30%);
+        }
+        &.alert-info .container:before {
+            content: fa-content($fa-var-info-circle);
+            color: scale-color($info, $lightness: -30%);
+        }
+        &.alert-warning .container:before {
+            content: fa-content($fa-var-exclamation-triangle);
+            color: scale-color($warning, $lightness: -40%);
+        }
+        &.alert-danger .container:before {
+            content: fa-content($fa-var-times);
+            color: scale-color($danger, $lightness: -30%);
+        }
     }
     @include media-breakpoint-down(sm) {
         display: none;
diff --git a/htdocs/theme/raw/templates/header.tpl b/htdocs/theme/raw/templates/header.tpl
index e5dd54fede..8cdac3ce40 100644
--- a/htdocs/theme/raw/templates/header.tpl
+++ b/htdocs/theme/raw/templates/header.tpl
@@ -9,31 +9,31 @@
     </div>
 
     {if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
-        <div class="site-messages text-center">
+        <div class="site-messages">
     {/if}
 
         {if $USERMASQUERADING}
             <div class="site-message alert alert-warning" role="alert">
-                <span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span>
-                <span>{$masqueradedetails}</span>
-                <a href="{$becomeyoulink}">{$becomeyouagain}</a>
+                <div class="container">
+                    <span>{$masqueradedetails}</span>
+                    <a href="{$becomeyoulink}">{$becomeyouagain}</a>
+                </div>
             </div>
         {/if}
         {if !$PRODUCTIONMODE}
             <div class="site-message alert alert-info" role="alert">
-                <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
-                {str tag=notproductionsite section=error}
+                <div class="container">
+                    {str tag=notproductionsite section=error}
+                </div>
             </div>
         {/if}
         {if $SITEOUTOFSYNC}
             <div class="site-message alert alert-warning" role="alert">
-                <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
                 {str tag=siteoutofsyncfor section=error arg1=$SITEOUTOFSYNC}
             </div>
         {/if}
         {if $SITECLOSED}
             <div class="site-message alert alert-danger" role="alert">
-                <span class="icon icon-lg icon-lock left" role="presentation" aria-hidden="true"></span>
                 {if $SITECLOSED == 'logindisabled'}{str tag=siteclosedlogindisabled section=mahara arg1="`$WWWROOT`admin/upgrade.php"}{else}{str tag=siteclosed}{/if}
             </div>
         {/if}
diff --git a/htdocs/theme/raw/templates/styleguide.tpl b/htdocs/theme/raw/templates/styleguide.tpl
index ef50d90dae..d419235b58 100644
--- a/htdocs/theme/raw/templates/styleguide.tpl
+++ b/htdocs/theme/raw/templates/styleguide.tpl
@@ -939,8 +939,7 @@ section .card-quarter:nth-child(4n) .page-access .dropdown-menu {
 This is used to indicate that you should make the recommended change.
 ```
 <div class="admin-warning alert alert-warning">
-    <h3>Warning</h3>
-    <span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span> This is a warning alert.
+    This is a warning alert.
 </div>
 ```
 </section>
@@ -950,8 +949,7 @@ This is used to indicate that you should make the recommended change.
 Used to show that there is an error, which must be fixed before you can continue.
 ```
 <div class="alert alert-danger">
-    <h3>Danger</h3>
-    <span class="icon icon-lg icon-times text-danger left" role="presentation" aria-hidden="true"></span>This is a danger alert.
+    This is a danger alert.
 </div>
 ```
 </section>
@@ -961,8 +959,7 @@ Used to show that there is an error, which must be fixed before you can continue
 Used to show that an action was successful.
 ```
 <div class="alert alert-success">
-    <h3>Success</h3>
-    <span class="icon icon-lg icon-check text-success left" role="presentation" aria-hidden="true"></span> This is a success alert.
+    This is a success alert.
 </div>
 ```
 </section>
@@ -972,8 +969,7 @@ Used to show that an action was successful.
 Used to show information about Mahara. Usually, this is only shown to administrators.
 ```
 <div class="alert alert-info">
-    <h3>Info</h3>
-    <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span> This is a info alert.
+    This is a info alert.
 </div>
 ```
 </section>
-- 
GitLab