diff --git a/frontend/web/components/InfoMessage.js b/frontend/web/components/InfoMessage.js
index be3787e917bc..c0fca5a97c74 100644
--- a/frontend/web/components/InfoMessage.js
+++ b/frontend/web/components/InfoMessage.js
@@ -22,7 +22,7 @@ export default class InfoMessage extends PureComponent {
return (
-
+
@@ -36,7 +36,7 @@ export default class InfoMessage extends PureComponent {
)}
{this.props.isClosable && (
-
+
)}
diff --git a/frontend/web/styles/new/_variables-new.scss b/frontend/web/styles/new/_variables-new.scss
index 5a39bd053ae8..6762dafdbe95 100644
--- a/frontend/web/styles/new/_variables-new.scss
+++ b/frontend/web/styles/new/_variables-new.scss
@@ -247,6 +247,7 @@ $alert-font-weight: 500;
$alert-font-size: $font-sm;
$alert-line-height: $line-height-sm;
$alert-color-dark: $white-alpha-48;
+$alert-announcement-close-btn: $text-icon-light-grey;
//Tabs
$tab-btn-line-height: 42px;
diff --git a/frontend/web/styles/project/_alert.scss b/frontend/web/styles/project/_alert.scss
index 37daba5b6ea7..25e495823b8a 100644
--- a/frontend/web/styles/project/_alert.scss
+++ b/frontend/web/styles/project/_alert.scss
@@ -66,6 +66,14 @@
flex-direction: column;
justify-content: flex-start;
}
+ .close-btn {
+ margin-top: -3px;
+ font-size: 20px;
+ color: $alert-announcement-close-btn;
+ }
+ .info-icon {
+ margin-top: 15px;
+ }
}
.dark {
@@ -83,6 +91,11 @@
color: $text-icon-light;
}
}
+ .announcement {
+ .close-btn {
+ color: $alert-color-dark;
+ }
+ }
}
.text-info {
color: $bt-brand-primary !important;