binary-com
diff --git a/‎crowdin/messages.json
Lines changed: 4 additions & 6 deletions b/‎crowdin/messages.json
Lines changed: 4 additions & 6 deletions
diff --git a/‎src/components/custom/_signup-public.tsx
Lines changed: 15 additions & 18 deletions b/‎src/components/custom/_signup-public.tsx
Lines changed: 15 additions & 18 deletions
diff --git a/‎src/components/elements/checkbox.tsx
Lines changed: 1 addition & 4 deletions b/‎src/components/elements/checkbox.tsx
Lines changed: 1 addition & 4 deletions
diff --git a/‎src/components/elements/full-width-multicolumn.tsx
Lines changed: 2 additions & 3 deletions b/‎src/components/elements/full-width-multicolumn.tsx
Lines changed: 2 additions & 3 deletions
diff --git a/‎src/components/form/input.tsx
Lines changed: 1 addition & 1 deletion b/‎src/components/form/input.tsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/images/svg/markets/forex/responsive.svg
Lines changed: 12 additions & 0 deletions b/‎src/images/svg/markets/forex/responsive.svg
Lines changed: 12 additions & 0 deletions
diff --git a/‎src/pages/markets/components/sections/_hero_derived_fx.tsx
Lines changed: 16 additions & 22 deletions b/‎src/pages/markets/components/sections/_hero_derived_fx.tsx
Lines changed: 16 additions & 22 deletions
diff --git a/‎src/pages/markets/components/sections/_other-markets.tsx
Lines changed: 9 additions & 17 deletions b/‎src/pages/markets/components/sections/_other-markets.tsx
Lines changed: 9 additions & 17 deletions
diff --git a/‎src/pages/markets/static/content/_commodities.tsx
Lines changed: 1 addition & 1 deletion b/‎src/pages/markets/static/content/_commodities.tsx
Lines changed: 1 addition & 1 deletion
@@ -519,7 +519,6 @@
   "704465777": "After making your payment, share the receipt with the seller via the chat feature in Deriv P2P.",
   "704532260": "Sign up with just your email. No credit card or minimum deposit required.",
   "706069088": "About Deriv",
-  "706240885": "These indices correspond to simulated markets with <0>constant volatilities of 150%, 200%, 250% and 300%.</0>",
   "710137133": "Apply now",
   "710468393": "As an existing <0>Binary.com</0> user, you won’t need to sign up. You’ll be able to log in to <1>Deriv.com</1> with your <0>Binary.com</0> credentials and trade with what’s in your <0>Binary.com</0> account.",
   "712547410": "total trade turnover",
@@ -815,7 +814,6 @@
   "1072277224": "Follow us",
   "1072571985": "If you created your Deriv account using Apple/Google/Facebook, try resetting your Apple/Google/Facebook password. After that, you should be able to log in to Deriv as usual.",
   "1074669784": "Make fast and secure deposits and withdrawals with this mobile-friendly solution for clients in Nigeria.",
-  "1077281998": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%, 200%, and 300%.",
   "1077779258": "General Motors Company",
   "1078303105": "Stop out",
   "1079537687": "Biogen Inc",
@@ -825,7 +823,6 @@
   "1084960586": "Disclose the terms of all contracts",
   "1088428939": "These indices correspond to financial markets with volatilities of 10% and 20%. One tick is generated for every tick of the corresponding forex pair.",
   "1094162624": "<0>High-Close:</0> When you purchase a ‘High-Close’ contract, your win or loss will be equal to the multiplier times the difference between the high and the close over the duration of the contract.",
-  "1094997218": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>10 (1s), 25 (1s), 50 (1s), 75 (1s), 100 (1s), 200 (1s), and 300 (1s)</0>.",
   "1097133380": "0.35",
   "1097188292": "Take profit level",
   "1098718347": "Know the margin impact on your CFD trading",
@@ -881,7 +878,6 @@
   "1178873929": "Our site can be filtered using a number of filtering systems available on the market which could be used to restrict one's access to our site.",
   "1179169693": "currentPL",
   "1179825750": "For forex, your commission is represented in the base currency (EUR in the above example).",
-  "1180514365": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%, 150%, 200%, 250% and 300%.",
   "1181506313": "Deriv P2P is a great app, I love it!",
   "1182198798": "For example, if you close your position at a certain point, your equity is the total of your account balance plus the profit or loss at that point. If the ratio of this to your currently used margin is lower than Deriv’s stop out level, stop out may be applied.",
   "1182470294": "Don't have a Deriv.com account yet?",
@@ -928,6 +924,7 @@
   "1229753077": "Got questions? Need help? Call or email a dedicated team of affiliate managers for all the answers.",
   "1230198893": "Deriv’s easy and free setup of DBot trader can automate your trading without writing codes. Create your own bot trader using our tutorials and guides!",
   "1234764728": "Asset Price is required",
+  "1236398277": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>150 (1s), and 250 (1s).</0>",
   "1237147454": "Trading platforms",
   "1240797431": "Start trading the world's most popular cryptocurrencies on Deriv, and take advantage of a highly volatile market with round-the-clock trading.",
   "1241426772": "<0>Margin = (volume × contract size × asset price) ÷ leverage</0>",
@@ -1017,6 +1014,7 @@
   "1363502727": "PnL for multipliers",
   "1363645836": "Derived FX",
   "1364296672": "We will price and settle all contracts accurately and fairly, based on reliable data feeds and without undue delay, so that customers can trust our prices throughout the website.",
+  "1364677622": "These indices correspond to simulated markets with <0>constant volatilities of 150%, and 250%.</0>",
   "1364947573": "Dtrader artboard",
   "1364958515": "Stocks",
   "1367358043": "<0>USD 200</0> Volume",
@@ -1587,6 +1585,7 @@
   "2050080282": "Affiliate & IB log in",
   "2051986867": "So you will require a swap charge of <0>0.24 USD</0> to keep the position open for one night.",
   "2053673142": "By pressing “Create demo account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy</0>.",
+  "2053957629": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>10 (1s), 25 (1s), 50 (1s), 75 (1s), 100 (1s), 150 (1s), and 250 (1s)</0>.",
   "2056079566": "Get our help",
   "2056339251": "15 - 10,000",
   "2057618836": "How to calculate stop loss and take profit level",
@@ -2626,8 +2625,7 @@
   "-1569008884": "Cryptocurrency contracts traded with multipliers have a time limit. It depends on the asset you are trading and appears on the Deriv Trader dashboard before you place a trade.",
   "-75787346": "<0>One tick</0> is generated <0>every two seconds</0> for volatility indices <0>10, 25, 50, 75, and 100</0>.",
   "-257478628": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>10 (1s), 25 (1s), 50 (1s), 75 (1s), and 100 (1s)</0>.",
-  "-1014166738": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>10 (1s), 25 (1s), 50 (1s), 75 (1s), 100 (1s), 150 (1s), 200 (1s), 250 (1s), and 300 (1s)</0>.",
-  "-1972084136": "<0>One tick</0> is generated <0>every second</0> for volatility indices <0>150 (1s), 200 (1s), 250 (1s), and 300 (1s).</0>",
+  "-547956392": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, 100%, 150%, and 250%.",
   "-1312740087": "<0>Higher/Lower:</0> Predict whether the exit spot will be higher or lower than a price target (the barrier) at the end of the contract period.",
   "-467543474": "<0>Matches/Differs:</0> Predict what number will be the last digit of the last tick of a contract.",
   "-12379677": "<0>Even/Odd:</0> Predict whether the last digit of the last tick of a contract will be an even number or an odd number.",
 
@@ -51,7 +51,8 @@ const query = graphql`
 `
 const StyledSectionContainer = styled(Box)`
     width: 100%;
-    padding: 80px 0;
+    padding-top: 80px;
+    padding-bottom: 140px;
     position: static;
     background-color: var(--color-white);
 
@@ -140,11 +141,7 @@ const InputWrapper = styled.div`
     line-height: 10px;
     font-weight: normal;
     margin-right: 1rem;
-    border-radius: 15px;
-
-    @media ${device.mobileL} {
-        max-width: 191px;
-    }
+    border-radius: 16px;
 `
 const InputGroup = styled.div`
     display: flex;
@@ -168,11 +165,11 @@ const EmailButton = styled(Button)<{ isChecked?: boolean }>`
     @media ${device.tabletL} {
         padding: 10px 16px;
         white-space: nowrap;
-        border-radius: 4px;
+        border-radius: 16px;
         min-width: unset;
         margin-left: 0;
         height: 40px;
-        width: 250px;
+        width: 273px;
     }
 `
 const SocialWrapper = styled(Flex)`
@@ -194,19 +191,19 @@ const MobileSocialWrapper = styled(SocialWrapper)`
 const SocialButton = styled(Button)`
     display: flex;
     padding: 0;
-    margin: 0 1rem;
     font-size: 12px;
     align-items: center;
     justify-content: center;
-    width: 10.6rem;
+    width: 11.6rem;
     height: 4rem;
     background-color: white;
     border: 1px solid var(--color-grey-7);
     border-radius: 100px;
 
-    @media ${device.tabletL} {
+    @media ${device.laptop} {
         justify-content: center;
-        width: 10rem;
+        width: 33%;
+        margin: 0 0.6rem;
     }
 `
 const StyledHeader = styled(Header)<{ position?: string }>`
@@ -419,10 +416,10 @@ const SignupPublic = ({
                                             value={email}
                                             background="white"
                                             tablet_background="green-1"
-                                            inputColor="grey-5"
+                                            inputColor="black-3"
                                             input_background="grey-8"
-                                            label_focus_color="grey-7"
-                                            label_color="black-3"
+                                            label_focus_color="grey-5"
+                                            label_color="grey-5"
                                             labelSize="16px"
                                             labelTop="1.2rem"
                                             label={localize('Email address')}
@@ -562,10 +559,10 @@ const SignupPublic = ({
                                             value={email}
                                             background="white"
                                             tablet_background="green-1"
-                                            inputColor="grey-5"
+                                            inputColor="black-3"
                                             input_background="grey-8"
-                                            label_focus_color="grey-7"
-                                            label_color="black-3"
+                                            label_focus_color="grey-5"
+                                            label_color="grey-5"
                                             label={localize('Email address')}
                                             placeholder={'[email protected]'}
                                             handleError={clearEmail}
 
@@ -22,12 +22,9 @@ type IconProps = {
 }
 
 const CheckboxContainer = styled.div`
+    margin-left: 1.5rem;
     display: inline-block;
     vertical-align: text-bottom;
-
-    @media ${device.mobileL} {
-        margin-left: 1.5rem;
-    }
 `
 
 const Icon = styled.svg<IconProps>`
 
@@ -24,11 +24,10 @@ const Item = styled(Flex)`
 
     img {
         width: 34px;
-        margin-bottom: 10px;
     }
 
     @media ${device.mobileL} {
-        max-width: 80%;
+        max-width: 60%;
         gap: 6px;
 
         ${Text} {
@@ -118,7 +117,7 @@ const StyledTextContent = styled(Text)`
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
-    font-family: Ubuntu, sans-serif;
+    font-family: IBM Plex Sans, sans-serif;
     margin-bottom: 1.6rem;
 
     @media ${device.tabletL} {
 
@@ -124,7 +124,7 @@ const StyledInput = styled.input<StyledInputProps>`
     border: 1px solid var(--color-grey-5);
     border-radius: 15px;
     @media ${device.tabletL} {
-        width: 250px;
+        width: 273px;
         height: 100%;
         border-radius: 15px;
 
 
@@ -69,40 +69,40 @@ const handleBg = ({
     }
 }
 
-const StyledButton = styled.div`
+const StyledButton = styled.div<BackgroundWrapperProps>`
     margin-top: 5rem;
     margin-left: 10vw;
 
-    @media (min-width: 2110px) {
-        margin-left: 20vw;
+    @media (min-width: 2080px) {
+        margin-left: ${(props) => (props.is_rtl ? '54vw' : '20vw')};
     }
 
     @media (min-width: 1201px) and (max-width: 1340px) {
-        margin-left: 5vw;
+        margin-left: ${(props) => (props.is_rtl ? '60vw' : '5vw')};
     }
-    @media (min-width: 1520px) and (max-width: 2080px) {
-        margin-left: 16vw;
+    @media (min-width: 1340px) and (max-width: 2080px) {
+        margin-left: ${(props) => (props.is_rtl ? '57vw' : '16vw')};
     }
     @media ${device.laptopM} {
         margin-left: 0;
         margin-top: 0;
     }
 `
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<BackgroundWrapperProps>`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
     margin-left: 10vw;
 
-    @media (min-width: 2110px) {
-        margin-left: 20vw;
+    @media (min-width: 2080px) {
+        margin-left: ${(props) => (props.is_rtl ? '54vw' : '20vw')};
     }
     @media (min-width: 1201px) and (max-width: 1340px) {
-        margin-left: 5vw;
+        margin-left: ${(props) => (props.is_rtl ? '60vw' : '5vw')};
     }
-    @media (min-width: 1520px) and (max-width: 2080px) {
-        margin-left: 16vw;
+    @media (min-width: 1340px) and (max-width: 2080px) {
+        margin-left: ${(props) => (props.is_rtl ? '57vw' : '16vw')};
     }
 
     @media ${device.laptopM} {
@@ -137,7 +137,6 @@ const BackgroundWrapper = styled.div<BackgroundWrapperProps>`
     background-repeat: no-repeat;
     background-position: right;
     height: 63rem;
-    transform: ${(props) => (props.is_rtl ? 'scaleX(-1)' : 'none')};
 
     @media (max-width: 580px) {
         background-size: 136rem;
@@ -160,13 +159,8 @@ const BackgroundWrapper = styled.div<BackgroundWrapperProps>`
         background-size: 227rem;
     }
 
-    & > ${StyledContainer} {
-        transform: ${(props) => (!props.is_rtl ? 'none' : 'scaleX(-1)')};
-        margin-right: 8rem;
-    }
-    & > ${StyledButton} {
-        transform: ${(props) => (!props.is_rtl ? 'none' : 'scaleX(-1)')};
-        margin-right: 8rem;
+    @media (min-width: 1200px) and (max-width: 1350px) {
+        background-size: ${(props) => (props.is_rtl ? '132rem' : '165rem')};
     }
 `
 const MarketSubHeader = styled.div`
@@ -230,15 +224,15 @@ export const DerivedFXHero = ({
                     is_commodities={is_commodities}
                     is_rtl={is_rtl}
                 >
-                    <StyledContainer>
+                    <StyledContainer is_rtl={is_rtl}>
                         <StyledHeader as="h1" align="center">
                             <Localize translate_text={title} />
                         </StyledHeader>
                         <MarketSubHeader color="white">
                             <Localize translate_text={description} />
                         </MarketSubHeader>
                     </StyledContainer>
-                    <StyledButton>
+                    <StyledButton is_rtl={is_rtl}>
                         {is_logged_in ? (
                             <Button onClick={handleGetTrading} label="_t_Get trading_t_" primary />
                         ) : (
 
@@ -243,30 +243,25 @@ const MarketsWrapper = styled(Flex)`
 const StyledHeader = styled(Header)`
     padding: auto;
     text-align: center;
+    margin: 9rem auto;
 
     @media ${device.tabletL} {
         padding-left: 0;
-        margin: auto;
         text-align: center;
         width: 300px;
-        margin-bottom: 15rem;
+        margin: 2rem auto;
     }
 `
 const MobileCardContainer = styled(Flex)`
     div:first-child {
         margin-top: 0;
     }
 `
-const StyledSectionContainer = styled(SectionContainer)`
-    padding-bottom: 100px;
-    margin: auto;
-`
 
-const StyledCarousel = styled(SectionContainer)`
+const StyledCarousel = styled.div`
     height: 40rem;
-    padding: 4rem 0;
     @media ${device.tabletL} {
-        height: 140rem;
+        height: 160rem;
     }
 `
 
@@ -315,12 +310,12 @@ const OtherMarkets = ({ except }: OtherMarketsProps) => {
     }
 
     return (
-        <StyledSectionContainer id="markets-list">
+        <>
+            <StyledHeader as="h2" type="section-title" align="start">
+                {localize('Other markets you might be interested in')}
+            </StyledHeader>
             <Desktop>
                 <MarketsWrapper tablet_jc="center">
-                    <StyledHeader as="h2" type="section-title" align="start">
-                        {localize('Other markets you might be interested in')}
-                    </StyledHeader>
                     <StyledCarousel>
                         <Carousel has_autoplay autoplay_interval={4000} {...settings}>
                             {filteredMarkets.map((market) =>
@@ -335,9 +330,6 @@ const OtherMarkets = ({ except }: OtherMarketsProps) => {
                 </MarketsWrapper>
             </Desktop>
             <Mobile>
-                <StyledHeader as="h2" type="section-title" align="start">
-                    {localize('Other markets you might be interested in')}
-                </StyledHeader>
                 <StyledCarousel>
                     <MobileCardContainer direction="column">
                         {filteredMarkets.map((market) =>
@@ -348,7 +340,7 @@ const OtherMarkets = ({ except }: OtherMarketsProps) => {
                     </MobileCardContainer>
                 </StyledCarousel>
             </Mobile>
-        </StyledSectionContainer>
+        </>
     )
 }
 
 
@@ -3,7 +3,7 @@ import { Localize } from 'components/localization'
 import FriendlySupport from 'images/svg/markets/forex/smart.svg'
 import MetalAndOil from 'images/svg/markets/precious-metals-and-oils-new.svg'
 import NoCommission from 'images/svg/markets/no-commission-new.svg'
-import ResponsiveWebsite from 'images/svg/markets/forex/platforms.svg'
+import ResponsiveWebsite from 'images/svg/markets/forex/responsive.svg'
 import VariableSpreads from 'images/svg/markets/variable-spreads-new.svg'
 
 export type CommoditiesContent = {
Original file line number	Diff line number	Diff line change
`@@ -22,12 +22,9 @@ type IconProps = {`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	const CheckboxContainer = styled.div`
	`25`	`+ margin-left: 1.5rem;`
`25`	`26`	`display: inline-block;`
`26`	`27`	`vertical-align: text-bottom;`
`27`		`-`
`28`		`- @media ${device.mobileL} {`
`29`		`- margin-left: 1.5rem;`
`30`		`- }`
`31`	`28`	`
`32`	`29`
`33`	`30`	const Icon = styled.svg<IconProps>`