From 496cfa0c1a8d02d1183619665f9b6bbe7bb08568 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 15 Nov 2023 18:17:00 +0800 Subject: [PATCH 1/4] chore: created ChangePassword Modal screen: - added styles and component --- .../ChangePassword/ChangePassword.scss | 73 +++++++++++++++++++ .../screens/ChangePassword/ChangePassword.tsx | 42 +++++++++++ .../cfd/screens/ChangePassword/index.ts | 1 + .../wallets/src/features/cfd/screens/index.ts | 1 + 4 files changed, 117 insertions(+) create mode 100644 packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss create mode 100644 packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx create mode 100644 packages/wallets/src/features/cfd/screens/ChangePassword/index.ts 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..0a709ad91832 --- /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; + } + &--btn-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: 11.7rem; + } + } + } +} 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..825e0c8b37cf --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { ModalStepWrapper, WalletButton, WalletText } from '../../../../components/Base'; +import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; +import './ChangePassword.scss'; + +const ChangePassword = () => { + return ( + +
+
+
+ + +
+
+
+ +
+
+ + Deriv MT5 password + + + Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile + apps. + +
+
+ +
+
+
+
+ + ); +}; + +export default ChangePassword; 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'; From d65976f0e2d0fd7abfe6bbdd498fd863052e7d12 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 15 Nov 2023 19:10:39 +0800 Subject: [PATCH 2/4] chore: Add tab functionality to CreatePassword modal - added tabs and switching functionality - seperate first page into it's own component --- .../ChangePassword/ChangePassword.scss | 2 +- .../screens/ChangePassword/ChangePassword.tsx | 57 +++++++++++-------- .../screens/ChangePassword/MT5Password.tsx | 26 +++++++++ 3 files changed, 59 insertions(+), 26 deletions(-) create mode 100644 packages/wallets/src/features/cfd/screens/ChangePassword/MT5Password.tsx diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss index 0a709ad91832..4057beffaac7 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss @@ -66,7 +66,7 @@ width: 45.2rem; text-align: center; @include mobile { - width: 11.7rem; + width: 14rem; } } } diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx index 825e0c8b37cf..fecce9e517c6 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx @@ -1,38 +1,45 @@ import React from 'react'; -import { ModalStepWrapper, WalletButton, WalletText } from '../../../../components/Base'; -import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; +import { ModalStepWrapper, WalletText } from '../../../../components/Base'; +import MT5Password from './MT5Password'; import './ChangePassword.scss'; const ChangePassword = () => { + const tabs = [ + { + label: 'Deriv MT5 password', + content: , + }, + { + label: 'Investor password', + content: <>, // TODO: Add InvestorPassword component + }, + ]; + const [activeTab, setActiveTab] = useState(0); + + const handleTabClick = (index: number) => { + setActiveTab(index); + }; + return (
- - -
-
-
- -
-
- - Deriv MT5 password - - - Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile - apps. - -
-
- -
+ {tabs.map((tab, index) => ( + + ))}
+
{tabs[activeTab].content}
 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..966890ebc65c --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5Password.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { WalletButton, WalletText } from '../../../../components/Base'; +import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg'; + +const MT5Password = () => { + return ( + <> +
+ +
+
+ + Deriv MT5 password + + + Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps. + +
+
+ +
+ + ); +}; + +export default MT5Password; From 5399bd9b185d8bbb098143870f103626e0536d5b Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Wed, 15 Nov 2023 20:48:16 +0800 Subject: [PATCH 3/4] fix: resolve conflicts pt.1 --- .../ChangePassword/ChangePassword.scss | 22 +++++++++---------- .../screens/ChangePassword/ChangePassword.tsx | 10 ++++----- .../screens/ChangePassword/MT5Password.tsx | 4 ++-- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss index 4057beffaac7..320ac36c9eb1 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss @@ -31,20 +31,20 @@ margin-bottom: 3.2rem; justify-self: center; width: 100%; - &--btn { + &__btn { width: 50%; border: none; border-bottom: 2px solid var(--light-7-secondary-background, #f2f3f4); background: none; padding: 1rem 0; cursor: pointer; - } - &--btn-active { - width: 50%; - border: none; - border-bottom: 2px solid var(--brand-coral, #ff444f); - background: none; - padding: 1rem 0; + &--active { + width: 50%; + border: none; + border-bottom: 2px solid var(--brand-coral, #ff444f); + background: none; + padding: 1rem 0; + } } } @@ -53,16 +53,16 @@ flex-direction: column; align-items: center; gap: 2.4rem; - &--icon { + &__icon { text-align: center; } - &--text { + &__text { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } - &--btn { + &__btn { width: 45.2rem; text-align: center; @include mobile { diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx index fecce9e517c6..50e33ee67f1b 100644 --- a/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx +++ b/packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { ModalStepWrapper, WalletText } from '../../../../components/Base'; import MT5Password from './MT5Password'; import './ChangePassword.scss'; @@ -6,12 +6,12 @@ import './ChangePassword.scss'; const ChangePassword = () => { const tabs = [ { - label: 'Deriv MT5 password', content: , + label: 'Deriv MT5 password', }, { - label: 'Investor password', content: <>, // TODO: Add InvestorPassword component + label: 'Investor password', }, ]; const [activeTab, setActiveTab] = useState(0); @@ -29,8 +29,8 @@ const ChangePassword = () => {