fix: fix onboarding component issues

Description:
Fix onboarding component issues
VAN-1996

src/authn-component/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Spinner } from '@openedx/paragon';
+import { breakpoints, Spinner, useMediaQuery } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 import { getThirdPartyAuthContext, setCurrentOpenedForm, setOnboardingComponentContext } from './data/reducers';
@@ -46,6 +46,8 @@ export const AuthnComponent = ({
   const dispatch = useDispatch();
   const queryParams = useMemo(() => getAllPossibleQueryParams(), []);
 
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 });
+
   const [screenSize, setScreenSize] = useState('lg');
   const [hasCloseButton, setHasCloseButton] = useState(true);
 
@@ -60,6 +62,15 @@ export const AuthnComponent = ({
   const { provider: tpaProvider } = getTpaProvider(tpaHint, providers, secondaryProviders);
   const pendingState = queryParams?.tpa_hint && thirdPartyAuthApiStatus === PENDING_STATE;
 
+  useEffect(() => {
+    if (isExtraSmall) {
+      setScreenSize('fullscreen');
+    }
+    if (!isExtraSmall && currentForm !== PROGRESSIVE_PROFILING_FORM) {
+      setScreenSize('lg');
+    }
+  }, [isExtraSmall, currentForm]);
+
   useEffect(() => {
     if (currentForm === PROGRESSIVE_PROFILING_FORM) {
       setHasCloseButton(false);

src/forms/fields/index.scss

@@ -2,3 +2,4 @@
 @import "password-field";
 @import "text-field";
 @import "auto-suggested-field";
+@import "marketing-email-opt-out-field";

src/forms/fields/marketing-email-opt-out-field/index.jsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import messages from './messages';
+import './index.scss';
 
 /**
  * Marketing email opt in field component. It accepts following handler(s)
@@ -15,13 +17,20 @@ import messages from './messages';
  */
 const MarketingEmailOptInCheckbox = (props) => {
   const { formatMessage } = useIntl();
-  const { name, value, handleChange } = props;
+  const {
+    name, value, handleChange, isExtraSmall,
+  } = props;
 
   return (
     <Form.Group controlId="marketingEmailOptIn" className="mb-4">
       <Form.Checkbox
         name={name}
-        className="text-gray-800"
+        className={classNames(
+          'text-gray-800',
+          {
+            marketing_email_opt: isExtraSmall,
+          },
+        )}
         checked={!!value}
         onChange={handleChange}
       >
@@ -35,6 +44,7 @@ MarketingEmailOptInCheckbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.bool.isRequired,
   handleChange: PropTypes.func.isRequired,
+  isExtraSmall: PropTypes.bool.isRequired,
 };
 
 export default MarketingEmailOptInCheckbox;

src/forms/fields/marketing-email-opt-out-field/index.scss

@@ -0,0 +1,3 @@
+.marketing_email_opt > div > label {
+    line-height: 1.75rem !important;
+}

src/forms/registration-popup/index.jsx

@@ -5,8 +5,9 @@ import React, {
 import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Container, Form, Spinner, StatefulButton,
+  breakpoints, Container, Form, Spinner, StatefulButton, useMediaQuery,
 } from '@openedx/paragon';
+import classNames from 'classnames';
 
 import HonorCodeAndPrivacyPolicyMessage from './components/honorCodeAndTOS';
 import RegistrationFailureAlert from './components/RegistrationFailureAlert';
@@ -60,6 +61,8 @@ const RegistrationForm = () => {
   const dispatch = useDispatch();
   const [formStartTime, setFormStartTime] = useState(null);
 
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth - 1 });
+
   const [formFields, setFormFields] = useState({
     name: '', email: '', password: '', marketingEmailsOptIn: true,
   });
@@ -295,7 +298,15 @@ const RegistrationForm = () => {
             {(!autoSubmitRegForm || errorCode.type) && (!currentProvider) && (
               <>
                 <SocialAuthProviders isLoginForm={false} ref={socialAuthnButtonRef} />
-                <div className="text-center mb-4 mt-3">
+                <div
+                  className={classNames(
+                    'text-center',
+                    {
+                      'mb-4 mt-3': !isExtraSmall,
+                      'mt-3 mb-3': isExtraSmall,
+                    },
+                  )}
+                >
                   {formatMessage(messages.registrationFormHeading2)}
                 </div>
               </>
@@ -346,8 +357,17 @@ const RegistrationForm = () => {
                 name="marketingEmailsOptIn"
                 value={formFields.marketingEmailsOptIn}
                 handleChange={handleOnChange}
+                isExtraSmall={isExtraSmall}
               />
-              <div className="d-flex flex-column my-4">
+              <div
+                className={classNames(
+                  'd-flex flex-column',
+                  {
+                    'my-4': !isExtraSmall,
+                    'mt-4 mb-3': isExtraSmall,
+                  },
+                )}
+              >
                 <StatefulButton
                   id="register-user"
                   name="register-user"

src/forms/reset-password-popup/reset-password/index.jsx

@@ -159,7 +159,7 @@ const ResetPasswordPage = () => {
         className="loader-container d-flex flex-column justify-content-center align-items-center my-6 w-100 h-100 text-center"
       >
         <h1 className="loader-heading text-center mb-4">{formatMessage(messages.resetPasswordTokenValidatingHeadingText)}</h1>
-        <Spinner animation="border" variant="primary" className="spinner--position-centered" />;
+        <Spinner animation="border" variant="primary" className="spinner--position-centered" />
       </Container>
     );
   } if (status === PASSWORD_RESET_ERROR || status === PASSWORD_RESET.INVALID_TOKEN) {