Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit ef49215

Browse files
Hubert KosterHubert Koster
Hubert Koster
authored and
Hubert Koster
committed
chore: fixing merge conflict
2 parents d9d6d10 + e58347c commit ef49215

File tree

27 files changed

+615
-356
lines changed

27 files changed

+615
-356
lines changed

‎docs/client-libraries/intro.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: Introduction
3-
sidebar_label: Intorduction
3+
sidebar_label: Introduction
44
sidebar_position: 0
5+
description: Introduction to Client Libraries
56
---
67

78
## Introduction

‎docs/languages/intro.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: Introduction
3-
sidebar_label: Intorduction
3+
sidebar_label: Introduction
44
sidebar_position: 0
5+
description: Introduction to languages
56
---
67

78
Each language section contains step-by-step instructions on how to use the `Deriv Websocket Server APIs` with pure language features. So if it's the first time you're using our docs please go through each section in order to get the most out of them.

‎docs/terminology/account/Identity-verfication-add-document/index.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Identity Verification Add Document
2+
title: Identity Verification
33
hide_title: false
44
draft: false
5-
sidebar_label: Identity Verification Add Document
5+
sidebar_label: Identity Verification
66
sidebar_position: 4
77
tags:
88
- concepts
@@ -18,9 +18,9 @@ keywords:
1818
- verification
1919
- add
2020
- document
21-
description: What is the Identity Verification Add Document API call?
21+
description: What is the Identity Verification in Deriv applications?
2222
---
2323

24-
### What is the Identity Verification Add Document API call?
24+
### What is the Identity Verification in Deriv applications?
2525

2626
Adds document information such as issuing country, id and type for identity verification processes.

‎src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,34 @@ describe('HeroHeader', () => {
6464
jest.clearAllMocks();
6565
});
6666

67+
it('Should render current account ', () => {
68+
const current_account_button = screen.getByRole('button', { name: /CR111111/i });
69+
70+
expect(current_account_button).toBeInTheDocument();
71+
});
72+
6773
it('Should call do logout on logout button click', async () => {
68-
const logout_button = screen.getByRole('button', { name: /logout/i });
74+
const current_account_button = await screen.findByRole('button', { name: /CR111111/i });
75+
76+
await userEvent.click(current_account_button);
77+
78+
const logout_button = await screen.findByRole('button', { name: /log out/i });
6979

7080
await userEvent.click(logout_button);
7181

7282
expect(mockLogout).toHaveBeenCalledTimes(1);
7383
});
7484

75-
it('Should render current account ', () => {
76-
const current_account_button = screen.getByRole('button', { name: `CR111111 - USD` });
85+
it('should be able to close the dropdown by clicking on the arrow', async () => {
86+
const current_account_button = await screen.findByRole('button', { name: /CR111111/i });
7787

78-
expect(current_account_button).toBeInTheDocument();
88+
await userEvent.click(current_account_button);
89+
90+
const close_dropdown_button = await screen.findByTestId('dt_close_dropdown_arrow');
91+
92+
await userEvent.click(close_dropdown_button);
93+
94+
expect(close_dropdown_button).not.toBeVisible();
7995
});
8096

8197
it('Should render Accounts when no account is selected', () => {
@@ -109,13 +125,7 @@ describe('HeroHeader', () => {
109125

110126
const menu_items = screen.getAllByRole('menuitem');
111127

112-
expect(menu_items.length).toBe(2);
113-
114-
for (const [index, item] of menu_items.entries()) {
115-
expect(item).toHaveTextContent(
116-
`${fake_accounts[index].name} - ${fake_accounts[index].currency}`,
117-
);
118-
}
128+
expect(menu_items.length).toBe(1);
119129
});
120130

121131
it('Should update current account on menu item click', async () => {
@@ -128,16 +138,15 @@ describe('HeroHeader', () => {
128138
token: 'first_token',
129139
},
130140
is_logged_in: true,
131-
updateAccounts: mockUpdateLoginAccounts,
132-
updateCurrentAccount: mockUpdateCurrentLoginAccount,
141+
updateLoginAccounts: mockUpdateLoginAccounts,
142+
updateCurrentLoginAccount: mockUpdateCurrentLoginAccount,
133143
};
134144
});
135145

136-
const current_account_button = screen.getByRole('button', { name: /USD/i });
146+
const current_account_button = screen.getByRole('button', { name: /CR111111/i });
137147
await userEvent.click(current_account_button);
138148

139-
const first_menu_item = screen.getByRole('menuitem', { name: /eth/i });
140-
149+
const first_menu_item = screen.getByText(/CR2222222/i);
141150
await userEvent.click(first_menu_item);
142151

143152
expect(mockUpdateCurrentLoginAccount).toHaveBeenCalledTimes(1);

‎src/components/AccountSwitcher/account_switcher.module.scss

Lines changed: 138 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,154 @@
11
@use 'src/styles/utility' as *;
22

3-
/* reset */
4-
button {
5-
all: unset;
6-
}
7-
8-
.DropdownMenuContent {
9-
min-width: rem(22);
10-
background-color: var(--ifm-color-emphasis-100);
11-
border-radius: 6px;
12-
padding: rem(0.5);
13-
box-shadow: 0 rem(1) rem(3.8) rem(-1) rgba(22, 23, 24, 0.35), 0 rem(1) rem(2) rem(-1.5) rgba(22, 23, 24, 0.2);
14-
animation-duration: 400ms;
15-
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
16-
will-change: transform, opacity;
17-
}
18-
.DropdownMenuContent[data-side='top'] {
19-
animation-name: slideDownAndFade;
20-
}
21-
.DropdownMenuContent[data-side='right'] {
22-
animation-name: slideLeftAndFade;
23-
}
24-
.DropdownMenuContent[data-side='bottom'] {
25-
animation-name: slideUpAndFade;
26-
}
27-
.DropdownMenuContent[data-side='left'] {
28-
animation-name: slideRightAndFade;
29-
}
30-
31-
.DropdownMenuItem[data-highlighted],
32-
.DropdownMenuCheckboxItem[data-highlighted],
33-
.DropdownMenuRadioItem[data-highlighted],
34-
.DropdownMenuSubTrigger[data-highlighted] {
35-
background-color: var(--ifm-color-emphasis-0);
36-
color: var(--ifm-color-emphasis-900);
37-
}
38-
39-
.DropdownMenuItem {
40-
font-size: 13px;
41-
line-height: 1;
42-
border-radius: 3px;
3+
.accountSwitcher {
434
display: flex;
44-
align-items: center;
45-
height: rem(2.5);
46-
padding: 0 rem(0.5);
475
position: relative;
48-
padding-left: rem(2.5);
49-
user-select: none;
50-
outline-color: transparent;
51-
}
52-
53-
.DropdownMenuArrow {
54-
fill: var(--ifm-color-emphasis-100);
55-
}
6+
height: 100%;
7+
align-items: center;
568

57-
@keyframes slideUpAndFade {
58-
from {
59-
opacity: 0;
60-
transform: translateY(rem(0.2));
9+
@media (max-width: 768px) {
10+
font-size: rem(1.2);
11+
position: unset;
6112
}
62-
to {
63-
opacity: 1;
64-
transform: translateY(0);
65-
}
66-
}
6713

68-
@keyframes slideRightAndFade {
69-
from {
70-
opacity: 0;
71-
transform: translateX(rem(-0.2));
14+
button.demo {
15+
color: var(--demo-account);
7216
}
73-
to {
74-
opacity: 1;
75-
transform: translateX(0);
17+
18+
&.active > button {
19+
&::after {
20+
transform: rotate(-180deg);
21+
}
7622
}
77-
}
7823

79-
@keyframes slideDownAndFade {
80-
from {
81-
opacity: 0;
82-
transform: translateY(rem(-0.2));
24+
.logoutButtonContainer {
25+
display: flex;
26+
justify-content: flex-end;
27+
border-top: 2px solid var(--ifm-color-emphasis-200);
28+
padding: rem(1) rem(2.5);
29+
30+
button.logoutButton {
31+
display: flex;
32+
gap: rem(1);
33+
justify-content: center;
34+
align-items: center;
35+
width: fit-content;
36+
font-size: rem(1.4);
37+
cursor: pointer;
38+
&::after {
39+
content: '';
40+
display: inline-block;
41+
background-image: url('/img/logout.svg');
42+
background-repeat: no-repeat;
43+
background-position: center;
44+
background-size: rem(1.5);
45+
width: rem(1.5);
46+
height: rem(1.5);
47+
}
48+
}
8349
}
84-
to {
85-
opacity: 1;
86-
transform: translateY(0);
50+
51+
> button {
52+
display: flex;
53+
cursor: pointer;
54+
font-weight: bold;
55+
color: var(--text-profit-success);
56+
padding: 0 rem(0.8);
57+
gap: rem(0.8);
58+
height: 100%;
59+
align-items: center;
60+
&:hover {
61+
background-color: var(--ifm-color-emphasis-100);
62+
transition: background-color 0.2s;
63+
}
64+
65+
&::after {
66+
content: '';
67+
background-image: url('/img/arrow_down_bold.svg');
68+
background-repeat: no-repeat;
69+
background-position: center;
70+
background-size: rem(1.5);
71+
width: rem(1.5);
72+
height: rem(1.5);
73+
transform: rotate(0deg);
74+
transition: transform .2s ease-in-out;
75+
}
8776
}
88-
}
8977

90-
@keyframes slideLeftAndFade {
91-
from {
92-
opacity: 0;
93-
transform: translateX(rem(0.2));
78+
.currencyIconContainer {
79+
width: rem(2.4);
80+
height: rem(2.4);
9481
}
95-
to {
96-
opacity: 1;
97-
transform: translateX(0);
82+
83+
.accountDropdownContainer {
84+
display: flex;
85+
position: absolute;
86+
background-color: var(--colors-greyLight100);
87+
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 16px 20px rgba(0, 0, 0, 0.05);
88+
border-bottom-left-radius: 4px;
89+
border-bottom-right-radius: 4px;
90+
gap: rem(0.8);
91+
width: rem(32);
92+
right: 0;
93+
top: 100%;
94+
flex-direction: column;
95+
> div:not(:last-child) {
96+
margin: 0 rem(0.8);
97+
}
98+
> div:nth-child(2) {
99+
background-color: var(--ifm-color-emphasis-200);
100+
align-items: center;
101+
font-size: rem(1.4);
102+
transition: background-color 0.2s;
103+
border-radius: 3px;
104+
padding: rem(1);
105+
> div {
106+
line-height: rem(2);
107+
span {
108+
font-size: rem(1.4);
109+
&:nth-child(1) {
110+
font-weight: bold;
111+
}
112+
&:nth-child(2) {
113+
color: var(--ifm-color-emphasis-600);
114+
}
115+
}
116+
}
117+
img {
118+
width: rem(3.2);
119+
height: rem(3.2);
120+
}
121+
}
122+
123+
@media (max-width: 768px) {
124+
// no other way of overwriting the code from the original component
125+
// important will only be used here in the scope of this component (navbar)
126+
right: 0 !important;
127+
left: 0 !important;
128+
width: 100% !important;
129+
transform: unset !important;
130+
}
131+
132+
.dropdownHeader {
133+
display: flex;
134+
padding: rem(0.5) rem(1.5);
135+
justify-content: space-between;
136+
align-items: center;
137+
.closeDropdown {
138+
width: rem(2);
139+
height: rem(2);
140+
border-radius: 100%;
141+
padding: rem(0.5);
142+
background-image: url('/img/arrow_up.svg');
143+
background-size: rem(2);
144+
background-position: center;
145+
background-repeat: no-repeat;
146+
cursor: pointer;
147+
&:hover {
148+
background-color: var(--ifm-color-emphasis-100);
149+
transition: background-color 0.2s;
150+
}
151+
}
152+
}
98153
}
99154
}

0 commit comments

Comments
 (0)