From aa1f072a02e6aed43e36442598523177aeae5174 Mon Sep 17 00:00:00 2001
From: Kevin <liem.kevin@yahoo.com>
Date: Wed, 18 Nov 2020 14:54:41 +0800
Subject: [PATCH 1/9] feat: update minor styling and add crash/boom, step index

---
 src/pages/markets/_hero.js                  | 21 +++++--
 src/pages/markets/_other-markets.js         |  4 +-
 src/pages/markets/_why-trade.js             |  2 +-
 src/pages/markets/index.js                  |  2 +-
 src/pages/markets/synthetic/_multipliers.js | 61 ++++++++++++++++++++-
 5 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/pages/markets/_hero.js b/src/pages/markets/_hero.js
index e5c30c810ea..0841342d00c 100644
--- a/src/pages/markets/_hero.js
+++ b/src/pages/markets/_hero.js
@@ -8,6 +8,19 @@ import { Container } from 'components/containers'
 import { useLazyVideo } from 'components/hooks/lazy-video'
 import device from 'themes/device'
 
+const MarketHeader = styled(Header)`
+    font-size: 64px;
+    @media ${device.tabletL} {
+        font-size: 40px !important;
+    }
+`
+
+const MarketSubHeader = styled(Header)`
+    font-size: 24px;
+    @media ${device.tabletL} {
+        font-size: 18px !important;
+    }
+`
 const BackgroundWrapper = styled.div`
     position: relative;
     height: 60rem;
@@ -68,10 +81,10 @@ export const Hero = () => {
                 <source data-src={Globe2} type="video/webm" />
             </Video>
             <StyledContainer direction="column">
-                <Header as="h1" color="white" lh="1.15" align="center">
+                <MarketHeader as="h1" color="white" lh="1.15" align="center">
                     {localize('Markets to trade on Deriv')}
-                </Header>
-                <Header
+                </MarketHeader>
+                <MarketSubHeader
                     as="h4"
                     color="white"
                     lh="1.5"
@@ -83,7 +96,7 @@ export const Hero = () => {
                     {localize(
                         'Get the guidance you need to start trading on our platform. Browse through all the markets that we offer, learn about our trade types, and gain insight on how to make smarter trading decisions.',
                     )}
-                </Header>
+                </MarketSubHeader>
             </StyledContainer>
         </BackgroundWrapper>
     )
diff --git a/src/pages/markets/_other-markets.js b/src/pages/markets/_other-markets.js
index 081a9aa9227..c5405482fe8 100644
--- a/src/pages/markets/_other-markets.js
+++ b/src/pages/markets/_other-markets.js
@@ -206,9 +206,9 @@ const StyledHeader = styled(Header)`
         max-width: unset;
     }
     @media ${device.tabletL} {
-        max-width: 28.2rem;
+        max-width: 32rem;
         margin: 0 auto;
-        font-size: 4rem;
+        font-size: 24px;
         margin-bottom: 2rem;
     }
 `
diff --git a/src/pages/markets/_why-trade.js b/src/pages/markets/_why-trade.js
index 72423874357..d8eeade3673 100644
--- a/src/pages/markets/_why-trade.js
+++ b/src/pages/markets/_why-trade.js
@@ -26,7 +26,7 @@ const Item = styled(Flex)`
 `
 const ItemContainer = styled(Box)`
     display: flex;
-    margin: 3.2rem 0;
+    margin: 4rem 0;
     flex-direction: row;
     justify-content: space-between;
     max-width: 140.4rem;
diff --git a/src/pages/markets/index.js b/src/pages/markets/index.js
index 4a4aed7924c..fd729b65794 100644
--- a/src/pages/markets/index.js
+++ b/src/pages/markets/index.js
@@ -117,7 +117,7 @@ const Item = styled.div`
     z-index: 10;
 
     h4 {
-        color: var(--color-red);
+        color: var(--color-black);
         opacity: ${(props) => (props.name === props.active_tab ? '1' : '0.32')};
         font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
diff --git a/src/pages/markets/synthetic/_multipliers.js b/src/pages/markets/synthetic/_multipliers.js
index 679bb8a14c1..da1e9884ac1 100644
--- a/src/pages/markets/synthetic/_multipliers.js
+++ b/src/pages/markets/synthetic/_multipliers.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import MarketsAccordion from '../_markets_accordion.js'
 import AvailablePlatforms from '../_available-platforms.js'
-import { ContinuousIndices } from '../sub-markets/_submarkets.js'
+import { ContinuousIndices, CrashBoom, StepIndices } from '../sub-markets/_submarkets.js'
 import { Text } from 'components/elements'
 import { SectionContainer, Flex, CssGrid, Show } from 'components/containers'
 import { localize, Localize } from 'components/localization'
@@ -95,6 +95,28 @@ const ContinuousIndicesDetails = () => (
         </Text>
     </DetailsContainer>
 )
+
+const CrashBoomDetails = () => (
+    <DetailsContainer>
+        <Text>
+            <Localize
+                translate_text="With these indices, there is an average of one drop (crash) or one spike (boom) in prices that occur in a <0>series of 1000 or 500 ticks</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+    </DetailsContainer>
+)
+const StepIndicesDetails = () => (
+    <DetailsContainer>
+        <Text>
+            <Localize
+                translate_text="With these indices, there is an equal probability of up/down movement in a price series with a <0>fixed step size of 0.1</0>."
+                components={[<strong key={0} />]}
+            />
+        </Text>
+    </DetailsContainer>
+)
+
 const Multipliers = () => {
     return (
         <SectionContainer padding="4rem 0 8rem 0">
@@ -126,6 +148,43 @@ const Multipliers = () => {
                         )}
                         renderDetails={ContinuousIndicesDetails}
                     />
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Row jc="flex-start" ai="center">
+                                <Col max_width="13.2rem">
+                                    <Show.Desktop>
+                                        <title>Codestin Search App</title>
+                                    </Show.Desktop>
+                                    <Show.Mobile>
+                                        <title>Codestin Search App</title>
+                                    </Show.Mobile>
+                                </Col>
+                                <MarketsList>
+                                    <CrashBoom />
+                                </MarketsList>
+                            </Row>
+                        )}
+                        renderDetails={CrashBoomDetails}
+                    />
+                    <MarketsAccordion
+                        renderTitle={() => (
+                            <Row jc="flex-start" ai="center">
+                                <Col max_width="13.2rem">
+                                    <title>Codestin Search App</title>
+                                </Col>
+                                <MarketsList>
+                                    <StepIndices />
+                                </MarketsList>
+                            </Row>
+                        )}
+                        renderDetails={StepIndicesDetails}
+                    />
                 </MarketsWrapper>
                 <Show.Eu>
                     <Text mt="1.6rem" color="grey-5" size="var(--text-size-xs)">

From ac31451a47becc32012068a9cd5d330c5597ebd9 Mon Sep 17 00:00:00 2001
From: Kevin <kevin@binary.com>
Date: Thu, 19 Nov 2020 12:07:59 +0800
Subject: [PATCH 2/9] fix: qa issues #1

---
 src/components/custom/_signup-public.js |  12 ++-
 src/components/custom/_simple-steps.js  |   4 +
 src/components/form/input.js            | 109 ++++++++++++++----------
 src/components/layout/footer.js         |  16 ++--
 src/pages/markets/_why-trade.js         |   1 +
 5 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/src/components/custom/_signup-public.js b/src/components/custom/_signup-public.js
index ccd8ba45105..e719cc8bb0f 100644
--- a/src/components/custom/_signup-public.js
+++ b/src/components/custom/_signup-public.js
@@ -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;
@@ -98,7 +99,10 @@ const InputGroup = styled.div`
 `
 const EmailButton = styled(Button)`
     margin-left: 2rem;
-    height: 4rem;
+    min-width: 105px;
+    height: 40px;
+    padding: 10px 28px;
+    border-radius: 4px;
     @media ${device.tabletL} {
         width: auto;
         font-size: 1.4rem;
@@ -255,6 +259,8 @@ const SignupPublic = ({
                                         inputBackground="grey-8"
                                         labelFocusColor="grey-7"
                                         labelColor="black-3"
+                                        labelSize="16px"
+                                        labelTop="1.2rem"
                                         label={localize('Email')}
                                         placeholder={'example@mail.com'}
                                         handleError={clearEmail}
@@ -277,7 +283,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"
@@ -368,7 +374,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"
diff --git a/src/components/custom/_simple-steps.js b/src/components/custom/_simple-steps.js
index 28e6b50c3f5..58f06878648 100644
--- a/src/components/custom/_simple-steps.js
+++ b/src/components/custom/_simple-steps.js
@@ -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;
     }
diff --git a/src/components/form/input.js b/src/components/form/input.js
index 71c4706c650..229ab22534f 100644
--- a/src/components/form/input.js
+++ b/src/components/form/input.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { Text } from '../elements'
@@ -10,17 +10,15 @@ const RelativeWrapper = styled.div`
     position: relative;
 `
 const InputWrapper = styled.div`
+    /* prettier-ignore */
     width: 100%;
     border: ${(props) => props.border || '1px solid var(--color-grey-2)'};
     border-radius: 4px;
-
     @media ${device.tabletL} {
         height: 5rem;
     }
-
     &:hover {
         border-color: var(--color-grey-5);
-
         & > label {
             color: var(--color-${(props) => props.labelHoverColor || 'black-3'});
         }
@@ -28,7 +26,6 @@ const InputWrapper = styled.div`
     &:focus-within {
         border-color: ${(props) => props.focusBorder || 'var(--color-green)'};
     }
-
     ${(props) =>
         !props.error &&
         css`
@@ -38,7 +35,6 @@ const InputWrapper = styled.div`
         props.error &&
         css`
             border-color: var(--color-red-1) !important;
-
             & > label {
                 color: var(--color-red-1) !important;
             }
@@ -52,7 +48,6 @@ const StyledError = styled.img`
     height: 1.6rem;
     width: 1.6rem;
     cursor: pointer;
-
     @media ${device.tablet} {
         right: 2rem;
         top: 1.6rem;
@@ -63,29 +58,26 @@ const StyledInput = styled.input`
     /* prettier-ignore */
     background: var(--color-${(props) => props.inputBackground || 'none'});
     color: var(--color-${(props) => props.inputColor || 'black'});
-    font-size: 16px;
+    font-size: var(--text-size-xs);
     padding: 1rem 1rem 1rem 0.8rem;
     width: 100%;
     display: block;
     border: none;
     border-radius: 4px;
-
     @media ${device.tabletL} {
         height: 100%;
-
         & ~ label {
             font-size: 1.75rem;
             top: 1.5rem;
         }
     }
-
     @media ${device.mobileL} {
+        font-size: 14px;
         & ~ label {
             font-size: 1.5rem;
             top: 1.75rem;
         }
     }
-
     &::placeholder {
         opacity: 0;
         transition: opacity 0.25s;
@@ -93,16 +85,12 @@ const StyledInput = styled.input`
     }
     &:focus {
         outline: none;
-
         & ~ label {
             transform: translate(-0.6rem, -2rem) scale(0.7);
-
             /* prettier-ignore */
             color: var(--color-${(props) => props.labelFocusColor || 'green'});
-
             /* prettier-ignore */
             background-color: var(--color-${(props) => props.background || 'grey-1'});
-
             @media ${device.mobileL} {
                 transform: translate(-0.6rem, -20px) scale(0.7);
             }
@@ -114,13 +102,19 @@ const StyledInput = styled.input`
         }
     }
     &:valid {
-        & ~ label {
-            transform: translate(-0.6rem, -2rem) scale(0.7);
-            color: var(--color-black-3);
-
-            /* prettier-ignore */
-            background-color: var(--color-${(props) => props.background || 'grey-1'});
-        }
+        ${(props) =>
+            props.value &&
+            css`
+                & ~ 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'});
+                }
+            `}
     }
 `
 
@@ -155,32 +149,52 @@ const Input = ({
     background,
     tabletBackground,
     handleError,
+    maxLength,
     ...props
-}) => (
-    <RelativeWrapper>
-        <InputWrapper
-            border={border}
-            focusBorder={focusBorder}
-            labelHoverColor={labelHoverColor}
-            error={error}
-            className="input-wrapper"
-        >
-            <StyledInput id={id} background={background} {...props} />
-            <StyledLabel
-                tabletBackground={tabletBackground}
+}) => {
+    let current_input = useRef(null)
+
+    return (
+        <RelativeWrapper>
+            <InputWrapper
+                border={border}
+                focusBorder={focusBorder}
+                labelHoverColor={labelHoverColor}
                 error={error}
-                htmlFor={id}
-                labelColor={labelColor}
+                className="input-wrapper"
             >
-                {label}
-            </StyledLabel>
-        </InputWrapper>
-        <ErrorMessages lh="1.4" align="left" color="red-1">
-            {error}
-        </ErrorMessages>
-        {error && <StyledError src={CrossIcon} alt="error icon" onClick={handleError} />}
-    </RelativeWrapper>
-)
+                <StyledInput
+                    id={id}
+                    background={background}
+                    maxLength={maxLength}
+                    error={error}
+                    {...props}
+                    ref={(ip) => (current_input = ip)}
+                />
+                <StyledLabel
+                    tabletBackground={tabletBackground}
+                    error={error}
+                    htmlFor={id}
+                    labelColor={labelColor}
+                >
+                    {label}
+                </StyledLabel>
+            </InputWrapper>
+            <ErrorMessages lh="1.4" align="left" color="red-1">
+                {error}
+            </ErrorMessages>
+            {error && (
+                <StyledError
+                    src={CrossIcon}
+                    alt="error icon"
+                    onClick={() => {
+                        handleError(current_input)
+                    }}
+                />
+            )}
+        </RelativeWrapper>
+    )
+}
 
 Input.propTypes = {
     background: PropTypes.string,
@@ -193,8 +207,9 @@ Input.propTypes = {
     label: PropTypes.string,
     labelColor: PropTypes.string,
     labelHoverColor: PropTypes.string,
+    maxLength: PropTypes.string,
     tabletBackground: PropTypes.string,
     width: PropTypes.string,
 }
 
-export default Input
+export default Input
\ No newline at end of file
diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index f95a26f25b3..e83cfef49db 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -343,13 +343,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>
@@ -490,13 +490,13 @@ const Footer = () => {
                                             </Link>
                                         </Item>
                                         <Item>
-                                            <Link to="/partners">
-                                                {localize('Partnership programmes')}
+                                            <Link to="/why-choose-us">
+                                                {localize('Why choose us?')}
                                             </Link>
                                         </Item>
                                         <Item>
-                                            <Link to="/why-choose-us">
-                                                {localize('Why choose us?')}
+                                            <Link to="/partners">
+                                                {localize('Partnership programmes')}
                                             </Link>
                                         </Item>
                                         <Item>
diff --git a/src/pages/markets/_why-trade.js b/src/pages/markets/_why-trade.js
index d8eeade3673..3fadf113f80 100644
--- a/src/pages/markets/_why-trade.js
+++ b/src/pages/markets/_why-trade.js
@@ -58,6 +58,7 @@ const StyledSection = styled(SectionContainer)`
     }
 `
 const StyledButton = styled(LinkButton)`
+    border-radius: 4px;
     @media ${device.tabletL} {
         font-size: 1.75rem;
         padding: 1.25rem 4.75rem;

From 972a517c6e743f8988de5ecec51612c68f50a4ad Mon Sep 17 00:00:00 2001
From: Kevin <kevin@binary.com>
Date: Thu, 19 Nov 2020 12:11:37 +0800
Subject: [PATCH 3/9] fix: suthesh commend, remove important

---
 src/pages/markets/_hero.js | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/pages/markets/_hero.js b/src/pages/markets/_hero.js
index 0841342d00c..003e41811b2 100644
--- a/src/pages/markets/_hero.js
+++ b/src/pages/markets/_hero.js
@@ -8,19 +8,6 @@ import { Container } from 'components/containers'
 import { useLazyVideo } from 'components/hooks/lazy-video'
 import device from 'themes/device'
 
-const MarketHeader = styled(Header)`
-    font-size: 64px;
-    @media ${device.tabletL} {
-        font-size: 40px !important;
-    }
-`
-
-const MarketSubHeader = styled(Header)`
-    font-size: 24px;
-    @media ${device.tabletL} {
-        font-size: 18px !important;
-    }
-`
 const BackgroundWrapper = styled.div`
     position: relative;
     height: 60rem;
@@ -50,11 +37,9 @@ const StyledContainer = styled(Container)`
         padding: 12.5rem 0;
 
         h1 {
-            font-size: var(--text-size-xl);
             text-align: left;
         }
         h4 {
-            font-size: 3rem;
             text-align: left;
         }
     }
@@ -71,6 +56,20 @@ const Video = styled.video`
         transform: translate(-50%, -50%) scale(1.5);
     }
 `
+
+const MarketHeader = styled(Header)`
+    font-size: 64px;
+    @media ${device.tabletL} {
+        font-size: 40px;
+    }
+`
+
+const MarketSubHeader = styled(Header)`
+    font-size: 24px;
+    @media ${device.tabletL} {
+        font-size: 18px;
+    }
+`
 export const Hero = () => {
     useLazyVideo()
 

From 04a3b2006f526b5e91e65e3fbac9d516a46a0b30 Mon Sep 17 00:00:00 2001
From: Kevin <kevin@binary.com>
Date: Thu, 19 Nov 2020 16:58:20 +0800
Subject: [PATCH 4/9] fix: qa comments #2

---
 src/components/custom/_signup-public.js | 11 ++++++++---
 src/components/form/input.js            |  4 ++++
 src/pages/markets/index.js              |  1 -
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/custom/_signup-public.js b/src/components/custom/_signup-public.js
index e719cc8bb0f..ee09a7aafbf 100644
--- a/src/components/custom/_signup-public.js
+++ b/src/components/custom/_signup-public.js
@@ -98,7 +98,7 @@ const InputGroup = styled.div`
     margin-top: 3.5rem;
 `
 const EmailButton = styled(Button)`
-    margin-left: 2rem;
+    margin-left: 1rem;
     min-width: 105px;
     height: 40px;
     padding: 10px 28px;
@@ -121,7 +121,8 @@ 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);
@@ -239,7 +240,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 />
                             <StyledHeader as="h4" weight="normal" size="1.6rem">
@@ -270,6 +274,7 @@ const SignupPublic = ({
                                         autoComplete="off"
                                         required
                                         border="unset"
+                                        height="40px"
                                         focusBorder="var(--color-grey-7)"
                                     />
                                 </InputWrapper>
diff --git a/src/components/form/input.js b/src/components/form/input.js
index 229ab22534f..58a1956e9cc 100644
--- a/src/components/form/input.js
+++ b/src/components/form/input.js
@@ -60,6 +60,7 @@ 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;
@@ -140,6 +141,7 @@ const StyledLabel = styled.label`
 
 const Input = ({
     label,
+    height,
     border,
     focusBorder,
     labelHoverColor,
@@ -168,6 +170,7 @@ const Input = ({
                     background={background}
                     maxLength={maxLength}
                     error={error}
+                    height={height}
                     {...props}
                     ref={(ip) => (current_input = ip)}
                 />
@@ -203,6 +206,7 @@ Input.propTypes = {
     error: PropTypes.string,
     focusBorder: PropTypes.string,
     handleError: PropTypes.func,
+    height: PropTypes.any,
     id: PropTypes.string,
     label: PropTypes.string,
     labelColor: PropTypes.string,
diff --git a/src/pages/markets/index.js b/src/pages/markets/index.js
index fd729b65794..b4377bd31f8 100644
--- a/src/pages/markets/index.js
+++ b/src/pages/markets/index.js
@@ -118,7 +118,6 @@ const Item = styled.div`
 
     h4 {
         color: var(--color-black);
-        opacity: ${(props) => (props.name === props.active_tab ? '1' : '0.32')};
         font-weight: ${(props) => (props.name === props.active_tab ? 'bold' : 'normal')};
     }
     @media ${device.tabletL} {

From 12fbe9375640bef7ae8cea81eca10a3ac7e47e84 Mon Sep 17 00:00:00 2001
From: Kevin <liem.kevin@yahoo.com>
Date: Fri, 20 Nov 2020 14:57:01 +0800
Subject: [PATCH 5/9] fix: crash boom alignment

---
 src/pages/markets/synthetic/_margin.js      | 11 +++++++++--
 src/pages/markets/synthetic/_multipliers.js | 12 ++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/pages/markets/synthetic/_margin.js b/src/pages/markets/synthetic/_margin.js
index b96089e0901..458cc0111b5 100644
--- a/src/pages/markets/synthetic/_margin.js
+++ b/src/pages/markets/synthetic/_margin.js
@@ -79,6 +79,13 @@ const DetailsContainer = styled(Flex)`
         }
     }
 `
+
+const CrashText = styled(Text)`
+    width: 690px;
+    @media ${device.tabletL} {
+        width: 100%;
+    }
+`
 const VolatilityIndicesDetails = () => (
     <DetailsContainer>
         <Text>
@@ -102,12 +109,12 @@ const VolatilityIndicesDetails = () => (
 )
 const CrashBoomDetails = () => (
     <DetailsContainer>
-        <Text>
+        <CrashText>
             <Localize
                 translate_text="With these indices, there is an average of one drop (crash) or one spike (boom) in prices that occur in a <0>series of 1000 or 500 ticks</0>."
                 components={[<strong key={0} />]}
             />
-        </Text>
+        </CrashText>
     </DetailsContainer>
 )
 const StepIndicesDetails = () => (
diff --git a/src/pages/markets/synthetic/_multipliers.js b/src/pages/markets/synthetic/_multipliers.js
index da1e9884ac1..e550bb77878 100644
--- a/src/pages/markets/synthetic/_multipliers.js
+++ b/src/pages/markets/synthetic/_multipliers.js
@@ -74,6 +74,14 @@ const DetailsContainer = styled(Flex)`
         }
     }
 `
+
+const CrashText = styled(Text)`
+    width: 690px;
+    @media ${device.tabletL} {
+        width: 100%;
+    }
+`
+
 const ContinuousIndicesDetails = () => (
     <DetailsContainer>
         <Text>
@@ -98,12 +106,12 @@ const ContinuousIndicesDetails = () => (
 
 const CrashBoomDetails = () => (
     <DetailsContainer>
-        <Text>
+        <CrashText>
             <Localize
                 translate_text="With these indices, there is an average of one drop (crash) or one spike (boom) in prices that occur in a <0>series of 1000 or 500 ticks</0>."
                 components={[<strong key={0} />]}
             />
-        </Text>
+        </CrashText>
     </DetailsContainer>
 )
 const StepIndicesDetails = () => (

From f79d0b58e894a72937d5a545f08c44703ccdd132 Mon Sep 17 00:00:00 2001
From: Kevin <liem.kevin@yahoo.com>
Date: Mon, 23 Nov 2020 17:22:57 +0800
Subject: [PATCH 6/9] fix: qa comments

---
 src/components/custom/_signup-public.js | 46 ++++++++++++++++---------
 src/themes/variables.js                 |  2 ++
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/custom/_signup-public.js b/src/components/custom/_signup-public.js
index ee09a7aafbf..3d47eb7eca8 100644
--- a/src/components/custom/_signup-public.js
+++ b/src/components/custom/_signup-public.js
@@ -104,11 +104,12 @@ const EmailButton = styled(Button)`
     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)`
@@ -130,6 +131,8 @@ const SocialButton = styled(Button)`
     height: 4rem;
     margin: 0 0.8rem;
     @media ${device.tabletL} {
+        width: 114px;
+        height: 48px;
         justify-content: center;
         align-items: center;
     }
@@ -149,10 +152,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;
@@ -259,7 +269,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"
@@ -288,7 +298,7 @@ const SignupPublic = ({
                                 </EmailButton>
                             </InputGroup>
                             <SocialWrapper jc="unset" ai="center">
-                                <StyledText>{localize('or sign in with')}</StyledText>
+                                <StyledText>{localize('Or sign in with')}</StyledText>
                                 <SocialButton
                                     onClick={handleSocialSignup}
                                     provider="facebook"
@@ -353,7 +363,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"
@@ -379,30 +389,32 @@ const SignupPublic = ({
                                 </EmailButton>
                             </InputGroup>
                             <SocialWrapper jc="unset" ai="center">
-                                <StyledText>{localize('or sign in 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" />
+                                        <img src={Google} alt="google" />
                                     </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" />
+                                        <img src={Facebook} alt="facebook" />
                                     </span>
+                                    <StyledSpan>Facebook</StyledSpan>
                                 </SocialButton>
                             </SocialWrapper>
                         </div>
diff --git a/src/themes/variables.js b/src/themes/variables.js
index 78526e04090..31b815c34d7 100644
--- a/src/themes/variables.js
+++ b/src/themes/variables.js
@@ -49,6 +49,7 @@ const Variables = css`
         --color-grey-29: #edeeef;
         --color-grey-30: #f5f7fa;
         --color-grey-31: #f8fafc;
+        --color-grey-32: #8e9190;
         --color-green: #85acb0;
         --color-blue: #4c76be;
         --color-blue-2: #365899;
@@ -58,6 +59,7 @@ const Variables = css`
         --color-orange: #ff6544;
         --color-green-1: #bccdce;
         --color-green-2: #e2ebec;
+        --color-white: white;
 
         /* sizes */
         --text-size-xxs: 1.2rem;

From de999e13ac06ccd77fdca5fa5f7a59f47ef765a7 Mon Sep 17 00:00:00 2001
From: Kevin <liem.kevin@yahoo.com>
Date: Wed, 25 Nov 2020 11:53:29 +0800
Subject: [PATCH 7/9] fix: footer - add risk warning

---
 src/components/layout/footer.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index e83cfef49db..ef7aca4d8a2 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -744,7 +744,10 @@ const Footer = () => {
                                 <DisclaimerParagraph no_margin>
                                     <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." />
+                                            <Localize
+                                                translate_text="<0>RISK WARNING:</0> 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} />]}
+                                            />
                                         </DisclaimerParagraph>
                                         <DisclaimerParagraph>
                                             <Localize
@@ -755,13 +758,17 @@ const Footer = () => {
                                                         target="_blank"
                                                         to="/responsible-trading/"
                                                     />,
+                                                    <strong key={1} />,
                                                 ]}
                                             />
                                         </DisclaimerParagraph>
                                     </Show.NonEU>
                                     <Show.Eu>
                                         <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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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." />
+                                            <Localize
+                                                translate_text="<0>RISK WARNING:</0> 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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} />]}
+                                            />
                                         </DisclaimerParagraph>
                                         <DisclaimerParagraph>
                                             <Localize
@@ -787,7 +794,10 @@ const Footer = () => {
                             <Show.Mobile>
                                 <Show.Eu>
                                     <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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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." />
+                                        <Localize
+                                            translate_text="<0>RISK WARNING:</0> 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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} />]}
+                                        />
                                     </DisclaimerParagraph>
                                     <DisclaimerParagraph>
                                         <Localize
@@ -811,7 +821,7 @@ const Footer = () => {
                                 <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."
+                                            translate_text="<0>RISK WARNING:</0> 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} />]}
                                         />
                                     </DisclaimerParagraph>

From 6fd90d25cc35809e516e7684e6082b05fd5cb10e Mon Sep 17 00:00:00 2001
From: Kevin <liem.kevin@yahoo.com>
Date: Wed, 25 Nov 2020 13:48:47 +0800
Subject: [PATCH 8/9] fix: remove risk warning

---
 src/components/layout/footer.js | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/layout/footer.js b/src/components/layout/footer.js
index ef7aca4d8a2..3d4d6f663c7 100644
--- a/src/components/layout/footer.js
+++ b/src/components/layout/footer.js
@@ -744,10 +744,7 @@ const Footer = () => {
                                 <DisclaimerParagraph no_margin>
                                     <Show.NonEU>
                                         <DisclaimerParagraph no_margin>
-                                            <Localize
-                                                translate_text="<0>RISK WARNING:</0> 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
@@ -765,10 +762,7 @@ const Footer = () => {
                                     </Show.NonEU>
                                     <Show.Eu>
                                         <DisclaimerParagraph no_margin>
-                                            <Localize
-                                                translate_text="<0>RISK WARNING:</0> 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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
@@ -794,10 +788,7 @@ const Footer = () => {
                             <Show.Mobile>
                                 <Show.Eu>
                                     <DisclaimerParagraph no_margin>
-                                        <Localize
-                                            translate_text="<0>RISK WARNING:</0> 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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. 74% of retail investor accounts lose money when trading CFDs with Deriv Investments (Europe) Limited. 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
@@ -820,10 +811,7 @@ const Footer = () => {
                                 </Show.Eu>
                                 <Show.NonEU>
                                     <DisclaimerParagraph no_margin>
-                                        <Localize
-                                            translate_text="<0>RISK WARNING:</0> 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

From b57865259d938b5ff8363f9cc6a0f6b344a7cc46 Mon Sep 17 00:00:00 2001
From: Kevin <kevin@regentmarkets.com>
Date: Fri, 4 Dec 2020 18:11:36 +0800
Subject: [PATCH 9/9] redeploy: vercel