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.

Kevin/feat: Market-Synth-multiplier add crash/boom, step index #1209

Merged
merged 10 commits into from
Dec 4, 2020
Merged

Kevin/feat: Market-Synth-multiplier add crash/boom, step index #1209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
aa1f072
feat: update minor styling and add crash/boom, step index
liemcorn Nov 18, 2020
ac31451
fix: qa issues #1
Nov 19, 2020
972a517
fix: suthesh commend, remove important
Nov 19, 2020
04a3b20
fix: qa comments #2
Nov 19, 2020
12fbe93
fix: crash boom alignment
liemcorn Nov 20, 2020
f79d0b5
fix: qa comments
liemcorn Nov 23, 2020
de999e1
fix: footer - add risk warning
liemcorn Nov 25, 2020
6fd90d2
fix: remove risk warning
liemcorn Nov 25, 2020
6cf299f
fix: conflict
virtualpowwa Dec 4, 2020
b578652
redeploy: vercel
virtualpowwa Dec 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 42 additions & 19 deletions src/components/custom/_signup-public.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const Wrapper = styled.div`
width: 100%;
overflow: hidden;
border-top: 1px solid rgba(151, 151, 151, 0.2);
border-bottom: 1px solid rgba(151, 151, 151, 0.2);
@media (max-width: 991px) {
flex-direction: column;
height: auto;
Expand Down Expand Up @@ -97,14 +98,18 @@ const InputGroup = styled.div`
margin-top: 3.5rem;
`
const EmailButton = styled(Button)`
margin-left: 2rem;
height: 4rem;
margin-left: 1rem;
min-width: 105px;
height: 40px;
padding: 10px 28px;
border-radius: 4px;
@media ${device.tabletL} {
width: auto;
padding: 10px;
min-width: unset;
font-size: 1.4rem;
margin-left: 0;
height: 5rem;
min-width: 15rem;
height: 40px;
width: 81px;
}
`
const SocialWrapper = styled(Flex)`
Expand All @@ -117,14 +122,17 @@ const SocialWrapper = styled(Flex)`
}
`
const SocialButton = styled(Button)`
width: 56px;
width: 70px;
border-radius: 4px;
justify-content: center;
display: flex;
background-color: var(--color-white);
border: solid 1px var(--color-grey-7);
height: 4rem;
margin: 0 0.8rem;
@media ${device.tabletL} {
width: 114px;
height: 48px;
justify-content: center;
align-items: center;
}
Expand Down Expand Up @@ -155,10 +163,17 @@ const StyledText = styled(Text)`
width: auto;
margin-right: 2rem;
@media ${device.tabletL} {
width: max-content-fit;
margin-right: 1rem;
width: 90px;
margin-right: 0;
}
`

const StyledSpan = styled.span`
font-size: 13px;
font-weight: 500;
color: var(--color-grey-32);
margin-left: 4px;
`
const ImageWrapper = styled(Flex)`
position: relative;
width: 41.1rem;
Expand Down Expand Up @@ -246,7 +261,10 @@ const SignupPublic = ({
<SignupFormWrapper>
<div>
<StyledHeader size="3.2rem">
{localize('Join over 1 million traders worldwide')}
{localize('Join over 1 million')}
</StyledHeader>
<StyledHeader size="3.2rem">
{localize('traders worldwide')}
</StyledHeader>
<br />
<StyledHeaderText weight="normal" size="1.6rem">
Expand All @@ -262,10 +280,12 @@ const SignupPublic = ({
value={email}
background="white"
tabletBackground="green-1"
inputColor="var(grey-5)"
inputColor="grey-5"
inputBackground="grey-8"
labelFocusColor="grey-7"
labelColor="black-3"
labelSize="16px"
labelTop="1.2rem"
label={localize('Email')}
placeholder={'[email protected]'}
handleError={clearEmail}
Expand All @@ -275,6 +295,7 @@ const SignupPublic = ({
autoComplete="off"
required
border="unset"
height="40px"
focusBorder="var(--color-grey-7)"
/>
</InputWrapper>
Expand All @@ -288,7 +309,7 @@ const SignupPublic = ({
</EmailButton>
</InputGroup>
<SocialWrapper jc="unset" ai="center">
<StyledText>{localize('or sign up with')}</StyledText>
<StyledText>{localize('Or sign in with')}</StyledText>
<SocialButton
onClick={handleSocialSignup}
provider="facebook"
Expand Down Expand Up @@ -353,7 +374,7 @@ const SignupPublic = ({
value={email}
background="white"
tabletBackground="green-1"
inputColor="var(grey-5)"
inputColor="grey-5"
inputBackground="grey-8"
labelFocusColor="grey-7"
labelColor="black-3"
Expand All @@ -379,30 +400,32 @@ const SignupPublic = ({
</EmailButton>
</InputGroup>
<SocialWrapper jc="unset" ai="center">
<StyledText>{localize('or sign up with')}</StyledText>
<StyledText>{localize('Or sign in with')}</StyledText>
<SocialButton
onClick={handleSocialSignup}
provider="facebook"
data-provider="facebook"
id="gtm-signup-facebook"
provider="google"
data-provider="google"
id="gtm-signup-google"
type="button"
social
>
<span>
<img src={Facebook} alt="facebook" width="12" height="22" />
</span>
<StyledSpan>Google</StyledSpan>
</SocialButton>
<SocialButton
onClick={handleSocialSignup}
provider="google"
data-provider="google"
id="gtm-signup-google"
provider="facebook"
data-provider="facebook"
id="gtm-signup-facebook"
type="button"
social
>
<span>
<img src={Google} alt="google" width="22" height="23" />
</span>
<StyledSpan>Facebook</StyledSpan>
</SocialButton>
</SocialWrapper>
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/components/custom/_simple-steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,16 @@ const MobileBackgroundPattern = styled.img`
left: 0;
top: 0;
`

const LinkButtonWrapper = styled.div`
margin-top: 4.2rem;
text-align: center;
height: 3rem;

${LinkButton} {
width: 113px;
height: 40px;
border-radius: 4px;
position: relative;
font-size: 1.4rem;
}
Expand Down
6 changes: 2 additions & 4 deletions src/components/elements/default-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ TabPanel.propTypes = {
const Tabs = ({ children, tab_list }) => {
const [selected_tab, setSelectedTab] = useState(0)
const [active_tab, setActiveTab] = useTabState(['clients', 'business-partners'])

useEffect(() => {
setSelectedTab(tab_list.indexOf(active_tab))
}, [active_tab])
Expand All @@ -109,9 +109,7 @@ const Tabs = ({ children, tab_list }) => {
aria-selected={selected_tab === index ? 'true' : 'false'}
onClick={() => setActiveTab(tab_list[index])}
>
<TextWrapper>
{label}
</TextWrapper>
<TextWrapper>{label}</TextWrapper>
</TabButton>
))}
<LineDivider />
Expand Down
10 changes: 6 additions & 4 deletions src/components/elements/side-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'
import { Text, Header } from './typography'
import device, {size} from 'themes/device'
import device, { size } from 'themes/device'
import { getWindowWidth } from 'common/utility'
import { Box } from 'components/containers'
import { Desktop, Mobile } from 'components/containers/show'
Expand Down Expand Up @@ -113,8 +113,9 @@ const Tab = ({ active_tab, label, onClick, text, mobile, font_size }) => {
)
}

const getTabs = (children) => children.map(child => child.props.label)
const findCurrentTab = (children, active_tab) => children.find(child => child.props.label === active_tab)
const getTabs = (children) => children.map((child) => child.props.label)
const findCurrentTab = (children, active_tab) =>
children.find((child) => child.props.label === active_tab)

const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
const [active_tab, setActiveTab] = useTabState(getTabs(children))
Expand Down Expand Up @@ -174,7 +175,8 @@ const SideTab = ({ children, is_sticky, tab_header, font_size }) => {
</Mobile>
</TabList>
<TabContent>
{(!is_menu || getWindowWidth() >= size.tabletL) && children.map((child) => (child.props.label === active_tab ? child : undefined))}
{(!is_menu || getWindowWidth() >= size.tabletL) &&
children.map((child) => (child.props.label === active_tab ? child : undefined))}
</TabContent>
</StyledSideTab>
)
Expand Down
12 changes: 4 additions & 8 deletions src/components/form/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const InputWrapper = styled.div`
width: 100%;
border: ${(props) => props.border || '1px solid var(--color-grey-2)'};
border-radius: 4px;

@media ${device.tabletL} {
height: 5rem;
}
Expand All @@ -39,7 +38,6 @@ const InputWrapper = styled.div`
props.error &&
css`
border-color: var(--color-red-1) !important;

& > label {
color: var(--color-red-1) !important;
}
Expand All @@ -53,7 +51,6 @@ const StyledError = styled.img`
height: 1.6rem;
width: 1.6rem;
cursor: pointer;

@media ${device.tablet} {
right: 2rem;
top: 1.6rem;
Expand All @@ -66,11 +63,11 @@ const StyledInput = styled.input`
color: var(--color-${(props) => props.inputColor || 'black'});
font-size: var(--text-size-xs);
padding: 1rem 1rem 1rem 0.8rem;
height: ${(props) => props.height || '40px'};
width: 100%;
display: block;
border: none;
border-radius: 4px;

@media ${device.tabletL} {
height: 100%;

Expand All @@ -79,7 +76,6 @@ const StyledInput = styled.input`
top: 1.5rem;
}
}

@media ${device.mobileL} {
font-size: 14px;

Expand All @@ -105,7 +101,6 @@ const StyledInput = styled.input`

/* prettier-ignore */
background-color: var(--color-${(props) => props.background || 'grey-1'});

@media ${device.mobileL} {
transform: translate(-0.6rem, -20px) scale(0.7);
}
Expand All @@ -123,11 +118,9 @@ const StyledInput = styled.input`
& ~ label {
transform: translate(-0.6rem, -2rem) scale(0.7);
color: var(--color-black-3);

@media ${device.tabletL} {
top: 9px;
}

/* prettier-ignore */
background-color: var(--color-${(props) => props.background || 'grey-1'});
}
Expand Down Expand Up @@ -157,6 +150,7 @@ const StyledLabel = styled.label`

const Input = ({
label,
height,
border,
focusBorder,
labelHoverColor,
Expand Down Expand Up @@ -185,6 +179,7 @@ const Input = ({
background={background}
maxLength={maxLength}
error={error}
height={height}
{...props}
ref={(ip) => (current_input = ip)}
/>
Expand Down Expand Up @@ -220,6 +215,7 @@ Input.propTypes = {
error: PropTypes.string,
focusBorder: PropTypes.string,
handleError: PropTypes.func,
height: PropTypes.any,
id: PropTypes.string,
label: PropTypes.string,
labelColor: PropTypes.string,
Expand Down
17 changes: 14 additions & 3 deletions src/components/hooks/use-tab-state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import { useState, useEffect } from 'react'
import { checkElemInArray, getLocationHash, isBrowser, routeBack, scrollTop, setLocationHash } from 'common/utility'
import {
checkElemInArray,
getLocationHash,
isBrowser,
routeBack,
scrollTop,
setLocationHash,
} from 'common/utility'

export const useTabState = (tab_list) => {
const [active_tab, setActiveTab] = useState(getLocationHash() && checkElemInArray(tab_list, getLocationHash()) ? getLocationHash() : tab_list[0])
const [active_tab, setActiveTab] = useState(
getLocationHash() && checkElemInArray(tab_list, getLocationHash())
? getLocationHash()
: tab_list[0],
)

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

return [active_tab, setActiveTab]
}
}
13 changes: 5 additions & 8 deletions src/components/layout/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,13 +324,13 @@ const Footer = () => {
</Link>
</LinkWrapper>
<LinkWrapper>
<Link to="/partners">
{localize('Partnership programmes')}
<Link to="/why-choose-us">
{localize('Why choose us?')}
</Link>
</LinkWrapper>
<LinkWrapper>
<Link to="/why-choose-us">
{localize('Why choose us?')}
<Link to="/partners">
{localize('Partnership programmes')}
</Link>
</LinkWrapper>
<LinkWrapper>
Expand Down Expand Up @@ -631,10 +631,7 @@ const Footer = () => {
</Show.Eu>
<Show.NonEU>
<DisclaimerParagraph no_margin>
<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."
components={[<strong key={0} />]}
/>
<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." />
</DisclaimerParagraph>
<DisclaimerParagraph>
<Localize
Expand Down
Loading