From ddec3f1ff8b85e3e8d4fd3783ec2c7a8828d4c6e Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:26:20 +0800
Subject: [PATCH] [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
---
.../ChangePassword/ChangePassword.scss | 73 +++++++++++++++++++
.../screens/ChangePassword/ChangePassword.tsx | 49 +++++++++++++
.../screens/ChangePassword/MT5Password.tsx | 24 ++++++
.../cfd/screens/ChangePassword/index.ts | 1 +
.../wallets/src/features/cfd/screens/index.ts | 1 +
5 files changed, 148 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/MT5Password.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..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: