Mayuran/DPROD-3852/text align accumulator

themes/gatsby-theme-deriv/src/features/components/molecules/traders-hub-cta-button/index.tsx

@@ -1,17 +1,35 @@
 import React, { ComponentPropsWithRef, forwardRef } from 'react'
 import { Button } from '@deriv/quill-design'
-import { LabelPairedGrid2LgBoldIcon } from '@deriv/quill-icons'
+import { LabelPairedGrid2MdBoldIcon, LabelPairedGrid2LgBoldIcon } from '@deriv/quill-icons'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import { handleRedirectToTradersHub } from 'components/custom/utils'
 import { Localize } from 'components/localization'
 
-type TradersHubCtaButtonProps = ComponentPropsWithRef<typeof Button>
+type TradersHubCtaButtonProps = ComponentPropsWithRef<typeof Button> & {
+    is_accumulator_mobile?: boolean
+}
 
 const TradersHubCtaButton = forwardRef<HTMLButtonElement, TradersHubCtaButtonProps>(
-    ({ className, ...rest }, ref) => {
+    ({ is_accumulator_mobile = false, className, ...rest }, ref) => {
         const [is_logged_in] = useAuthCheck()
         const handleSignup = useHandleSignup()
+        if (is_logged_in && is_accumulator_mobile) {
+            return (
+                <Button
+                    ref={ref}
+                    size="lg"
+                    onClick={handleRedirectToTradersHub}
+                    className={className}
+                    {...rest}
+                >
+                    <div className="relative">
+                        <LabelPairedGrid2MdBoldIcon className="absolute top-100" fill="#ffffff" />
+                        <Localize translate_text="_t_Trader's Hub_t_" />
+                    </div>
+                </Button>
+            )
+        }
 
         if (is_logged_in) {
             return (

themes/gatsby-theme-deriv/src/features/components/organisms/what-are-digital-options/accumulator/index.tsx

@@ -51,10 +51,16 @@ const WhatAreDigitalOptions = ({
                         className="flex flex-col items-center gap-400 md:!flex-row md:justify-center"
                         id={uniq}
                     >
+                        <TradersHubCtaButton
+                            className="w-full hidden md:!flex md:!w-auto "
+                            size="lg"
+                        />
+
                         <TradersHubCtaButton
                             ref={entryRef}
-                            className="w-full md:!w-auto"
+                            className="w-full flex md:hidden"
                             size="lg"
+                            is_accumulator_mobile
                         />
                         <Button
                             size="lg"