Merge pull request #14609 from edx/alisan/site-status-PL

platform site status message bar styling clean up

lms/static/sass/_build-lms-v1.scss

@@ -70,7 +70,7 @@
 @import 'search/search';
 
 // news
-@import 'news';
+@import 'notifications';
 
 @import 'mixins';
 @import 'mixins-inherited';

lms/static/sass/_build-lms-v2.scss

@@ -18,3 +18,5 @@
 @import 'shared-v2/components';
 @import 'shared-v2/modal';
 @import 'shared-v2/help-tab';
+
+@import 'notifications';

lms/static/sass/_news.scss

@@ -1,21 +0,0 @@
-@mixin news-font {
-  font-family: inherit;
-}
-
-.notifications {
-  @include news-font;
-  font-size: 0.9em;
-  padding-left: $baseline;
-  padding-top: $baseline;
-  padding-bottom: $baseline;
-
-  .notification {
-    @include news-font;
-    margin-top: ($baseline*0.75);
-    margin-bottom: ($baseline*0.75);
-
-    a {
-      @include news-font;
-    }
-  }
-}

lms/static/sass/_notifications.scss

@@ -0,0 +1,49 @@
+@mixin news-font {
+  font-family: inherit;
+}
+
+.notifications {
+  @include news-font;
+  font-size: 0.9em;
+  padding-left: $baseline;
+  padding-top: $baseline;
+  padding-bottom: $baseline;
+
+  .notification {
+    @include news-font;
+    margin-top: ($baseline*0.75);
+    margin-bottom: ($baseline*0.75);
+
+    a {
+      @include news-font;
+    }
+  }
+}
+
+.site-status {
+  @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0));
+  padding: ($baseline / 2);
+  background-color: $site-status-color;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
+  font-size: 14px;
+
+  .icon {
+    @include margin-right($baseline / 2);
+    @include float(left);
+    color: $white !important;  // some pages have color inherit
+    font-size: 18px;
+  }
+
+  .inner-wrapper {
+    margin: auto;
+    max-width: 1180px;
+    min-width: 760px;
+  }
+
+  p {
+    margin-bottom: 0;
+    line-height: 1.3;
+    color: $white !important;  // some pages have color inherit
+  }
+}
+

lms/static/sass/base/_base.scss

@@ -195,37 +195,6 @@ mark {
   color: #333;
 }
 
-.site-status {
-  display: none;
-  padding: ($baseline/2);
-  @include linear-gradient(top, $shadow-l1, rgba(0, 0, 0, .0));
-  background-color: $site-status-color;
-  box-shadow: 0 -1px 0 rgba(0, 0, 0, .3) inset;
-  font-size: 14px;
-
-  .white-error-icon {
-    position: relative;
-    top: -4px;
-    float: left;
-    display: block;
-    width: 27px;
-    height: 24px;
-    margin-right: ($baseline*0.75);
-    background: url('#{$static-path}/images/large-white-error-icon.png') no-repeat;
-  }
-
-  .inner-wrapper {
-    margin: auto;
-    max-width: 1180px;
-    min-width: 760px;
-  }
-
-  p {
-    line-height: 1.3;
-    color: $white;
-  }
-}
-
 .ie-banner {
   display: none;
   max-width: 1140px;

lms/static/sass/discussion/_build.scss

@@ -40,3 +40,6 @@ $static-path: '../..' !default;
 @import 'views/inline';
 @import 'utilities/developer';
 @import 'utilities/shame';
+
+// Site status banner
+@import '../notifications';

lms/static/sass/shared-v2/_base.scss

@@ -22,3 +22,4 @@
 .sr {
     @extend .sr-only;
 }
+

lms/static/sass/shared-v2/_variables.scss

@@ -19,3 +19,7 @@ $light-grey-solid: rgba(200,200,200, 1);
 // Icons
 $lms-dark-icon-color: $white;
 $lms-dark-icon-background-color: palette(grayscale, black);
+
+$site-status-color: rgb(182,37,103);
+
+$shadow-l1: rgba(0,0,0,0.1) !default;

lms/templates/navigation.html

@@ -41,7 +41,7 @@ site_status_msg = get_site_status_msg(course_id)
 % if site_status_msg:
 <div class="site-status">
   <div class="inner-wrapper">
-    <span class="white-error-icon"></span>
+    <span class="icon fa fa-warning"></span>
     <p>${site_status_msg}</p>
   </div>
 </div>