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

Commit 1d053e3

Browse files
Hubert KosterHubert Koster
Hubert Koster
authored and
Hubert Koster
committed
chore: fixing merge conflict
2 parents f100dba + 043cdc8 commit 1d053e3

File tree

27 files changed

+866
-285
lines changed

27 files changed

+866
-285
lines changed

‎src/components/CustomSelectDropdown/custom_select_dropdown.module.scss

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

33
.customSelectField {
4+
position: relative;
5+
.dropdownWrapper {
6+
.dropdown {
7+
position: absolute;
8+
max-height: 200px;
9+
overflow-y: auto;
10+
top: 40px;
11+
left: 0;
12+
gap: rem(1);
13+
width: 100%;
14+
z-index: 10;
15+
padding: rem(1);
16+
background-color: var(--ifm-color-emphasis-0);
17+
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
18+
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
19+
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0, 0, 0, 0.15);
20+
}
21+
}
22+
.selectWrapper {
423
position: relative;
5-
.dropdownWrapper {
6-
.dropdown {
7-
position: absolute;
8-
max-height: 200px;
9-
overflow-y: auto;
10-
top: 40px;
11-
left: 0;
12-
gap: rem(1);
13-
width: 100%;
14-
z-index: 10;
15-
padding: rem(1);
16-
background-color: var(--ifm-color-emphasis-0);
17-
box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
18-
-moz-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
19-
-webkit-box-shadow: 0 rem(1) rem(1.5) rem(0.1) rgba(0,0,0,0.15);
20-
}
24+
margin: rem(1) 0;
25+
width: 100%;
26+
height: rem(4);
27+
line-height: 36px;
28+
border-radius: rem(1.6);
29+
font-size: rem(1.6);
30+
padding: 0 rem(3) 0 rem(1);
31+
color: var(--ifm-color-emphasis-1000);
32+
border: 1px solid var(--colors-greyLight400);
33+
34+
&.error {
35+
border: 1px solid var(--colors-coral500);
36+
}
37+
&:hover {
38+
border-color: var(--ifm-color-emphasis-500);
39+
}
40+
&:focus {
41+
outline: solid 1px var(--colors-blue500);
42+
border-radius: rem(1.6);
43+
.selectLabel {
44+
color: var(--colors-blue500) !important;
45+
}
46+
}
47+
&:after {
48+
content: '';
49+
position: absolute;
50+
display: inline-block;
51+
top: 0;
52+
right: 0;
53+
bottom: 0;
54+
width: 40px;
55+
background-position: center;
56+
background-repeat: no-repeat;
57+
background-image: url(/static/img/arrow_down.svg);
58+
border-radius: rem(1.6);
59+
pointer-events: none;
60+
transform: rotate(0deg);
61+
transition: transform 0.2s;
62+
}
63+
&.active {
64+
&:after {
65+
transform: rotate(180deg);
66+
}
67+
.dropdownWrapper {
68+
display: inline-block;
69+
}
70+
}
71+
&.inactive .dropdownWrapper {
72+
display: none;
2173
}
22-
.selectWrapper {
23-
position: relative;
24-
margin: rem(1) 0;
25-
width: 100%;
26-
height: rem(4);
27-
line-height: 36px;
28-
border-radius: 3px;
29-
font-size: rem(1.6);
30-
padding: 0 rem(3) 0 rem(1);
74+
.selectLabel {
75+
color: var(--colors-greyLight600);
76+
width: 100%;
77+
height: 100%;
78+
display: inline-block;
79+
&.active {
3180
color: var(--ifm-color-emphasis-1000);
32-
border: 1px solid var(--colors-greyLight400);
33-
34-
&.error {
35-
border: 1px solid var(--colors-coral500);
36-
}
37-
&:hover {
38-
border-color: var(--ifm-color-emphasis-500);
39-
}
40-
&:focus {
41-
outline: solid 1px var(--colors-blue500);
42-
border-radius: 3px;
43-
.selectLabel {
44-
color: var(--colors-blue500) !important;
45-
}
46-
}
47-
&:after {
48-
content: "";
49-
position: absolute;
50-
display: inline-block;
51-
top: 0;
52-
right: 0;
53-
bottom: 0;
54-
width: 40px;
55-
background-position: center;
56-
background-repeat: no-repeat;
57-
background-image: url(/static/img/arrow_down.svg);
58-
border-radius: 3px;
59-
pointer-events: none;
60-
transform: rotate(0deg);
61-
transition: transform .2s;
62-
}
63-
&.active {
64-
&:after {
65-
transform: rotate(180deg);
66-
}
67-
.dropdownWrapper {
68-
display: inline-block;
69-
}
70-
}
71-
&.inactive .dropdownWrapper {
72-
display: none;
73-
}
74-
.selectLabel {
75-
color: var(--colors-greyLight600);
76-
width: 100%;
77-
height: 100%;
78-
display: inline-block;
79-
&.active {
80-
color: var(--ifm-color-emphasis-1000);
81-
position: absolute;
82-
font-size: rem(1.2);
83-
background-color: var(--ifm-color-emphasis-0);
84-
bottom: rem(3.7);
85-
left: rem(1);
86-
padding: 0 rem(0.4);
87-
line-height: rem(1);
88-
height: auto;
89-
width: auto;
90-
}
91-
}
81+
position: absolute;
82+
font-size: rem(1.2);
83+
background-color: var(--ifm-color-emphasis-0);
84+
bottom: rem(3.7);
85+
left: rem(1);
86+
padding: 0 rem(0.4);
87+
line-height: rem(1);
88+
height: auto;
89+
width: auto;
90+
}
9291
}
92+
}
9393
}

‎src/features/Home/Benefits/Benefits.module.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,19 @@
1212
width: 100%;
1313
flex-wrap: nowrap;
1414
margin-bottom: rem(6.4);
15-
gap: rem(3);
15+
gap: rem(20);
1616
display: flex;
17-
justify-content: space-evenly;
17+
justify-content: center;
1818
padding: 0 rem(1);
1919

2020
@media screen and (max-width: 992px) {
2121
margin-top: rem(3);
22+
gap: rem(8.8);
2223
}
2324

2425
@media screen and (max-width: 425px) {
2526
flex-direction: column;
27+
gap: rem(3);
2628
}
2729
}
2830

@@ -39,10 +41,6 @@
3941
margin: rem(1.6) 0;
4042
}
4143

42-
img {
43-
margin-bottom: rem(4);
44-
}
45-
4644
@media screen and (max-width: 992px) {
4745
flex-wrap: wrap;
4846
width: 90%;

‎src/features/Home/Benefits/Benefits.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const Benefits = () => {
5252
<article className={styles.InformationContainer}>
5353
<ImageContainer image='personalisation' alt='personalisation' />
5454
<section className={styles.InformationContent}>
55-
<h1>Personalize your trading</h1>
55+
<h1>Personalise your trading</h1>
5656
<Text type='subtitle-2' as='p'>
5757
Personalize your trading apps to match your needs. Create charts and views the way you
5858
like them. Develop your trading app using any common programming language and extend

‎src/features/Home/Benefits/__tests__/Benefits.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('Benefits', () => {
2323
expect(execution).toBeInTheDocument();
2424
});
2525
it('should render personalize your trading information', () => {
26-
const title = screen.getByText(/Personalize your trading$/i);
26+
const title = screen.getByText(/Personalise your trading$/i);
2727
const information = screen.getByText(/create charts and views/i);
2828

2929
expect(title).toBeInTheDocument();

‎src/features/Home/GetStarted/GetStarted.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const GetStarted = () => {
2929
<Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
3030
1. Learn about our API
3131
</Text>
32-
<p>Understand basic concepts and terminologies.</p>
32+
<p>Understand basic concepts and terminologies</p>
3333
</section>
3434
<figure className={styles.arrowIcon}>
3535
<img src='img/home-arrow.svg' />
@@ -47,7 +47,7 @@ export const GetStarted = () => {
4747
<Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
4848
2. Sign up
4949
</Text>
50-
<p>Create a free Deriv account to access our API.</p>
50+
<p>Create a free Deriv account to access our API</p>
5151
</section>
5252
<figure className={styles.arrowIcon}>
5353
<img src='img/home-arrow.svg' />
@@ -64,7 +64,7 @@ export const GetStarted = () => {
6464
<Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
6565
3. Register your app
6666
</Text>
67-
<p>Fill out the registration form to start using Deriv API.</p>
67+
<p>Fill out the registration form to start using Deriv API</p>
6868
</section>
6969
<figure className={styles.arrowIcon}>
7070
<img src='img/home-arrow.svg' />

‎src/features/Home/HeroHeader/HeroHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const HeroHeader = () => {
66
return (
77
<header className={styles.HeroImageStyle} data-testid='hero-header'>
88
<div className={styles.HeroContainerStyle}>
9-
<Text type='heading-1' as={'h1'} bold className={styles.heading} aria-level={2}>
9+
<Text type='hero' as={'h1'} bold className={styles.heading} aria-level={2}>
1010
Deriv API
1111
</Text>
1212
<Text

‎src/features/Home/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Benefits } from './Benefits/Benefits';
44
import { ClientLibraries } from './ClientLibraries/ClientLibraries';
55
import { HeroHeader } from './HeroHeader/HeroHeader';
66
import { WaysToEarn } from './WaysToEarn/WaysToEarn';
7-
import { Carousel } from './Carousel/Carousel';
7+
// import { Carousel } from './Carousel/Carousel';
88
import Footer from '@site/src/components/Footer';
99
import styles from './styles.module.scss';
1010
import { GetStarted } from './GetStarted/GetStarted';
@@ -18,7 +18,8 @@ export default function HomepageFeatures() {
1818
<WaysToEarn />
1919
<GetStarted />
2020
<ApiFeatures />
21-
<Carousel />
21+
{/* Carousel requires new quote's before it should be enabled again */}
22+
{/* <Carousel /> */}
2223
<Footer />
2324
</main>
2425
);

‎src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styles from '../api-token.form.module.scss';
44
import useApiToken from '@site/src/hooks/useApiToken';
55
import { FieldErrorsImpl, UseFormRegisterReturn } from 'react-hook-form';
66
import CustomErrors from './CustomErrors';
7+
import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
78

89
type TCreateTokenField = {
910
register: UseFormRegisterReturn;
@@ -19,13 +20,19 @@ type TCreateTokenField = {
1920
>;
2021
form_is_cleared: boolean;
2122
setFormIsCleared: Dispatch<SetStateAction<boolean>>;
23+
setHideRestriction: Dispatch<SetStateAction<boolean>>;
24+
is_toggle: boolean;
25+
setToggleModal: Dispatch<SetStateAction<boolean>>;
2226
};
2327

2428
const CreateTokenField = ({
2529
errors,
2630
register,
2731
form_is_cleared,
2832
setFormIsCleared,
33+
setHideRestriction,
34+
is_toggle,
35+
setToggleModal,
2936
}: TCreateTokenField) => {
3037
const { tokens } = useApiToken();
3138
const [input_value, setInputValue] = useState('');
@@ -54,6 +61,11 @@ const CreateTokenField = ({
5461
token_name_exists || Object.keys(errors).length > 0 || input_value === '' || has_custom_errors;
5562
const error_border_active = token_name_exists || errors.name || has_custom_errors;
5663

64+
useEffect(() => {
65+
if (error_border_active) {
66+
setHideRestriction(true);
67+
}
68+
}, [error_border_active, setHideRestriction]);
5769
return (
5870
<React.Fragment>
5971
<div className={styles.step_title}>
@@ -77,9 +89,7 @@ const CreateTokenField = ({
7789
<Button disabled={disable_button} type='submit'>
7890
Create
7991
</Button>
80-
<label className={styles.tokenInputLabel}>
81-
Token name (you&apos;ve created <b>{tokens.length}</b> out of 30 tokens)
82-
</label>
92+
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
8393
</div>
8494
{errors && errors.name && (
8595
<Text as='span' type='paragraph-1' className='error-message'>

‎src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,14 @@ describe('Home Page', () => {
139139
expect(error).toBeVisible;
140140
});
141141

142+
it('should hide restrictions if error is present', async () => {
143+
const nameInput = screen.getByRole('textbox');
144+
const restrictions = screen.getByRole('list');
145+
expect(restrictions).toBeVisible();
146+
await userEvent.type(nameInput, 'testtoken1');
147+
expect(restrictions).not.toBeVisible();
148+
});
149+
142150
it('Should not create token when name input is empty', async () => {
143151
const nameInput = screen.getByRole('textbox');
144152

@@ -148,6 +156,30 @@ describe('Home Page', () => {
148156

149157
expect(mockCreateToken).not.toHaveBeenCalled();
150158
});
159+
it('Should open success dialog when token is created ', async () => {
160+
const nameInput = screen.getByRole('textbox');
161+
162+
await userEvent.type(nameInput, 'test create token');
163+
164+
const submitButton = screen.getByRole('button', { name: /Create/i });
165+
await userEvent.click(submitButton);
166+
167+
const modal = screen.getByText('Your API token is ready to be used.');
168+
expect(modal).toBeVisible();
169+
});
170+
171+
it('Should have create button disabled in case of empty input or error message', async () => {
172+
const submitButton = screen.getByRole('button', { name: /Create/i });
173+
expect(submitButton).toBeDisabled();
174+
175+
const nameInput = screen.getByRole('textbox');
176+
177+
await userEvent.type(nameInput, 'token-text');
178+
expect(submitButton).toBeDisabled();
179+
180+
await userEvent.clear(nameInput);
181+
expect(submitButton).toBeDisabled();
182+
});
151183
});
152184
describe('Token limit', () => {
153185
const createMaxTokens = () => {

0 commit comments

Comments
 (0)