fix: subtasks (#4228)

konstantinosG-deriv · Konstantinos-Gk · web-flow · commit d2bffffcedd3 · 2023-02-22T21:15:32.000+06:00
Co-authored-by: Konstantinos-Gk &lt;konstantinos.gkagiannis@deriv.com&gt;
diff --git a/crowdin/messages.json b/crowdin/messages.json
@@ -68,6 +68,7 @@
   "80411232": "Keep your login details secure and <0>enable two-factor authentication</0> to prevent unauthorised usage of your account.",
   "81450871": "We couldn’t find that page",
   "83067481": "Our tracking site: t.deriv.com",
+  "83428444": "Start trading accumulators on Deriv",
   "84123624": "Partnership Programme | Deriv",
   "84402478": "Where do I find the blocks I need?",
   "84605906": "The Deriv MT5 Financial account offers you leverage to trade contracts for difference (CFDs) on forex, stocks, stock indices, commodities, synthetic indices, and cryptocurrencies.",
diff --git a/src/components/elements/full-width-multicolumn.tsx b/src/components/elements/full-width-multicolumn.tsx
@@ -77,6 +77,20 @@ const StyledTitle = styled(Header)`
         line-height: 30px;
     }
 `
+const StyledButtonContent = styled(Text)`
+    text-align: center;
+    margin-top: 1.6rem;
+    color: white;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 1.6rem;
+
+    @media ${device.tabletL} {
+        font-size: 14px;
+    }
+`
+
 const StyledTextContent = styled(Text)`
     text-align: center;
     margin-top: 1.6rem;
@@ -131,7 +145,7 @@ export const FullWidthMultiColumn = ({
                         })}
                     </ItemContainer>
                 ))}
-                {button_title && <StyledTextContent>{button_title}</StyledTextContent>}
+                {button_title && <StyledButtonContent>{button_title}</StyledButtonContent>}
                 {button_text && <Button onClick={handleSignup} label={button_text} primary />}
             </Flex>
         </StyledSectionContainer>
diff --git a/src/pages/trade-types/accumulators/_how-accumulators-works.tsx b/src/pages/trade-types/accumulators/_how-accumulators-works.tsx
@@ -55,25 +55,29 @@ const HowAccumulatorsWork = () => {
                     <CommonHeaderSection
                         subtitle_font_size="1.6rem"
                         font_weight="300"
+                        line_height="2.4rem"
                         subtitle="_t_When you open a position, barriers are created around the asset’s price. The upper and lower barriers are automatically calculated for every tick based on your chosen asset and accumulator value. If you close your position before either of the barriers is reached, you will make a profit._t_"
                     />
                     <CommonHeaderSection
                         subtitle_font_size="1.6rem"
                         margin_subtitle="2rem 0 4rem 0"
                         font_weight="300"
+                        line_height="2.4rem"
                         subtitle="_t_With each tick, your payout will increase based on the accumulator value you select, as long as the price change is within the barrier._t_"
                     />
                     <CommonHeaderSection
                         title="_t_Take profit_t_"
                         title_font_size="2.4rem"
                         subtitle_font_size="1.6rem"
+                        line_height="2.4rem"
                         margin_subtitle="2rem 0 0 0"
                         font_weight="300"
                         subtitle="_t_You can set a take profit or payout level. Your position will automatically close when your profit exceeds or reaches this amount._t_"
                     />
                     <CommonHeaderSection
                         subtitle_font_size="1.6rem"
                         margin_subtitle="2rem 0 4rem 0"
+                        line_height="2.4rem"
                         font_weight="300"
                         subtitle="_t_ Based on the number of ticks and the accumulator value, your potential profit may exceed your set amount multiple times._t_"
                     />
@@ -83,13 +87,15 @@ const HowAccumulatorsWork = () => {
                         subtitle_font_size="1.6rem"
                         margin_subtitle="2rem 0 4rem 0"
                         font_weight="300"
+                        line_height="2.4rem"
                         subtitle="_t_The maximum payout for every contract is limited and differs per asset. When the maximum payout is reached, the contract will be automatically closed._t_"
                     />
                     <CommonHeaderSection
                         title="_t_Maximum duration_t_"
                         title_font_size="2.4rem"
                         subtitle_font_size="1.6rem"
                         margin_subtitle="2rem 0 4rem 0"
+                        line_height="2.4rem"
                         font_weight="300"
                         subtitle="_t_The maximum duration for every contract is limited and differs according to the chosen accumulator value. When the maximum duration is reached, the contract will be automatically closed._t_"
                     />
diff --git a/src/pages/trade-types/accumulators/_what-are-accumulators.tsx b/src/pages/trade-types/accumulators/_what-are-accumulators.tsx
@@ -13,7 +13,7 @@ const WhatAreAccumulators = () => {
         <>
             <SectionContainer background="white" padding="8rem 0 4rem">
                 <SmallContainer direction="column" ai="flex-start">
-                    <Header as="h2" type="page-title" mb="1.2rem">
+                    <Header as="h2" type="heading-2" mb="1.2rem">
                         {localize('What are accumulators?')}
                     </Header>
                     <Text mb="4rem">
diff --git a/src/pages/trade-types/accumulators/index.tsx b/src/pages/trade-types/accumulators/index.tsx
@@ -11,6 +11,7 @@ import CommonHeaderSection from 'components/elements/common-header-section'
 import OptionsNavTab from 'pages/markets/components/sections/_options-nav-tab'
 import { localize, WithIntl } from 'components/localization'
 import { StepperView } from 'components/elements'
+import useHandleSignup from 'components/hooks/use-handle-signup'
 import useRegion from 'components/hooks/use-region'
 const HowAccumulatorsWork = Loadable(() => import('./_how-accumulators-works'))
 const AccumulatorsToTrade = Loadable(() => import('./_accumulators-to-trade'))
@@ -29,6 +30,7 @@ const ButtonContainer = styled.div`
 const Accumulators = () => {
     const { is_row } = useRegion()
     const [is_loaded, setLoaded] = useState(false)
+    const handleSignup = useHandleSignup()
 
     useEffect(() => {
         setLoaded(true)
@@ -57,7 +59,7 @@ const Accumulators = () => {
                 <AccumulatorsToTrade />
                 <SmallContainer direction="column" ai="flex-start">
                     <CommonHeaderSection
-                        title="_t_Start trading options on Deriv_t_"
+                        title="_t_Start trading accumulators on Deriv_t_"
                         title_font_size="3.2rem"
                         margin_title="15rem 0 7rem 0"
                     />
@@ -70,7 +72,7 @@ const Accumulators = () => {
                         third_step_subtitle="_t_Conveniently withdraw your funds through any of our supported withdrawal methods._t_"
                     />
                     <ButtonContainer>
-                        <Button label="Create free demo account" primary />
+                        <Button label="Create free demo account" onClick={handleSignup} primary />
                     </ButtonContainer>
                 </SmallContainer>
             </Layout>
