feat: added DocumentsList component

packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { DerivLightUploadPoiIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
-import { SectionMessage, Text, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { ModalStepWrapper } from '../../../../components';
-import { DocumentTile } from './components';
+import { DocumentsList } from './components';
 import './ClientVerificationModal.scss';
 
 const getDescriptionText = () => {
@@ -29,9 +29,7 @@ const ClientVerificationModal = () => {
                 <Text align='center' size={isMobile ? 'md' : 'sm'}>
                     {description}
                 </Text>
-                <DocumentTile title='Personal Details' />
-                <DocumentTile title='Personal Details' />
-                <DocumentTile title='Personal Details' />
+                <DocumentsList />
             </div>
         </ModalStepWrapper>
     );

packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.scss

@@ -0,0 +1,7 @@
+.wallets-documents-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.6rem;
+}

packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DocumentTile } from './components';
+import './DocumentsList.scss';
+
+const DocumentsList = () => {
+    return (
+        <div className='wallets-documents-list'>
+            <DocumentTile title='Proof of identity' />
+            <DocumentTile title='Proof of address' />
+            <DocumentTile title='Personal Details' />
+        </div>
+    );
+};
+
+export default DocumentsList;

packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/components/index.ts

@@ -0,0 +1 @@
+export * from './DocumentTile';

packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/index.ts

@@ -0,0 +1 @@
+export { default as DocumentsList } from './DocumentsList';

packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/index.ts

@@ -1 +1 @@
-export * from './DocumentTile';
+export * from './DocumentsList';