Moving from Custom alert to paragon alert widget.

VAN-43

src/logistration/ConfirmationAlert.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@edx/paragon';
 
-import Alert from './Alert';
 
 const ConfirmationAlert = (props) => {
   const { email } = props;
@@ -25,7 +24,7 @@ const ConfirmationAlert = (props) => {
 
   return (
     <Alert
-      className="alert-success mt-n2"
+      variant="success"
     >
       <h4 style={{ color: 'green' }}>
         <FormattedMessage

src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap

@@ -2,42 +2,40 @@
 
 exports[`ConfirmationAlert should match default confirmation message snapshot 1`] = `
 <div
-  className="alert d-flex align-items-start alert-success mt-n2"
+  className="fade alert alert-success show"
+  role="alert"
 >
-  <div />
-  <div>
-    <h4
-      style={
-        Object {
-          "color": "green",
-        }
+  <h4
+    style={
+      Object {
+        "color": "green",
       }
+    }
+  >
+    <span>
+      Check Your Email
+    </span>
+  </h4>
+  <span>
+    You entered 
+    <strong>
+      test@example.com
+    </strong>
+    . If this email address is associated with your edX account, we will send a message with password recovery instructions to this email address. 
+    <br />
+    If you do not receive a password reset message after 1 minute, verify that you entered the correct email address, or check your spam folder.
+    <br />
+     If you need further assistance, 
+    <a
+      href="https://support.edx.org/hc/en-us/articles/206212088-What-if-I-did-not-receive-a-password-reset-message-"
+      onClick={[Function]}
+      target="_self"
     >
       <span>
-        Check Your Email
+        contact technical support
       </span>
-    </h4>
-    <span>
-      You entered 
-      <strong>
-        test@example.com
-      </strong>
-      . If this email address is associated with your edX account, we will send a message with password recovery instructions to this email address. 
-      <br />
-      If you do not receive a password reset message after 1 minute, verify that you entered the correct email address, or check your spam folder.
-      <br />
-       If you need further assistance, 
-      <a
-        href="https://support.edx.org/hc/en-us/articles/206212088-What-if-I-did-not-receive-a-password-reset-message-"
-        onClick={[Function]}
-        target="_self"
-      >
-        <span>
-          contact technical support
-        </span>
-      </a>
-      .
-    </span>
-  </div>
+    </a>
+    .
+  </span>
 </div>
 `;

src/reset-password/ResetFailure.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import Alert from '../logistration/Alert';
+import { Alert } from '@edx/paragon';
 
 const ResetFailureMessage = (props) => {
   const errorMessage = props.errors;
@@ -11,7 +11,7 @@ const ResetFailureMessage = (props) => {
       <div className="d-flex flex-column" style={{ width: '400px' }}>
         <div className="form-group">
           <div className="text-center mt-3">
-            <Alert className="alert-danger mt-n2">
+            <Alert variant="danger">
               <div style={{ color: '#a0050e' }}>
                 <FormattedMessage
                   id="logistration.reset.password.request.failure.header.message"

src/reset-password/ResetSuccess.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { Alert, Hyperlink } from '@edx/paragon';
 
-import Alert from '../logistration/Alert';
 
 const ResetSuccessMessage = () => {
   const loginPasswordLink = (
@@ -20,7 +19,7 @@ const ResetSuccessMessage = () => {
       <div className="d-flex flex-column" style={{ width: '400px' }}>
         <div className="form-group">
           <div className="text-center mt-3">
-            <Alert className="alert-warning mt-n2">
+            <Alert variant="success">
               <h4 style={{ color: 'green' }}>
                 <FormattedMessage
                   id="logistration.reset.password.request.success.header.message"

src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap

@@ -178,35 +178,33 @@ exports[`ResetPasswordPage should match successful reset message section snapsho
         className="text-center mt-3"
       >
         <div
-          className="alert d-flex align-items-start alert-warning mt-n2"
+          className="fade alert alert-success show"
+          role="alert"
         >
-          <div />
-          <div>
-            <h4
-              style={
-                Object {
-                  "color": "green",
-                }
+          <h4
+            style={
+              Object {
+                "color": "green",
               }
+            }
+          >
+            <span>
+              Password Reset Complete.
+            </span>
+          </h4>
+          <span>
+            Your password has been reset. 
+            <a
+              href="/login"
+              onClick={[Function]}
+              target="_self"
             >
               <span>
-                Password Reset Complete.
+                Sign-in
               </span>
-            </h4>
-            <span>
-              Your password has been reset. 
-              <a
-                href="/login"
-                onClick={[Function]}
-                target="_self"
-              >
-                <span>
-                  Sign-in
-                </span>
-              </a>
-               to your account.
-            </span>
-          </div>
+            </a>
+             to your account.
+          </span>
         </div>
       </div>
     </div>
@@ -234,21 +232,19 @@ Array [
           className="text-center mt-3"
         >
           <div
-            className="alert d-flex align-items-start alert-danger mt-n2"
+            className="fade alert alert-danger show"
+            role="alert"
           >
-            <div />
-            <div>
-              <div
-                style={
-                  Object {
-                    "color": "#a0050e",
-                  }
+            <div
+              style={
+                Object {
+                  "color": "#a0050e",
                 }
-              >
-                <span>
-                  Password reset was unsuccessfull. 
-                </span>
-              </div>
+              }
+            >
+              <span>
+                Password reset was unsuccessfull. 
+              </span>
             </div>
           </div>
         </div>