TW-1474: Support Mises browser. -- Unnecessary scroll in overlays

madfish-solutions · Jul 7, 2024 · c5d5618 · c5d5618
1 parent c9b4dc6
commit c5d5618
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 74 deletions.
diff --git a/src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx b/src/app/layouts/PageLayout/NewsletterOverlay/NewsletterOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo, useState } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 
 import classNames from 'clsx';
 import { useForm } from 'react-hook-form';
@@ -32,7 +32,7 @@ const validationSchema = object().shape({
   email: string().required('Required field').email('Must be a valid email')
 });
 
-export const NewsletterOverlay: FC = () => {
+export const NewsletterOverlay = memo(() => {
   const dispatch = useDispatch();
   const { popup } = useAppEnv();
   const { pathname } = useLocation();
@@ -53,11 +53,6 @@ export const NewsletterOverlay: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [successSubscribing, setSuccessSubscribing] = useState(false);
 
-  const popupClassName = useMemo(
-    () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
-    [popup]
-  );
-
   const close = () => void dispatch(shouldShowNewsletterModalAction(false));
 
   const onSubmit = () => {
@@ -90,61 +85,58 @@ export const NewsletterOverlay: FC = () => {
     return null;
 
   return (
-    <>
-      <div className="fixed left-0 right-0 top-0 bottom-0 opacity-20 bg-gray-700 z-40"></div>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <ContentContainer
-          className={classNames('fixed z-40 overflow-y-scroll', popupClassName)}
-          style={{ maxWidth: '37.5rem', maxHeight: 'calc(100vh - 50px)' }}
-          padding={false}
+    <div className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-gray-700 bg-opacity-20">
+      <ContentContainer
+        className={classNames('overflow-y-scroll py-4', popup ? 'h-full px-4' : 'px-5')}
+        padding={false}
+      >
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className={classNames(
+            'relative flex flex-col justify-center text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md',
+            popup ? 'p-4' : 'px-13 py-18'
+          )}
+          style={{ height: popup ? '100%' : '700px' }}
         >
-          <div
-            className={classNames(
-              'flex flex-col justify-center text-center bg-orange-100 shadow-lg bg-no-repeat rounded-md',
-              popup ? 'p-4' : 'px-13 py-18'
-            )}
-            style={{ height: popup ? '100%' : '700px' }}
-          >
-            <OverlayCloseButton testID={NewsletterOverlaySelectors.closeButton} onClick={close} />
-
-            <img
-              src={NewsletterImage}
-              style={{ maxHeight: '375px', maxWidth: '496px' }}
-              className="mb-4"
-              alt="Newsletter"
-            />
-
-            <div className="flex flex-col w-full max-w-sm mx-auto">
-              <h1 className="mb-1 font-inter text-base text-gray-910 text-left">{t('subscribeToNewsletter')}</h1>
-
-              <span className="mb-1 text-xs text-left text-gray-600">{t('keepLatestNews')}</span>
-
-              <div className="w-full mb-4">
-                <input
-                  ref={register()}
-                  name="email"
-                  className="w-full max-h-13 p-4 rounded-md border text-sm text-gray-910"
-                  placeholder="example@mail.com"
-                  {...setTestID(NewsletterOverlaySelectors.emailInput)}
-                />
-                {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
-              </div>
-
-              <button
-                disabled={!isValid}
-                type="submit"
-                className={classNames(
-                  'w-full h-12 flex items-center justify-center font-semibold rounded-md text-base px-16 py-3 text-white',
-                  isValid ? 'bg-orange-500' : 'bg-blue-100'
-                )}
-                {...setTestID(NewsletterOverlaySelectors.subscribeButton)}
-              >
-                {buttonContent}
-              </button>
+          <OverlayCloseButton testID={NewsletterOverlaySelectors.closeButton} onClick={close} />
+
+          <img
+            src={NewsletterImage}
+            style={{ maxHeight: '375px', maxWidth: '496px' }}
+            className="mb-4"
+            alt="Newsletter"
+          />
+
+          <div className="flex flex-col w-full max-w-sm mx-auto">
+            <h1 className="mb-1 font-inter text-base text-gray-910 text-left">{t('subscribeToNewsletter')}</h1>
+
+            <span className="mb-1 text-xs text-left text-gray-600">{t('keepLatestNews')}</span>
+
+            <div className="w-full mb-4">
+              <input
+                ref={register()}
+                name="email"
+                className="w-full max-h-13 p-4 rounded-md border text-sm text-gray-910"
+                placeholder="example@mail.com"
+                {...setTestID(NewsletterOverlaySelectors.emailInput)}
+              />
+              {!isValid && <div className="mt-1 text-xs text-left text-red-700">{errors.email?.message}</div>}
             </div>
+
+            <button
+              disabled={!isValid}
+              type="submit"
+              className={classNames(
+                'w-full h-12 flex items-center justify-center font-semibold rounded-md text-base px-16 py-3 text-white',
+                isValid ? 'bg-orange-500' : 'bg-blue-100'
+              )}
+              {...setTestID(NewsletterOverlaySelectors.subscribeButton)}
+            >
+              {buttonContent}
+            </button>
           </div>
-        </ContentContainer>
-      </form>
-    </>
+        </form>
+      </ContentContainer>
+    </div>
   );
-};
+});
diff --git a/src/app/layouts/PageLayout/OnRampOverlay/OnRampOverlay.tsx b/src/app/layouts/PageLayout/OnRampOverlay/OnRampOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import classNames from 'clsx';
 import { useDispatch } from 'react-redux';
@@ -24,32 +24,26 @@ import { OnRampOverlaySelectors } from './OnRampOverlay.selectors';
 import { OnRampSmileButton } from './OnRampSmileButton/OnRampSmileButton';
 import { getWertLink } from './utils/getWertLink.util';
 
-export const OnRampOverlay: FC = () => {
+export const OnRampOverlay = memo(() => {
   const dispatch = useDispatch();
   const { publicKeyHash } = useAccount();
   const { popup } = useAppEnv();
   const isOnRampPossibility = useOnRampPossibilitySelector();
   const { onboardingCompleted } = useOnboardingProgress();
 
-  const popupClassName = useMemo(
-    () => (popup ? 'inset-0 p-4' : 'top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2'),
-    [popup]
-  );
   const close = () => void dispatch(setOnRampPossibilityAction(false));
 
   if (!isOnRampPossibility || !onboardingCompleted) return null;
 
   return (
-    <>
-      <div className="fixed left-0 right-0 top-0 bottom-0 opacity-20 bg-gray-700 z-50"></div>
+    <div className="fixed inset-0 z-40 flex flex-col items-center justify-center bg-gray-700 bg-opacity-20">
       <ContentContainer
-        className={classNames('fixed z-50 overflow-y-auto', popupClassName)}
-        style={{ maxWidth: '37.5rem', maxHeight: popup ? undefined : 'calc(100vh - 50px)' }}
+        className={classNames('overflow-y-scroll py-4', popup ? 'h-full px-4' : 'px-5')}
         padding={false}
       >
         <div
           className={classNames(
-            'flex flex-col text-center bg-white shadow-lg bg-no-repeat rounded-md p-6',
+            'relative flex flex-col text-center bg-white shadow-lg bg-no-repeat rounded-md p-6',
             popup && 'h-full'
           )}
           style={{
@@ -129,6 +123,6 @@ export const OnRampOverlay: FC = () => {
           </p>
         </div>
       </ContentContainer>
-    </>
+    </div>
   );
-};
+});