SONAR-11204 Colorblind friendly banners (#899)

3 files changed, 9 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/components/Password.tsx b/server/sonar-web/src/main/js/apps/account/components/Password.tsx
index 5834e143db4..b3cc2f831ae 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Password.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/Password.tsx
@@ -22,6 +22,7 @@ import { changePassword } from '../../../api/users';
 import { SubmitButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 import { LoggedInUser } from '../../../app/types';
+import { Alert } from '../../../components/ui/Alert';
 
 interface Props {
   user: LoggedInUser;
@@ -78,15 +79,13 @@ export default class Password extends React.Component<Props, State> {
         <h2 className="spacer-bottom">{translate('my_profile.password.title')}</h2>
 
         <form className="boxed-group-inner" onSubmit={this.handleChangePassword}>
-          {success && (
-            <div className="alert alert-success">{translate('my_profile.password.changed')}</div>
-          )}
+          {success && <Alert variant="success">{translate('my_profile.password.changed')}</Alert>}
 
           {errors &&
             errors.map((e, i) => (
-              <div className="alert alert-danger" key={i}>
+              <Alert key={i} variant="error">
                 {e}
-              </div>
+              </Alert>
             ))}
 
           <div className="modal-field">
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
index a6c2c76b631..949b0285c7e 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.tsx
@@ -28,6 +28,7 @@ import * as api from '../../../api/notifications';
 import { Notification } from '../../../app/types';
 import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
+import { Alert } from '../../../components/ui/Alert';
 
 export interface Props {
   fetchOrganizations: (organizations: string[]) => void;
@@ -147,7 +148,7 @@ export default class Notifications extends React.PureComponent<Props, State> {
     return (
       <div className="account-body account-container">
         <Helmet title={translate('my_account.notifications')} />
-        <p className="alert alert-info">{translate('notification.dispatcher.information')}</p>
+        <Alert variant="info">{translate('notification.dispatcher.information')}</Alert>
         <DeferredSpinner loading={this.state.loading}>
           {this.state.notifications && (
             <>
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.tsx.snap
index 96d1877f480..a24b8456f1d 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`should fetch notifications and render 1`] = `
     encodeSpecialCharacters={true}
     title="my_account.notifications"
   />
-  <p
-    className="alert alert-info"
+  <Alert
+    variant="info"
   >
     notification.dispatcher.information
-  </p>
+  </Alert>
   <DeferredSpinner
     loading={false}
     timeout={100}