Suisin/Create connected-app article

packages/account/src/Components/article/article.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import './article.scss';
+import classNames from 'classnames';
 
 type TDescriptionsItem = {
     key: string;
@@ -12,14 +13,15 @@ export type TArticle = {
     title: string;
     descriptions: Array<TDescriptionsItem | React.ReactElement>;
     onClickLearnMore?: () => void;
+    className?: string;
 };
 
-const Article = ({ title, descriptions, onClickLearnMore }: TArticle) => {
+const Article = ({ title, descriptions, onClickLearnMore, className }: TArticle) => {
     const has_descriptions: boolean = descriptions?.length > 0;
     const has_single_description: boolean = descriptions?.length === 1;
 
     return (
-        <article className='da-article'>
+        <article className={classNames('da-article', className)}>
             <Text as='h4' color='prominent' line_height='m' size='xs' weight='bold' className='da-article__header'>
                 {title}
             </Text>

packages/account/src/Sections/Security/ConnectedApps/connected-apps-article.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { localize, Localize } from '@deriv/translations';
+import AccountArticle from 'Components/article';
+
+const openAPIManagingWebsite = () => {
+    window.open(
+        'https://community.deriv.com/t/api-tokens-managing-access-on-third-party-applications-and-mobile-apps/29159',
+        '_blank'
+    );
+};
+
+const ConnectedAppsArticle = () => (
+    <AccountArticle
+        className='connected-apps__article'
+        title={localize('Learn more about APIs')}
+        descriptions={[
+            <Localize
+                key={0}
+                i18n_default_text='Go to our Deriv community and learn about APIs, API tokens, ways to use Deriv APIs, and more.'
+            />,
+        ]}
+        onClickLearnMore={openAPIManagingWebsite}
+    />
+);
+
+export default ConnectedAppsArticle;

packages/account/src/Sections/Security/ConnectedApps/connected-apps.jsx

@@ -11,6 +11,7 @@ import {
     Loading,
     Text,
 } from '@deriv/components';
+import ConnectedAppsArticle from './connected-apps-article.jsx';
 import { PlatformContext, WS } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import ErrorComponent from 'Components/error-component';
@@ -95,27 +96,36 @@ const ConnectedApps = () => {
                 {localize('Authorised applications')}
             </Text>
             {is_error && <ErrorComponent />}
-            {is_loading ? (
-                <Loading is_fullscreen={false} />
-            ) : (
-                <>
-                    <DesktopWrapper>
-                        <DataTable
-                            className='connected-apps'
-                            data_source={connected_apps}
-                            columns={GetConnectedAppsColumnsTemplate(handleToggleModal)}
-                        />
-                    </DesktopWrapper>
-                    <MobileWrapper>
-                        <DataList
-                            className='connected-apps'
-                            data_source={connected_apps}
-                            row_gap={is_appstore ? 16 : 10}
-                            rowRenderer={mobileRowRenderer}
-                        />
-                    </MobileWrapper>
-                </>
-            )}
+            <div
+                className={classNames('connected-apps__container', 'connected-apps__wrapper', {
+                    'connected-apps__wrapper--dashboard': is_appstore,
+                })}
+            >
+                {is_loading ? (
+                    <Loading is_fullscreen={false} />
+                ) : (
+                    <React.Fragment>
+                        <DesktopWrapper>
+                            <DataTable
+                                className='connected-apps'
+                                data_source={connected_apps}
+                                columns={GetConnectedAppsColumnsTemplate(handleToggleModal)}
+                            />
+                        </DesktopWrapper>
+                        <MobileWrapper>
+                            <DataList
+                                className='connected-apps'
+                                data_source={connected_apps}
+                                row_gap={is_appstore ? 16 : 10}
+                                rowRenderer={mobileRowRenderer}
+                            />
+                        </MobileWrapper>
+                    </React.Fragment>
+                )}
+
+                {!!connected_apps.length && <ConnectedAppsArticle />}
+            </div>
+
             <Modal is_open={is_modal_open} className='connected-apps' toggleModal={handleToggleModal}>
                 <Modal.Body>
                     <div className='connected-app-modal'>

packages/account/src/Styles/account.scss

@@ -1770,7 +1770,6 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 
     &__wrapper {
-        max-width: 682px;
         max-height: 560px;
         height: 100%;
         width: 100%;
@@ -1792,6 +1791,22 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
+    &__container {
+        display: flex;
+
+        @include mobile {
+            flex-direction: column-reverse;
+        }
+    }
+
+    &__article {
+        margin-top: -4rem;
+
+        @include mobile {
+            margin-top: -0.8rem;
+        }
+    }
+
     .table__body .table__row {
         border-bottom: 1px solid var(--general-section-1);
     }