diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss new file mode 100644 index 000000000000..320ac36c9eb1 --- /dev/null +++ b/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; + } + } + } +} diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx new file mode 100644 index 000000000000..50e33ee67f1b --- /dev/null +++ b/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: , + label: 'Deriv MT5 password', + }, + { + content: <>, // TODO: Add InvestorPassword component + label: 'Investor password', + }, + ]; + const [activeTab, setActiveTab] = useState(0); + + const handleTabClick = (index: number) => { + setActiveTab(index); + }; + + return ( + +
+
+
+ {tabs.map((tab, index) => ( + + ))} +
+
{tabs[activeTab].content}
+
+
+
+ ); +}; + +export default ChangePassword; diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5Password.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5Password.tsx new file mode 100644 index 000000000000..f06103e60268 --- /dev/null +++ b/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 = () => ( + <> +
+ +
+
+ + Deriv MT5 password + + + Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps. + +
+
+ +
+ +); + +export default MT5Password; diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/index.ts b/packages/wallets/src/features/cfd/screens/ChangePassword/index.ts new file mode 100644 index 000000000000..ce02d00ac9b5 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/index.ts @@ -0,0 +1 @@ +export { default as ChangePassword } from './ChangePassword'; diff --git a/packages/wallets/src/features/cfd/screens/index.ts b/packages/wallets/src/features/cfd/screens/index.ts index 0a2d10c090b7..b2f4ad54eb66 100644 --- a/packages/wallets/src/features/cfd/screens/index.ts +++ b/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';