Merge 50441c1 into 6689651

Author: likhith-deriv

packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx

@@ -57,6 +57,7 @@ const FilesDescription = observer(() => {
 });
 
 type TProofOfAddressForm = {
+    className?: string;
     is_resubmit: boolean;
     is_for_cfd_modal?: boolean;
     onCancel?: () => void;
@@ -73,7 +74,14 @@ type TFormInitialValues = Record<
 type TFormState = Record<'is_btn_loading' | 'is_submit_success' | 'should_allow_submit' | 'should_show_form', boolean>;
 
 const ProofOfAddressForm = observer(
-    ({ is_resubmit, is_for_cfd_modal, onSubmit, onSubmitForCFDModal, step_index }: Partial<TProofOfAddressForm>) => {
+    ({
+        is_resubmit,
+        is_for_cfd_modal,
+        onSubmit,
+        onSubmitForCFDModal,
+        step_index,
+        className,
+    }: Partial<TProofOfAddressForm>) => {
         const { client, notifications, ui } = useStore();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list } = client;
         const {
@@ -299,7 +307,11 @@ const ProofOfAddressForm = observer(
                         <LeaveConfirm onDirty={is_mobile ? showForm : undefined} />
                         {form_state.should_show_form && (
                             <form noValidate className='account-form account-form_poa' onSubmit={handleSubmit}>
-                                <ThemedScrollbars height='572px' is_bypassed={!is_for_cfd_modal || is_mobile}>
+                                <ThemedScrollbars
+                                    height='572px'
+                                    is_bypassed={!is_for_cfd_modal || is_mobile}
+                                    className={className}
+                                >
                                     <FormBody scroll_offset={setOffset(status)}>
                                         {status?.msg && (
                                             <HintBox

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -1003,9 +1003,6 @@
             background-color: var(--color-white);
         }
     }
-    .dc-autocomplete {
-        margin-bottom: 2.4rem;
-    }
     .account-management {
         &__message-icon {
             display: flex;

packages/cfd/src/Components/cfd-poa.tsx

@@ -16,7 +16,12 @@ const CFDPOA = ({ index, onSave, onSubmit }: TCFDPOA) => {
 
     return (
         <div className='cfd-proof-of-address'>
-            <ProofOfAddressForm step_index={index} is_for_cfd_modal onSubmitForCFDModal={onSubmitForCFDModal} />
+            <ProofOfAddressForm
+                step_index={index}
+                is_for_cfd_modal
+                onSubmitForCFDModal={onSubmitForCFDModal}
+                className='cfd-proof-of-address__form'
+            />
         </div>
     );
 };

packages/core/src/sass/app/_common/components/cfd-poa.scss

@@ -1,11 +1,4 @@
 .cfd-proof-of-address {
-    .dc-themed-scrollbars {
-        padding: 0.8rem 3rem;
-    }
-
-    .dc-input {
-        margin-bottom: 0.8rem;
-    }
 
     .account__scrollbars_container--grid-layout {
         @include mobile {
@@ -18,7 +11,7 @@
         background-color: var(--general-main-1) !important;
     }
 
-    .dc-autocomplete {
-        margin-bottom: 0 !important;
+    &__form{
+        padding: 1.6rem 6rem;
     }
 }