PLT-3466 E10: Add announcement bar feature (#6509)

* E10 - Add announcement bar feature

* Updates per feedback

* Add component tests and snapshots

* Update snapshots

* Updating color picker UI (#6543)

* Add class to body tag when banner is not dismissable and clean up localstorage items when banner changes

* Fixing links (#6544)

* Updating UI for fixed error bar (#6552)

* Truncating text on fixed banner (#6561)

* Plt 3466 - Error bar link states (#6577)

* Updating error bar hover state

* Updating error bar link states

webapp/sass/base/_structure.scss

@@ -10,6 +10,10 @@ body {
     height: 100%;
     position: relative;
     width: 100%;
+
+    &.error-bar--fixed {
+        padding-top: 22px;
+    }
 }
 
 .sticky {

webapp/sass/components/_error-bar.scss

@@ -4,16 +4,33 @@
     background-color: darken($primary-color, 5%);
     color: $white;
     padding: 5px 30px;
-    position: absolute;
+    position: fixed;
     text-align: center;
     top: 0;
     width: 100%;
     z-index: 9999;
 
+    &.error-bar--fixed {
+        overflow: hidden;
+        padding: 1px 30px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     a {
-        color: $white !important;
+        color: $white;
         text-decoration: underline;
 
+        .app__body & {
+            color: $white;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: $white;
+            }
+        }
+
         &.error-bar__close {
             color: $white;
             font-family: 'Open Sans', sans-serif;

webapp/sass/layout/_sidebar-left.scss

@@ -8,6 +8,10 @@
     width: 220px;
     z-index: 5;
 
+    .error-bar--fixed & {
+        height: calc(100% - 22px);
+    }
+
     &.sidebar--padded {
         padding-top: 44px;
     }

webapp/sass/layout/_sidebar-right.scss

@@ -10,6 +10,10 @@
     width: 400px;
     z-index: 8;
 
+    .error-bar--fixed & {
+        height: calc(100% - 22px);
+    }
+
     &.webrtc {
         z-index: 5;
     }
@@ -85,8 +89,8 @@
                 @include opacity(.55);
                 position: absolute;
                 top: -25px;
-          }
-       }
+            }
+        }
     }
 
     .help__format-text {

webapp/sass/routes/_admin-console.scss

@@ -12,6 +12,13 @@
     overflow: auto;
     padding: 0 20px;
 
+    .color-picker__popover {
+        position: absolute;
+        right: 0;
+        top: 40px;
+        z-index: 5;
+    }
+
     .dropdown-menu {
         .divider {
             @include opacity(1);