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

Commit e470ef2

Browse files
Hubert KosterHubert Koster
Hubert Koster
authored and
Hubert Koster
committed
chore: merge conflict
2 parents a68a7db + 469e975 commit e470ef2

File tree

34 files changed

+1187
-357
lines changed

34 files changed

+1187
-357
lines changed

‎src/components/ApiTokenNavbarItem/api_token_switcher.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
@media (max-width: 1200px) {
122122
position: fixed;
123123
width: 100%;
124-
top: calc(var(--nav-height) + rem(3.3));
124+
top: calc(var(--nav-height) + rem(7));
125125
left: 0;
126126
right: 0;
127127
}

‎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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ 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'>
57-
Personalize your trading apps to match your needs. Create charts and views the way you
57+
Personalise 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
5959
your trading opportunities.
6060
</Text>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ describe('Benefits', () => {
2222
expect(integration).toBeInTheDocument();
2323
expect(execution).toBeInTheDocument();
2424
});
25-
it('should render personalize your trading information', () => {
26-
const title = screen.getByText(/Personalize your trading$/i);
25+
it('should render personalise your trading information', () => {
26+
const title = screen.getByText(/Personalise your trading$/i);
2727
const information = screen.getByText(/create charts and views/i);
2828

2929
expect(title).toBeInTheDocument();
@@ -36,7 +36,7 @@ describe('Benefits', () => {
3636
expect(title).toBeInTheDocument();
3737
expect(information).toBeInTheDocument();
3838
});
39-
it('should render personalize image', () => {
39+
it('should render personalise image', () => {
4040
const image = screen.getByTestId('personalisation');
4141
expect(image).toBeInTheDocument();
4242
});

‎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/ApiTokenCard/api-token.card.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
flex-direction: column;
99
gap: rem(1);
1010
border: 1px solid var(--ifm-color-emphasis-400);
11-
border-radius: rem(0.4);
11+
border-radius: rem(2);
1212
padding: rem(1.6);
1313

1414
label {

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
3+
type TCustomErrors = {
4+
token_name_exists: boolean;
5+
tokens_limit_reached: boolean;
6+
input_value: string;
7+
};
8+
9+
const CustomErrors = ({ token_name_exists, tokens_limit_reached, input_value }: TCustomErrors) => {
10+
if (token_name_exists) {
11+
return (
12+
<div className='error-message'>
13+
<p>That name is taken. Choose another.</p>
14+
</div>
15+
);
16+
}
17+
if (tokens_limit_reached && input_value !== '') {
18+
return (
19+
<div className='error-message'>
20+
<p>You&apos;ve created the maximum number of tokens.</p>
21+
</div>
22+
);
23+
}
24+
25+
return <></>;
26+
};
27+
28+
export default CustomErrors;

0 commit comments

Comments
 (0)