fix: console warning for opening create/edit ad

deriv-com · Jun 12, 2024 · c1701ab · c1701ab
1 parent 0daa7a0
commit c1701ab
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 11 deletions.
diff --git a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss
@@ -4,7 +4,7 @@
     border-radius: 8px;
 
     @include mobile {
-        max-width: calc(100% - 3.2rem);
+        max-width: calc(100vw - 3.2rem);
     }
 
     &__body {

diff --git a/src/components/Wizard/Wizard.tsx b/src/components/Wizard/Wizard.tsx
@@ -94,7 +94,7 @@ const Wizard = <T extends ReactNode>({
 
     return (
         <div className={clsx('wizard', className)}>
-            {nav && isValidElement(nav) && cloneElement(nav, properties)}
+            {isValidElement(nav) && nav}
             {childrenWithProps}
         </div>
     );

diff --git a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
@@ -15,7 +15,7 @@ type TAdFormInputProps = ComponentProps<typeof Input> & {
 };
 
 const AdFormInput = ({
-    hint = <div />,
+    hint = <span />,
     isDisabled = false,
     label,
     name,

diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
@@ -106,7 +106,7 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                                 currency,
                             })
                         ) : (
-                            <div />
+                            <span />
                         )
                     }
                     isDisabled={isEdit}

diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.scss b/src/pages/my-ads/components/AdWizard/AdWizard.scss
@@ -25,10 +25,6 @@
 
     .wizard__main-step {
         padding-top: 1rem;
-        @include desktop {
-            max-height: calc(100vh - 35rem);
-            overflow-y: auto;
-        }
     }
 
     .form-progress {

diff --git a/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss b/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss
@@ -2,7 +2,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 1.2rem 0;
+    padding: 0.3rem 1.2rem;
     border-radius: 4px;
     border: 1px solid #d6dadb;
     margin-bottom: 2rem;

diff --git a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss
@@ -23,7 +23,7 @@
         }
         &__items {
             top: unset;
-            bottom: 7rem;
+            bottom: 5rem;
             max-height: 20rem;
         }
     }

diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss
@@ -0,0 +1,6 @@
+.create-edit-ad {
+    @include desktop {
+        max-height: calc(100vh - 19rem);
+        overflow-y: auto;
+    }
+}
diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
@@ -8,6 +8,7 @@ import { api } from '@/hooks';
 import { useFloatingRate, useModalManager, useQueryString } from '@/hooks/custom-hooks';
 import { Loader } from '@deriv-com/ui';
 import { AdWizard } from '../../components';
+import './CreateEditAd.scss';
 
 const getSteps = (isEdit = false) => {
     const text = isEdit ? 'Edit' : 'Set';
@@ -221,7 +222,7 @@ const CreateEditAd = () => {
     return (
         <>
             <FormProvider {...methods}>
-                <form onSubmit={handleSubmit(onSubmit)}>
+                <form className='create-edit-ad' onSubmit={handleSubmit(onSubmit)}>
                     <AdWizard
                         countryList={countryList as TCountryListItem}
                         currency={activeAccount?.currency as TCurrency}
-Original file line number
+Diff line change
@@ Expand Up @@
                                     currency,
                                 })
                             ) : (
-                                <div />
+                                <span />
                             )
                         }
                         isDisabled={isEdit}
@@ Expand Down @@