Mitra/DPROD-2964/Fix font issue changing in sign up page (#6566)

* fix: 🐛 fix font issue changing in sign up page

* fix: 🐛 import the css

* fix: 🐛 fix content font

* fix: 🐛 change font

* fix: 🐛 change font to small

* fix: 🐛 change font with css

src/features/pages/signup/form-container/index.tsx

@@ -1,19 +1,22 @@
 import React from 'react'
-import { signup_form_container, signup_form_line, link_text } from '../signup.module.scss'
+import {
+    signup_form_container,
+    signup_form_line,
+    link_text,
+    sign_up_header,
+    sign_up_content,
+} from '../signup.module.scss'
 import FormSocialButtons from './form-social-buttons'
 import SignUpPageForm from './signup-page-form'
 import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
 import { Localize } from 'components/localization'
 import Link from 'features/components/atoms/link'
 import useRegion from 'components/hooks/use-region'
-import useBreakpoints from 'components/hooks/use-breakpoints'
 
 const SignUpFormContainer = () => {
     const { is_eu } = useRegion()
 
-    const { is_mobile_or_tablet } = useBreakpoints()
-
     const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf`
 
     return (
@@ -29,12 +32,12 @@ const SignUpFormContainer = () => {
             }}
             className={signup_form_container}
         >
-            <Typography.Heading size={is_mobile_or_tablet ? 'small' : 'xs'}>
+            <Typography.Heading className={sign_up_header}>
                 <Localize translate_text="_t_Join over 2.5 million traders_t_" />
             </Typography.Heading>
 
             <SignUpPageForm />
-            <Typography.Paragraph textcolor="secondary" size={is_mobile_or_tablet ? 'small' : 'xs'}>
+            <Typography.Paragraph textcolor="secondary" className={sign_up_content}>
                 <Localize
                     translate_text="_t_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>._t_"
                     components={[

src/features/pages/signup/signup.module.scss

@@ -16,6 +16,14 @@
     background-color: $color-grey-7;
 }
 
+.sign_up_header {
+    font-size: 24px;
+}
+
+.sign_up_content {
+    font-size: 12px;
+}
+
 .signup_login_redirect {
     cursor: pointer;
 }