fix: 🐛 fixes styling issues in success modal

amina-deriv · Oct 25, 2023 · 9f72cd0 · 9f72cd0
1 parent 562e818
commit 9f72cd0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 28 deletions.
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -1313,27 +1313,40 @@
     }
 }
 .dc-modal__container_cfd-success-dialog {
-    .success-change__icon-area {
-        width: 128px;
-        margin: 0 auto;
-        position: relative;
+    .success {
+        &-change__icon-area {
+            width: 128px;
+            margin: 0 auto;
+            position: relative;
 
-        &--large .bottom-right-overlay {
-            position: absolute;
-            left: 76px;
-            top: 76px;
+            &--large .bottom-right-overlay {
+                position: absolute;
+                left: 76px;
+                top: 76px;
 
-            @include mobile {
-                left: 78px;
-                top: 58px;
+                @include mobile {
+                    left: 78px;
+                    top: 58px;
+                }
+            }
+            &--xlarge .bottom-right-overlay {
+                position: absolute;
+                bottom: 0.8rem;
+                right: -2.8rem;
+                height: 5.2rem;
+                width: 5.2rem;
             }
         }
-        &--xlarge .bottom-right-overlay {
-            position: absolute;
-            bottom: 0.8rem;
-            right: -2.8rem;
-            height: 5.2rem;
-            width: 5.2rem;
+
+        &-migrated {
+            &--text-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 1.6rem;
+                @include mobile {
+                    gap: 0.8rem;
+                }
+            }
         }
     }
     .dc-modal-body {

diff --git a/packages/cfd/src/Containers/cfd-password-modal.tsx b/packages/cfd/src/Containers/cfd-password-modal.tsx
@@ -642,7 +642,7 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr
         updateAccountStatus,
     } = client;
     const { show_eu_related_content } = traders_hub;
-    const { is_mt5_migration_modal_enabled, setMT5MigrationModalEnabled } = ui;
+    const { is_mobile, is_mt5_migration_modal_enabled, setMT5MigrationModalEnabled } = ui;
 
     const {
         account_title,
@@ -942,18 +942,30 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr
                 to_account_type
             )} ${getFormattedJurisdictionCode(to_jurisdiction)}`;
         });
+        const text_size = is_mobile ? 'xxs' : 'xs';
 
         return (
-            <Localize
-                i18n_default_text="We've upgraded your MT5 account(s) by moving them to the {{eligible_account_migrate}} jurisdiction. Use your <0>{{migrated_accounts}}</0> new login ID and MT5 password to start trading."
-                values={{
-                    eligible_account_migrate: getFormattedJurisdictionCode(
-                        migrated_mt5_accounts.map(account => Object.values(account?.to_account ?? {}))?.[0]
-                    ),
-                    migrated_accounts: list.join(' and '), // [MT5 Derived Vanuatu and MT5 Financial Vanuatu]
-                }}
-                components={[<strong key={0} />]}
-            />
+            <div className='success-migrated--text-wrapper'>
+                <Text size={text_size} as='p' align='center'>
+                    <Localize
+                        i18n_default_text="We've upgraded your MT5 account(s) by moving them to the {{eligible_account_migrate}} jurisdiction."
+                        values={{
+                            eligible_account_migrate: getFormattedJurisdictionCode(
+                                migrated_mt5_accounts.map(account => Object.values(account?.to_account ?? {})?.[0])?.[0]
+                            ),
+                        }}
+                    />
+                </Text>
+                <Text size={text_size} as='p' align='center'>
+                    <Localize
+                        i18n_default_text='Use your <0>{{migrated_accounts}}</0> new login ID and MT5 password to start trading.'
+                        values={{
+                            migrated_accounts: list.join(' and '), // [MT5 Derived Vanuatu and MT5 Financial Vanuatu]
+                        }}
+                        components={[<strong key={0} />]}
+                    />
+                </Text>
+            </div>
         );
     };