fix: Announcement desing (#2721)

frontend/web/components/InfoMessage.js

@@ -22,7 +22,7 @@ export default class InfoMessage extends PureComponent {
 
     return (
       <div className={infoMessageClass}>
-        <span className='icon-alert'>
+        <span className={`icon-alert ${this.props.infoMessageClass} info-icon`}>
           <Icon name='info' />
         </span>
         <div className={titleDescClass}>
@@ -36,7 +36,7 @@ export default class InfoMessage extends PureComponent {
         )}
         {this.props.isClosable && (
           <a onClick={this.props.close} className='mt-n2 mr-n2 pl-2'>
-            <span className='icon ion-md-close' />
+            <span className={`icon ion-md-close ${this.props.infoMessageClass} close-btn`}/>
           </a>
         )}
       </div>

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;

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;