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

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

Commit 0388045

Browse files
virtualpowwaliemcornKevin
authored
Kevin/feat: Market-Synth-multiplier add crash/boom, step index (#1209)
* feat: update minor styling and add crash/boom, step index * fix: qa issues #1 * fix: suthesh commend, remove important * fix: qa comments #2 * fix: crash boom alignment * fix: qa comments * fix: footer - add risk warning * fix: remove risk warning * redeploy: vercel Co-authored-by: Kevin <[email protected]> Co-authored-by: Kevin <[email protected]>
1 parent 6d8cd91 commit 0388045

File tree

16 files changed

+232
-121
lines changed

16 files changed

+232
-121
lines changed

‎src/components/custom/_signup-public.js

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const Wrapper = styled.div`
3232
width: 100%;
3333
overflow: hidden;
3434
border-top: 1px solid rgba(151, 151, 151, 0.2);
35+
border-bottom: 1px solid rgba(151, 151, 151, 0.2);
3536
@media (max-width: 991px) {
3637
flex-direction: column;
3738
height: auto;
@@ -97,14 +98,18 @@ const InputGroup = styled.div`
9798
margin-top: 3.5rem;
9899
`
99100
const EmailButton = styled(Button)`
100-
margin-left: 2rem;
101-
height: 4rem;
101+
margin-left: 1rem;
102+
min-width: 105px;
103+
height: 40px;
104+
padding: 10px 28px;
105+
border-radius: 4px;
102106
@media ${device.tabletL} {
103-
width: auto;
107+
padding: 10px;
108+
min-width: unset;
104109
font-size: 1.4rem;
105110
margin-left: 0;
106-
height: 5rem;
107-
min-width: 15rem;
111+
height: 40px;
112+
width: 81px;
108113
}
109114
`
110115
const SocialWrapper = styled(Flex)`
@@ -117,14 +122,17 @@ const SocialWrapper = styled(Flex)`
117122
}
118123
`
119124
const SocialButton = styled(Button)`
120-
width: 56px;
125+
width: 70px;
126+
border-radius: 4px;
121127
justify-content: center;
122128
display: flex;
123129
background-color: var(--color-white);
124130
border: solid 1px var(--color-grey-7);
125131
height: 4rem;
126132
margin: 0 0.8rem;
127133
@media ${device.tabletL} {
134+
width: 114px;
135+
height: 48px;
128136
justify-content: center;
129137
align-items: center;
130138
}
@@ -155,10 +163,17 @@ const StyledText = styled(Text)`
155163
width: auto;
156164
margin-right: 2rem;
157165
@media ${device.tabletL} {
158-
width: max-content-fit;
159-
margin-right: 1rem;
166+
width: 90px;
167+
margin-right: 0;
160168
}
161169
`
170+
171+
const StyledSpan = styled.span`
172+
font-size: 13px;
173+
font-weight: 500;
174+
color: var(--color-grey-32);
175+
margin-left: 4px;
176+
`
162177
const ImageWrapper = styled(Flex)`
163178
position: relative;
164179
width: 41.1rem;
@@ -246,7 +261,10 @@ const SignupPublic = ({
246261
<SignupFormWrapper>
247262
<div>
248263
<StyledHeader size="3.2rem">
249-
{localize('Join over 1 million traders worldwide')}
264+
{localize('Join over 1 million')}
265+
</StyledHeader>
266+
<StyledHeader size="3.2rem">
267+
{localize('traders worldwide')}
250268
</StyledHeader>
251269
<br />
252270
<StyledHeaderText weight="normal" size="1.6rem">
@@ -262,10 +280,12 @@ const SignupPublic = ({
262280
value={email}
263281
background="white"
264282
tabletBackground="green-1"
265-
inputColor="var(grey-5)"
283+
inputColor="grey-5"
266284
inputBackground="grey-8"
267285
labelFocusColor="grey-7"
268286
labelColor="black-3"
287+
labelSize="16px"
288+
labelTop="1.2rem"
269289
label={localize('Email')}
270290
placeholder={'[email protected]'}
271291
handleError={clearEmail}
@@ -275,6 +295,7 @@ const SignupPublic = ({
275295
autoComplete="off"
276296
required
277297
border="unset"
298+
height="40px"
278299
focusBorder="var(--color-grey-7)"
279300
/>
280301
</InputWrapper>
@@ -288,7 +309,7 @@ const SignupPublic = ({
288309
</EmailButton>
289310
</InputGroup>
290311
<SocialWrapper jc="unset" ai="center">
291-
<StyledText>{localize('or sign up with')}</StyledText>
312+
<StyledText>{localize('Or sign in with')}</StyledText>
292313
<SocialButton
293314
onClick={handleSocialSignup}
294315
provider="facebook"
@@ -353,7 +374,7 @@ const SignupPublic = ({
353374
value={email}
354375
background="white"
355376
tabletBackground="green-1"
356-
inputColor="var(grey-5)"
377+
inputColor="grey-5"
357378
inputBackground="grey-8"
358379
labelFocusColor="grey-7"
359380
labelColor="black-3"
@@ -379,30 +400,32 @@ const SignupPublic = ({
379400
</EmailButton>
380401
</InputGroup>
381402
<SocialWrapper jc="unset" ai="center">
382-
<StyledText>{localize('or sign up with')}</StyledText>
403+
<StyledText>{localize('Or sign in with')}</StyledText>
383404
<SocialButton
384405
onClick={handleSocialSignup}
385-
provider="facebook"
386-
data-provider="facebook"
387-
id="gtm-signup-facebook"
406+
provider="google"
407+
data-provider="google"
408+
id="gtm-signup-google"
388409
type="button"
389410
social
390411
>
391412
<span>
392413
<img src={Facebook} alt="facebook" width="12" height="22" />
393414
</span>
415+
<StyledSpan>Google</StyledSpan>
394416
</SocialButton>
395417
<SocialButton
396418
onClick={handleSocialSignup}
397-
provider="google"
398-
data-provider="google"
399-
id="gtm-signup-google"
419+
provider="facebook"
420+
data-provider="facebook"
421+
id="gtm-signup-facebook"
400422
type="button"
401423
social
402424
>
403425
<span>
404426
<img src={Google} alt="google" width="22" height="23" />
405427
</span>
428+
<StyledSpan>Facebook</StyledSpan>
406429
</SocialButton>
407430
</SocialWrapper>
408431
</div>

‎src/components/custom/_simple-steps.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,16 @@ const MobileBackgroundPattern = styled.img`
9999
left: 0;
100100
top: 0;
101101
`
102+
102103
const LinkButtonWrapper = styled.div`
103104
margin-top: 4.2rem;
104105
text-align: center;
105106
height: 3rem;
106107
107108
${LinkButton} {
109+
width: 113px;
110+
height: 40px;
111+
border-radius: 4px;
108112
position: relative;
109113
font-size: 1.4rem;
110114
}

‎src/components/elements/default-tab.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ TabPanel.propTypes = {
9494
const Tabs = ({ children, tab_list }) => {
9595
const [selected_tab, setSelectedTab] = useState(0)
9696
const [active_tab, setActiveTab] = useTabState(['clients', 'business-partners'])
97-
97+
9898
useEffect(() => {
9999
setSelectedTab(tab_list.indexOf(active_tab))
100100
}, [active_tab])
@@ -109,9 +109,7 @@ const Tabs = ({ children, tab_list }) => {
109109
aria-selected={selected_tab === index ? 'true' : 'false'}
110110
onClick={() => setActiveTab(tab_list[index])}
111111
>
112-
<TextWrapper>
113-
{label}
114-
</TextWrapper>
112+
<TextWrapper>{label}</TextWrapper>
115113
</TabButton>
116114
))}
117115
<LineDivider />

‎src/components/elements/side-tab.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
22
import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
44
import { Text, Header } from './typography'
5-
import device, {size} from 'themes/device'
5+
import device, { size } from 'themes/device'
66
import { getWindowWidth } from 'common/utility'
77
import { Box } from 'components/containers'
88
import { Desktop, Mobile } from 'components/containers/show'
@@ -113,8 +113,9 @@ const Tab = ({ active_tab, label, onClick, text, mobile, font_size }) => {
113113
)
114114
}
115115

116-
const getTabs = (children) => children.map(child => child.props.label)
117-
const findCurrentTab = (children, active_tab) => children.find(child => child.props.label === active_tab)
116+
const getTabs = (children) => children.map((child) => child.props.label)
117+
const findCurrentTab = (children, active_tab) =>
118+
children.find((child) => child.props.label === active_tab)
118119

119120
const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
120121
const [active_tab, setActiveTab] = useTabState(getTabs(children))
@@ -174,7 +175,8 @@ const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
174175
</Mobile>
175176
</TabList>
176177
<TabContent>
177-
{(!is_menu || getWindowWidth() >= size.tabletL) && children.map((child) => (child.props.label === active_tab ? child : undefined))}
178+
{(!is_menu || getWindowWidth() >= size.tabletL) &&
179+
children.map((child) => (child.props.label === active_tab ? child : undefined))}
178180
</TabContent>
179181
</StyledSideTab>
180182
)

‎src/components/form/input.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const InputWrapper = styled.div`
1414
width: 100%;
1515
border: ${(props) => props.border || '1px solid var(--color-grey-2)'};
1616
border-radius: 4px;
17-
1817
@media ${device.tabletL} {
1918
height: 5rem;
2019
}
@@ -39,7 +38,6 @@ const InputWrapper = styled.div`
3938
props.error &&
4039
css`
4140
border-color: var(--color-red-1) !important;
42-
4341
& > label {
4442
color: var(--color-red-1) !important;
4543
}
@@ -53,7 +51,6 @@ const StyledError = styled.img`
5351
height: 1.6rem;
5452
width: 1.6rem;
5553
cursor: pointer;
56-
5754
@media ${device.tablet} {
5855
right: 2rem;
5956
top: 1.6rem;
@@ -66,11 +63,11 @@ const StyledInput = styled.input`
6663
color: var(--color-${(props) => props.inputColor || 'black'});
6764
font-size: var(--text-size-xs);
6865
padding: 1rem 1rem 1rem 0.8rem;
66+
height: ${(props) => props.height || '40px'};
6967
width: 100%;
7068
display: block;
7169
border: none;
7270
border-radius: 4px;
73-
7471
@media ${device.tabletL} {
7572
height: 100%;
7673
@@ -79,7 +76,6 @@ const StyledInput = styled.input`
7976
top: 1.5rem;
8077
}
8178
}
82-
8379
@media ${device.mobileL} {
8480
font-size: 14px;
8581
@@ -105,7 +101,6 @@ const StyledInput = styled.input`
105101
106102
/* prettier-ignore */
107103
background-color: var(--color-${(props) => props.background || 'grey-1'});
108-
109104
@media ${device.mobileL} {
110105
transform: translate(-0.6rem, -20px) scale(0.7);
111106
}
@@ -123,11 +118,9 @@ const StyledInput = styled.input`
123118
& ~ label {
124119
transform: translate(-0.6rem, -2rem) scale(0.7);
125120
color: var(--color-black-3);
126-
127121
@media ${device.tabletL} {
128122
top: 9px;
129123
}
130-
131124
/* prettier-ignore */
132125
background-color: var(--color-${(props) => props.background || 'grey-1'});
133126
}
@@ -157,6 +150,7 @@ const StyledLabel = styled.label`
157150

158151
const Input = ({
159152
label,
153+
height,
160154
border,
161155
focusBorder,
162156
labelHoverColor,
@@ -185,6 +179,7 @@ const Input = ({
185179
background={background}
186180
maxLength={maxLength}
187181
error={error}
182+
height={height}
188183
{...props}
189184
ref={(ip) => (current_input = ip)}
190185
/>
@@ -220,6 +215,7 @@ Input.propTypes = {
220215
error: PropTypes.string,
221216
focusBorder: PropTypes.string,
222217
handleError: PropTypes.func,
218+
height: PropTypes.any,
223219
id: PropTypes.string,
224220
label: PropTypes.string,
225221
labelColor: PropTypes.string,

‎src/components/hooks/use-tab-state.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { useState, useEffect } from 'react'
2-
import { checkElemInArray, getLocationHash, isBrowser, routeBack, scrollTop, setLocationHash } from 'common/utility'
2+
import {
3+
checkElemInArray,
4+
getLocationHash,
5+
isBrowser,
6+
routeBack,
7+
scrollTop,
8+
setLocationHash,
9+
} from 'common/utility'
310

411
export const useTabState = (tab_list) => {
5-
const [active_tab, setActiveTab] = useState(getLocationHash() && checkElemInArray(tab_list, getLocationHash()) ? getLocationHash() : tab_list[0])
12+
const [active_tab, setActiveTab] = useState(
13+
getLocationHash() && checkElemInArray(tab_list, getLocationHash())
14+
? getLocationHash()
15+
: tab_list[0],
16+
)
617

718
useEffect(() => {
819
if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
@@ -29,4 +40,4 @@ export const useTabState = (tab_list) => {
2940
}, [getLocationHash()])
3041

3142
return [active_tab, setActiveTab]
32-
}
43+
}

‎src/components/layout/footer.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -324,13 +324,13 @@ const Footer = () => {
324324
</Link>
325325
</LinkWrapper>
326326
<LinkWrapper>
327-
<Link to="/partners">
328-
{localize('Partnership programmes')}
327+
<Link to="/why-choose-us">
328+
{localize('Why choose us?')}
329329
</Link>
330330
</LinkWrapper>
331331
<LinkWrapper>
332-
<Link to="/why-choose-us">
333-
{localize('Why choose us?')}
332+
<Link to="/partners">
333+
{localize('Partnership programmes')}
334334
</Link>
335335
</LinkWrapper>
336336
<LinkWrapper>
@@ -631,10 +631,7 @@ const Footer = () => {
631631
</Show.Eu>
632632
<Show.NonEU>
633633
<DisclaimerParagraph no_margin>
634-
<Localize
635-
translate_text="The financial products offered on this website include options and contracts for difference (CFDs) which are considered complex derivatives and may not be suitable for everyone. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money."
636-
components={[<strong key={0} />]}
637-
/>
634+
<Localize translate_text="The financial products offered on this website include options and contracts for difference (CFDs) which are considered complex derivatives and may not be suitable for everyone. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
638635
</DisclaimerParagraph>
639636
<DisclaimerParagraph>
640637
<Localize

0 commit comments

Comments
 (0)