From 1f73b919b04bf21cacad1bb0bfcbbb5ef1e7a242 Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Mon, 9 Nov 2020 13:21:32 +0500
Subject: [PATCH] modify reset password message and background color

---
 src/reset-password/ResetSuccess.jsx            | 16 ++++++++--------
 .../ResetPasswordPage.test.jsx.snap            | 18 ++++++++++++------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/reset-password/ResetSuccess.jsx b/src/reset-password/ResetSuccess.jsx
index 678144ce..aba3e8b7 100644
--- a/src/reset-password/ResetSuccess.jsx
+++ b/src/reset-password/ResetSuccess.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 
 
 const ResetSuccessMessage = () => {
   const loginPasswordLink = (
-    <Hyperlink destination="/login">
+    <Alert.Link href="/login" className="font-weight-normal" style={{ color: '#0075b4' }}>
       <FormattedMessage
         id="logistration.reset.password.confirmation.support.link"
-        defaultMessage="Sign-in"
+        defaultMessage="Sign-in to your account."
         description="link text used in message: logistration.reset.password.invalid.token.description.message link 'sign-in.'"
       />
-    </Hyperlink>
+    </Alert.Link>
   );
 
   return (
@@ -19,17 +19,17 @@ const ResetSuccessMessage = () => {
       <div className="d-flex flex-column" style={{ width: '400px' }}>
         <div className="form-group">
           <div className="text-center mt-3">
-            <Alert variant="success">
-              <h4 style={{ color: 'green' }}>
+            <Alert variant="success mt-n2">
+              <Alert.Heading style={{ color: 'green' }}>
                 <FormattedMessage
                   id="logistration.reset.password.request.success.header.message"
                   defaultMessage="Password Reset Complete."
                   description="header message when reset is successful."
                 />
-              </h4>
+              </Alert.Heading>
               <FormattedMessage
                 id="logistration.reset.password.request.success.header.description.message"
-                defaultMessage="Your password has been reset. {loginPasswordLink} to your account."
+                defaultMessage="Your password has been reset. {loginPasswordLink}"
                 description="message when reset password is successful."
                 values={{
                   loginPasswordLink,
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index bc947d2a..cb5937d7 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -178,10 +178,11 @@ exports[`ResetPasswordPage should match successful reset message section snapsho
         className="text-center mt-3"
       >
         <div
-          className="fade alert alert-success show"
+          className="fade alert alert-success mt-n2 show"
           role="alert"
         >
-          <h4
+          <div
+            className="alert-heading h4"
             style={
               Object {
                 "color": "green",
@@ -191,19 +192,24 @@ exports[`ResetPasswordPage should match successful reset message section snapsho
             <span>
               Password Reset Complete.
             </span>
-          </h4>
+          </div>
           <span>
             Your password has been reset. 
             <a
+              className="font-weight-normal alert-link"
               href="/login"
               onClick={[Function]}
-              target="_self"
+              onKeyDown={[Function]}
+              style={
+                Object {
+                  "color": "#0075b4",
+                }
+              }
             >
               <span>
-                Sign-in
+                Sign-in to your account.
               </span>
             </a>
-             to your account.
           </span>
         </div>
       </div>