fix global notices

src/components/alert.style.js

@@ -18,7 +18,8 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.5
+        opacity: 0.5,
+        blur: '9px'
       }
     },
     {

src/components/global_notice_list/global_notice_list.vue

@@ -4,7 +4,7 @@
       v-for="(notice, index) in notices"
       :key="index"
       class="alert global-notice"
-      :class="{ ['global-' + notice.level]: true }"
+      :class="{ [notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -52,48 +52,8 @@
     }
   }
 
-  .global-error {
-    background-color: var(--alertPopupError, $fallback--cRed);
-    color: var(--alertPopupErrorText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupErrorText, $fallback--text);
-    }
-  }
-
-  .global-warning {
-    background-color: var(--alertPopupWarning, $fallback--cOrange);
-    color: var(--alertPopupWarningText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupWarningText, $fallback--text);
-    }
-  }
-
-  .global-success {
-    background-color: var(--alertPopupSuccess, $fallback--cGreen);
-    color: var(--alertPopupSuccessText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupSuccessText, $fallback--text);
-    }
-  }
-
-  .global-info {
-    background-color: var(--alertPopupNeutral, $fallback--fg);
-    color: var(--alertPopupNeutralText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupNeutralText, $fallback--text);
-    }
-  }
-
   .close-notice {
     padding-right: 0.2em;
-
-    .svg-inline--fa:hover {
-      opacity: 0.6;
-    }
   }
 }
 </style>

src/components/root.style.js

@@ -9,6 +9,7 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer',
+    'Alert',
     'Button' // mobile post button
   ],
   defaultRules: [

src/components/underlay.style.js

@@ -6,8 +6,7 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel',
+    'Panel'
-    'Alert'
   ],
   defaultRules: [
     {

src/services/theme_data/css_utils.js

@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer