From e992d432b35eeda0fd3fe313ad26905aed3ba038 Mon Sep 17 00:00:00 2001
From: uzairr <uzairr@yahoo.com>
Date: Mon, 28 Dec 2020 20:16:07 +0500
Subject: [PATCH] re-align loader

---
 src/logistration/_style.scss                  |  8 ++++
 src/reset-password/ResetPasswordPage.jsx      |  2 +-
 src/reset-password/Spinner.jsx                | 40 ++++--------------
 .../ResetPasswordPage.test.jsx.snap           | 42 ++-----------------
 4 files changed, 20 insertions(+), 72 deletions(-)

diff --git a/src/logistration/_style.scss b/src/logistration/_style.scss
index 5ae1fb67..cf8c28da 100644
--- a/src/logistration/_style.scss
+++ b/src/logistration/_style.scss
@@ -222,3 +222,11 @@ $apple-focus-black: $apple-black;
 .invalid-feedback {
   color: $red;
 }
+
+.no-inset{
+    inset: 0;
+}
+
+.full-vertical-height{
+    height: 100vh;
+}
diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx
index 7c71ae87..00f69bfd 100644
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -64,7 +64,7 @@ const ResetPasswordPage = (props) => {
     const { token } = props.match.params;
     if (token) {
       props.validateToken(token);
-      return <Spinner text="Token validation in progress .. " />;
+      return <Spinner />;
     }
   } else if (props.token_status === 'invalid') {
     return (<InvalidTokenMessage />);
diff --git a/src/reset-password/Spinner.jsx b/src/reset-password/Spinner.jsx
index 1589b695..05707f46 100644
--- a/src/reset-password/Spinner.jsx
+++ b/src/reset-password/Spinner.jsx
@@ -1,38 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { Spinner as ParagonSpinner } from '@edx/paragon';
 
-const Spinner = (props) => {
-  const textMessage = props.text;
-  return (
-    <div className="d-flex justify-content-center reset-password-container">
-      <div className="d-flex flex-column" style={{ width: '400px' }}>
-        <div className="form-group">
-          <div className="d-flex flex-column align-items-start">
-            <h3 className="text-center mt-3">
-              <FormattedMessage
-                id="logistration.reset.password.request.token.validation.message"
-                defaultMessage="{textMessage}"
-                description=""
-                values={{
-                  textMessage,
-                }}
-              />
-              <FontAwesomeIcon icon={faSpinner} spin />
-            </h3>
-          </div>
-        </div>
-      </div>
+const Spinner = () => (
+  <div className="position-absolute no-inset">
+    <div className="d-flex justify-content-center align-items-center full-vertical-height">
+      <ParagonSpinner animation="border" variant="primary" />
     </div>
-  );
-};
+  </div>
+);
 
-Spinner.defaultProps = {
-  text: '',
-};
-Spinner.propTypes = {
-  text: PropTypes.string,
-};
 export default Spinner;
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index cc7980b2..00ce8887 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -488,48 +488,14 @@ Array [
 
 exports[`ResetPasswordPage show spinner component during token validation 1`] = `
 <div
-  className="d-flex justify-content-center reset-password-container"
+  className="position-absolute no-inset"
 >
   <div
-    className="d-flex flex-column"
-    style={
-      Object {
-        "width": "400px",
-      }
-    }
+    className="d-flex justify-content-center align-items-center full-vertical-height"
   >
     <div
-      className="form-group"
-    >
-      <div
-        className="d-flex flex-column align-items-start"
-      >
-        <h3
-          className="text-center mt-3"
-        >
-          <span>
-            Token validation in progress .. 
-          </span>
-          <svg
-            aria-hidden="true"
-            className="svg-inline--fa fa-spinner fa-w-16 fa-spin "
-            data-icon="spinner"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            style={Object {}}
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
-              fill="currentColor"
-              style={Object {}}
-            />
-          </svg>
-        </h3>
-      </div>
-    </div>
+      className="spinner-border text-primary"
+    />
   </div>
 </div>
 `;