[WALL] aizad/chore: created ChangePassword Modal screen: (#11453)

* chore: created ChangePassword Modal screen:
- added styles and component

* chore: Add tab functionality to CreatePassword modal
- added tabs and switching functionality
- seperate first page into it's own component

* fix: resolve conflicts pt.1

* fix: resolve conflicts pt.2

packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss

@@ -0,0 +1,73 @@
+.wallets-change-password {
+    &__modal-wrapper {
+        width: 90.4rem;
+        height: 68.8rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        @include mobile {
+            width: auto;
+            padding: 1.6rem;
+        }
+    }
+
+    &__container {
+        margin: 0 auto;
+        padding-top: 2.4rem;
+        width: 45.2rem;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        @include mobile {
+            width: 100%;
+        }
+    }
+
+    &__tab {
+        padding-top: 2.4rem;
+        margin-bottom: 3.2rem;
+        justify-self: center;
+        width: 100%;
+        &__btn {
+            width: 50%;
+            border: none;
+            border-bottom: 2px solid var(--light-7-secondary-background, #f2f3f4);
+            background: none;
+            padding: 1rem 0;
+            cursor: pointer;
+            &--active {
+                width: 50%;
+                border: none;
+                border-bottom: 2px solid var(--brand-coral, #ff444f);
+                background: none;
+                padding: 1rem 0;
+            }
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2.4rem;
+        &__icon {
+            text-align: center;
+        }
+        &__text {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.8rem;
+        }
+        &__btn {
+            width: 45.2rem;
+            text-align: center;
+            @include mobile {
+                width: 14rem;
+            }
+        }
+    }
+}

packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { ModalStepWrapper, WalletText } from '../../../../components/Base';
+import MT5Password from './MT5Password';
+import './ChangePassword.scss';
+
+const ChangePassword = () => {
+    const tabs = [
+        {
+            content: <MT5Password />,
+            label: 'Deriv MT5 password',
+        },
+        {
+            content: <></>, // TODO: Add InvestorPassword component
+            label: 'Investor password',
+        },
+    ];
+    const [activeTab, setActiveTab] = useState(0);
+
+    const handleTabClick = (index: number) => {
+        setActiveTab(index);
+    };
+
+    return (
+        <ModalStepWrapper closeOnEscape title='Manage Deriv MT5 password'>
+            <div className='wallets-change-password__modal-wrapper'>
+                <div className='wallets-change-password__container'>
+                    <div className='wallets-change-password__tab'>
+                        {tabs.map((tab, index) => (
+                            <button
+                                className={
+                                    activeTab === index
+                                        ? 'wallets-change-password__tab__btn--active'
+                                        : 'wallets-change-password__tab__btn'
+                                }
+                                key={index}
+                                onClick={() => handleTabClick(index)}
+                            >
+                                <WalletText weight='bold'>{tab.label}</WalletText>
+                            </button>
+                        ))}
+                    </div>
+                    <div className='wallets-change-password__content'>{tabs[activeTab].content}</div>
+                </div>
+            </div>
+        </ModalStepWrapper>
+    );
+};
+
+export default ChangePassword;

packages/wallets/src/features/cfd/screens/ChangePassword/MT5Password.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { WalletButton, WalletText } from '../../../../components/Base';
+import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
+
+const MT5Password = () => (
+    <>
+        <div className='change-password__content__icon'>
+            <MT5PasswordIcon />
+        </div>
+        <div className='wallets-change-password__content__text'>
+            <WalletText align='center' weight='bold'>
+                Deriv MT5 password
+            </WalletText>
+            <WalletText align='center' size='sm'>
+                Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps.
+            </WalletText>
+        </div>
+        <div className='wallets-change-password__content__btn'>
+            <WalletButton size='lg' text='Change password' />
+        </div>
+    </>
+);
+
+export default MT5Password;

packages/wallets/src/features/cfd/screens/ChangePassword/index.ts

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

packages/wallets/src/features/cfd/screens/index.ts

@@ -1,4 +1,5 @@
 export * from './CFDSuccess';
+export * from './ChangePassword';
 export * from './CreatePassword';
 export * from './EnterPassword';
 export * from './GetMoreMT5Accounts';