diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index bb97bd64b4..19bd4bbbf7 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -18,7 +18,8 @@ export default {
{
directives: {
background: '--text',
- opacity: 0.5
+ opacity: 0.5,
+ blur: '9px'
}
},
{
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 9e9ec7aaff..71e1bf302a 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/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 }"
>
{{ $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;
- }
}
}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 97289236a4..e4d3305165 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,6 +9,7 @@ export default {
'Scrollbar',
'ScrollbarElement',
'MobileDrawer',
+ 'Alert',
'Button' // mobile post button
],
defaultRules: [
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 3ed871cca2..3e0e1bf1d0 100644
--- a/src/components/underlay.style.js
+++ b/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',
- 'Alert'
+ 'Panel'
],
defaultRules: [
{
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 321bc3e5aa..6f1fd0c2f6 100644
--- a/src/services/theme_data/css_utils.js
+++ b/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