refactor: BEM convention for reset password (#906)

Description:

Need to implement BEM convention for reset password page

VAN-1423

src/recommendations/RecommendationsPage.jsx

@@ -127,7 +127,7 @@ const RecommendationsPage = (props) => {
           </div>
         )
           : (
-            <Spinner animation="border" variant="primary" className="centered-align-spinner" />
+            <Spinner animation="border" variant="primary" className="spinner--position-centered" />
           )}
       </div>
     </>

src/recommendations/tests/RecommendationsPage.test.jsx

@@ -112,7 +112,7 @@ describe('RecommendationsPageTests', () => {
     getPersonalizedRecommendations.mockImplementation(() => Promise.resolve(mockedResponse));
     await act(async () => {
       const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage {...defaultProps} />));
-      expect(recommendationsPage.find('.centered-align-spinner').exists()).toBeTruthy();
+      expect(recommendationsPage.find('.spinner--position-centered').exists()).toBeTruthy();
     });
   });
 

src/reset-password/ResetPasswordPage.jsx

@@ -148,7 +148,7 @@ const ResetPasswordPage = (props) => {
     const { token } = props.match.params;
     if (token) {
       props.validateToken(token);
-      return <Spinner animation="border" variant="primary" className="centered-align-spinner" />;
+      return <Spinner animation="border" variant="primary" className="spinner--position-centered" />;
     }
   } else if (props.status === PASSWORD_RESET_ERROR) {
     return <Redirect to={updatePathWithQueryParams(RESET_PAGE)} />;
@@ -198,7 +198,7 @@ const ResetPasswordPage = (props) => {
                   name="submit-new-password"
                   type="submit"
                   variant="brand"
-                  className="stateful-button-width"
+                  className="reset-password--button"
                   state={props.status}
                   labels={{
                     default: formatMessage(messages['reset.password']),

src/sass/_reset_password.scss

@@ -0,0 +1,3 @@
+.reset-password--button {
+    width: 12rem;
+};

src/sass/_style.scss

@@ -2,6 +2,7 @@
 @import "_base_component.scss";
 @import "_registration.scss";
 @import "_recommendations_page.scss";
+@import "_reset_password.scss";
 //
 // ----------------------------
 // #COLORS
@@ -26,7 +27,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   min-width: 6rem;
 }
 
-.centered-align-spinner {
+.spinner--position-centered {
   left: 0;
   right: 0;
   bottom: 0;
@@ -44,10 +45,6 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
   min-width: 464px !important;
 }
 
-.stateful-button-width {
-  width: 12rem;
-}
-
 .login-button-width {
   min-width: 6rem;
 }