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.

Suthesh/multiplier page #1323

Merged
merged 3 commits into from
Jan 21, 2021
Merged

Suthesh/multiplier page #1323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bc8fb77
added available trading instruments(wip)
suthesank Dec 28, 2020
c1c3534
added forex and synthetic tabs in multiplier page
suthesank Dec 30, 2020
0f5e943
updated content for available trades for multipliers section
suthesank Jan 5, 2021
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
246 changes: 246 additions & 0 deletions src/pages/trade-types/multiplier/_available-trades.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
import React from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import { SectionContainer, Flex, Container } from 'components/containers'
import { Localize } from 'components/localization'
import { Header } from 'components/elements'
import device from 'themes/device'
//SVG
import ForexIcon from 'images/svg/market-forex.svg'
import SyntheticIcon from 'images/svg/market-synthetic-indices.svg'

const StyledHeader = styled(Header)`
@media ${device.tabletL} {
max-width: 35.75rem;
font-size: 32px;
margin: 0 auto;
}
`

const StyledSection = styled(SectionContainer)`
padding: 5rem 0;
`

const StyledContainer = styled(Container)`
margin-top: 2.8rem;

@media ${device.tabletL} {
width: 100%;
margin-top: 0;
}
`
const CardWrapper = styled(Flex)`
max-width: 100.6rem;
justify-content: flex-start;
z-index: 1;
height: 8rem;
align-items: flex-end;
padding-left: 0.8rem;
overflow: hidden;

div:first-child {
z-index: 3;
margin: 0 -0.3rem;
}
div:nth-child(2) {
z-index: 2;
}
div:last-child {
z-index: 1;
}

@media ${device.mobileL} {
overflow: scroll;
}
`
const CardContainer = styled(Flex)`
position: relative;
width: fit-content;
min-width: 36rem;
height: 7.72rem;
padding: 0;
margin: 0 -0.6rem;
cursor: pointer;
z-index: ${(props) => (props.active_tab === props.name ? '4 !important' : '')};
padding-right: 5rem;

${Flex} {
padding: 2.71rem 0 0 3.2rem;

img {
width: 32px;
height: 32px;
margin-right: 1.6rem;
opacity: ${(props) => (props.active_tab === props.name ? '1' : '0')};
}
h4 {
color: ${(props) =>
props.active_tab === props.name ? 'var(--color-red)' : 'var(--color-black-3)'};
opacity: ${(props) => (props.active_tab === props.name ? '1' : '0.56')};
}
@media ${device.tabletL} {
width: 100%;
height: 100%;
justify-content: flex-start;
padding: 10px 44px 0;

img {
width: 16px;
height: 16px;
margin-right: 1rem;
}
}
}
::before {
content: ''; /* To generate the box */
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: -1rem;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 10px 30px 0 0;
background: var(--color-grey-36);
transform: perspective(14px) rotateX(1.4deg);
transform-origin: bottom left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
${(props) => {
if (props.active_tab === props.name)
return css`
background-color: var(--color-white);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
`
}}
}
@media ${device.tabletL} {
width: 100%;
height: 6rem;
min-width: unset;
padding-right: 0;
}
`
const TabMarginIcon = styled.img`
min-width: 16px;
${(props) => {
if (props.active_tab === props.name)
return css`
margin-left: 16px;
`
}}
`
const TabOptionIcon = styled.img`
min-width: 16px;
${(props) => {
if (props.active_tab === props.name)
return css`
margin-left: 16px;
`
}}
`

const ContentWrapper = styled.div`
width: 100%;
max-width: 99.6rem;
display: block;
background: var(--color-white);
border-radius: 0.15em;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);

@media ${device.tabletL} {
padding: 0 2rem;
}
`
const CardHeader = styled(Header)`
@media ${device.tabletL} {
font-size: 1.75rem;
line-height: 16px;
}
`
const Card = ({ display_name, active_tab, onTabChange, name }) => {
return (
<CardContainer name={name} active_tab={active_tab} onClick={() => onTabChange(name)}>
<Flex height="fit-content" jc="flex-start" ai="center">
{active_tab === 'Forex' && (
<TabMarginIcon
src={ForexIcon}
alt="margin icon"
name={name}
active_tab={active_tab}
/>
)}
{active_tab === 'Synthetic Indices' && (
<TabOptionIcon
src={SyntheticIcon}
alt="option icon"
name={name}
active_tab={active_tab}
/>
)}
<CardHeader as="h4" type="sub-section-title" width="auto">
{display_name}
</CardHeader>
</Flex>
</CardContainer>
)
}

Card.propTypes = {
active_tab: PropTypes.string,
display_name: PropTypes.object,
name: PropTypes.string,
onTabChange: PropTypes.func,
}

class AvailableTrades extends React.Component {
state = {
active_tab: 'Forex',
}
handleTabChange = (new_tab) => {
if (new_tab === this.state.active_tab) return
this.setState({ active_tab: new_tab })
}
render() {
const { display_title, Forex, SyntheticIndices } = this.props
return (
<StyledSection>
<StyledHeader size="var(--text-size-header-1)" align="center" as='h2'>
{display_title}
</StyledHeader>
<StyledContainer direction="column">
<CardWrapper position="relative">
{Forex && (
<Card
name="Forex"
display_name={<Localize translate_text="Forex" />}
onTabChange={() => this.handleTabChange('Forex')}
active_tab={this.state.active_tab}
/>
)}
{SyntheticIndices && (
<Card
name="Synthetic Indices"
display_name={<Localize translate_text="Synthetic Indices" />}
onTabChange={() => this.handleTabChange('Synthetic Indices')}
active_tab={this.state.active_tab}
/>
)}
</CardWrapper>
<ContentWrapper>
{this.state.active_tab === 'Forex' && <Forex />}
{this.state.active_tab === 'Synthetic Indices' && <SyntheticIndices />}
</ContentWrapper>
</StyledContainer>
</StyledSection>
)
}
}

AvailableTrades.propTypes = {
display_title: PropTypes.object,
Forex: PropTypes.func,
SyntheticIndices: PropTypes.func,
}

export default AvailableTrades
88 changes: 88 additions & 0 deletions src/pages/trade-types/multiplier/_margin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react'
import styled from 'styled-components'
import { MajorPairs } from '../../markets/sub-markets/_submarkets.js'
import AvailablePlatforms from '../../markets/_available-platforms.js'
import { Text } from 'components/elements'
import { SectionContainer, Flex, CssGrid } from 'components/containers'
import { localize } from 'components/localization'
import device from 'themes/device'

const StyledText = styled(Text)`
@media ${device.tabletL} {
text-align: left;
}
`

const Col = styled(Flex)`
max-width: 12.9rem;
padding: 0 0.4rem;
`
const Row = styled(Flex)`
border: 1px solid var(--color-grey-22);
margin-top: 2.4rem;
border-radius: 8px;
`
const MarketsList = styled(CssGrid)`
border-left: 1px solid var(--color-grey-22);
grid-template-columns: repeat(5, 1fr);
width: 100%;
padding: 2.4rem;
grid-row-gap: 1.6rem;

@media ${device.tabletL} {
grid-template-columns: repeat(3, 1fr);

img {
width: 16px;
height: 16px;
margin-right: 4px;
}
${Text} {
font-size: 1.5rem;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be in px?

line-height: 1.5;
}
}

@media ${device.mobileL} {
grid-template-columns: repeat(2, 1fr);
}
`

const Title = styled(Text)`
text-align: center;

@media ${device.tabletL} {
font-weight: 600;
}
`

const StyledTitle = styled(Text)`
text-align: left;
font-weight: bold;
Comment on lines +59 to +61
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can omit this as text-align defaults to the left. We can pass the weight as a prop to Text.

`

const Margin = () => {
return (
<SectionContainer padding="4rem 0 8rem">
<Flex max_width="79.2rem" m="0 auto" direction="column">
<StyledText mb='12px' align="center">
{localize('Trade Forex with multipliers for high leverage, tight spreads and benefit from multiple opportunities to trade on world events.')}
</StyledText>
<StyledTitle>
{localize('Forex pairs available for Multipliers trading')}
</StyledTitle>
<Row jc="flex-start" ai="center">
<Col>
<Title weight="bold">{localize('Major pairs')}</Title>
</Col>
<MarketsList>
<MajorPairs />
</MarketsList>
</Row>
<AvailablePlatforms dtrader />
</Flex>
</SectionContainer>
)
}

export default Margin
Loading