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 6b15812

Browse files
ashraf-derivashrafali-v
ashraf-deriv
and
ashrafali-v
authored
ashraf/Fix trade dropdown alignment issue (#2730)
* replaced financial disclosure report pdf with new one * trader dropdown alignment fix * reviw changes * code cleaning * code cleaning * code re use changes Co-authored-by: ashrafali-v <[email protected]>
1 parent f02f3bf commit 6b15812

File tree

3 files changed

+125
-117
lines changed

3 files changed

+125
-117
lines changed

‎src/components/custom/other-platforms.js

Lines changed: 68 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
4-
import { SectionContainer, Flex, FlexGridContainer, EU, NonEU, ROW } from 'components/containers'
54
import {
6-
Text,
7-
Card,
8-
Header,
9-
NavCard,
10-
CardLink,
11-
LocalizedLinkText,
12-
Divider,
13-
} from 'components/elements'
5+
SectionContainer,
6+
Flex,
7+
FlexGridContainer,
8+
EU,
9+
NonEU,
10+
ROW,
11+
UKEU,
12+
} from 'components/containers'
13+
import { Text, Card, Header, NavCard, CardLink, LocalizedLinkText } from 'components/elements'
1414
import { localize, LocalizedLink, Localize } from 'components/localization'
1515
import { getCountryRule } from 'components/containers/visibility'
1616
import { binary_bot_url } from 'common/constants'
@@ -44,10 +44,6 @@ import Story from 'images/svg/menu/story.svg'
4444
import SyntheticIndices from 'images/svg/custom/synthetic-indices-nav.svg'
4545
import TraderTool from 'images/svg/custom/trader-tool-nav.svg'
4646

47-
const MarginDivider = styled(Divider)`
48-
margin: 0 0.8rem;
49-
`
50-
5147
const StyledText = styled(Text)`
5248
font-size: var(--text-size-xs);
5349
color: var(--color-grey-5);
@@ -269,11 +265,28 @@ OtherPlatform.propTypes = {
269265
}
270266

271267
export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
268+
const getDtraderText = () => (
269+
<NavCard
270+
aria_label="Dtrader"
271+
icon={() => <img src={DTrader} alt="" width="32" height="32" />}
272+
content={
273+
<Localize translate_text="A whole new trading experience on a powerful yet easy to use platform." />
274+
}
275+
title={<Localize translate_text="DTrader" />}
276+
onClick={onClick}
277+
to="/dtrader/"
278+
/>
279+
)
272280
return (
273281
<Flex>
274282
{!is_ppc && (
275283
<>
276-
<Flex direction="column" wrap="wrap" jc="flex-start">
284+
<Flex
285+
direction="column"
286+
wrap="wrap"
287+
jc="flex-start"
288+
style={{ boxShadow: 'inset -1px 0px 0px var(--color-grey-8)' }}
289+
>
277290
<StyledText>{localize('Trade types')}</StyledText>
278291
<NavCard
279292
aria_label="CFDs"
@@ -310,7 +323,6 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
310323
</Flex>
311324
</>
312325
)}
313-
<MarginDivider width="2px" height="100%" color="grey-8" />
314326
<Flex direction="column" wrap="wrap" jc="flex-start">
315327
<StyledText>{localize('Trading platforms')}</StyledText>
316328
<NavCard
@@ -351,57 +363,48 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
351363
/>
352364
</>
353365
</ROW>
366+
<UKEU>{getDtraderText()}</UKEU>
354367
</Flex>
355-
<Flex direction="column" wrap="wrap" jc="flex-start">
356-
<EmptySpace />
357-
<NavCard
358-
aria_label="Dtrader"
359-
icon={() => <img src={DTrader} alt="" width="32" height="32" />}
360-
content={
361-
<Localize translate_text="A whole new trading experience on a powerful yet easy to use platform." />
362-
}
363-
title={<Localize translate_text="DTrader" />}
364-
onClick={onClick}
365-
to="/dtrader/"
366-
/>
367-
<ROW>
368-
<>
369-
<NavCard
370-
aria_label="Deriv GO"
371-
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
372-
content={
373-
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
374-
}
375-
title={<Localize translate_text="Deriv GO" />}
376-
onClick={onClick}
377-
to="/landing/deriv-go/"
378-
/>
379-
<NavCard
380-
aria_label="DBot"
381-
icon={() => <img src={DBot} alt="" width="32" height="32" />}
382-
content={
383-
<Localize translate_text="Automated trading at your fingertips. No coding needed." />
384-
}
385-
title={<Localize translate_text="DBot" />}
386-
onClick={onClick}
387-
to="/dbot/"
388-
/>
389-
<NavCard
390-
aria_label="Binary Bot"
391-
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
392-
content={
393-
<Localize translate_text='Our classic "drag-and-drop" tool for creating trading bots, featuring pop-up trading charts, for advanced users.' />
394-
}
395-
title={<Localize translate_text="Binary Bot" />}
396-
to={binary_bot_url}
397-
external="true"
398-
target="_blank"
399-
onClick={onClick}
400-
otherLinkProps={{ rel: 'noopener noreferrer' }}
401-
/>
402-
</>
403-
</ROW>
404-
</Flex>
368+
<ROW>
369+
<Flex direction="column" wrap="wrap" jc="flex-start">
370+
<EmptySpace />
371+
372+
{getDtraderText()}
373+
<NavCard
374+
aria_label="Deriv GO"
375+
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
376+
content={
377+
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
378+
}
379+
title={<Localize translate_text="Deriv GO" />}
380+
onClick={onClick}
381+
to="/landing/deriv-go/"
382+
/>
383+
<NavCard
384+
aria_label="DBot"
385+
icon={() => <img src={DBot} alt="" width="32" height="32" />}
386+
content={
387+
<Localize translate_text="Automated trading at your fingertips. No coding needed." />
388+
}
389+
title={<Localize translate_text="DBot" />}
390+
onClick={onClick}
391+
to="/dbot/"
392+
/>
393+
<NavCard
394+
aria_label="Binary Bot"
395+
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
396+
content={
397+
<Localize translate_text='Our classic "drag-and-drop" tool for creating trading bots, featuring pop-up trading charts, for advanced users.' />
398+
}
399+
title={<Localize translate_text="Binary Bot" />}
400+
to={binary_bot_url}
401+
external="true"
402+
target="_blank"
403+
onClick={onClick}
404+
otherLinkProps={{ rel: 'noopener noreferrer' }}
405+
/>
406+
</Flex>
407+
</ROW>
405408
</Flex>
406409
)
407410
}

‎src/components/custom/platforms-dropdown.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const FadeInDown = keyframes`
2020
}
2121
`
2222
const NavDropdown = styled.div`
23-
width: ${(props) => (props.is_trade ? '90%' : 'auto')};
23+
width: auto;
2424
max-width: 1200px;
2525
left: ${(props) => (props.offset && !props.is_trade ? props.offset + 'px !important' : 'none')};
2626
position: absolute;

0 commit comments

Comments
 (0)