diff --git a/src/components/custom/_agreement-label.js b/src/components/custom/_agreement-label.js
index abe5d393b48..4eb6ac3ecc3 100644
--- a/src/components/custom/_agreement-label.js
+++ b/src/components/custom/_agreement-label.js
@@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Checkbox, LocalizedLinkText } from 'components/elements'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
import device from 'themes/device.js'
const CheckboxSpan = styled.span`
@@ -17,7 +17,7 @@ const AgreementLabel = ({
isChecked,
color,
link_path = 'terms_and_conditions',
- link_text = 'I agree to the <0>terms and conditions0>',
+ link_text = localize('I agree to the <0>terms and conditions0>'),
}) => {
const handleChange = (event) => {
handleChangeCheckbox(event)
diff --git a/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js b/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js
deleted file mode 100644
index 7d09cc1d50a..00000000000
--- a/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { Checkbox, LocalizedLinkText } from 'components/elements'
-import { Localize } from 'components/localization'
-import device from 'themes/device.js'
-
-const CheckboxSpan = styled.span`
- font-size: var(--text-size-xs);
- color: ${(props) => (props.color ? props.color : 'black')};
-
- a {
- font-weight: 700;
- }
- @media ${device.tabletL} {
- font-size: 1.75rem;
- }
-`
-const AgreementLabel = ({ handleChangeCheckbox, isChecked, color }) => {
- const handleChange = (event) => {
- handleChangeCheckbox(event)
- }
-
- return (
-
- )
-}
-
-AgreementLabel.propTypes = {
- color: PropTypes.string,
- handleChangeCheckbox: PropTypes.func,
- isChecked: PropTypes.bool,
-}
-
-export default AgreementLabel
diff --git a/src/pages/academy/blog/components/side-subscription-banner/index.js b/src/pages/academy/blog/components/side-subscription-banner/index.js
index bb327c5f13a..ff8307c2beb 100644
--- a/src/pages/academy/blog/components/side-subscription-banner/index.js
+++ b/src/pages/academy/blog/components/side-subscription-banner/index.js
@@ -1,11 +1,11 @@
import React, { useEffect } from 'react'
import styled from 'styled-components'
import { TextWrapper } from '../../../../blog/components/_common'
-import AgreementLabel from './_agreement-label'
+import AgreementLabel from 'components/custom/_agreement-label'
import validation from 'common/validation'
import { localize, Localize } from 'components/localization'
import { Button } from 'components/form'
-import { Header, Text } from 'components/elements'
+import { Header, Text, LocalizedLinkText } from 'components/elements'
import { Flex } from 'components/containers'
import device from 'themes/device.js'
import { DerivStore } from 'store'
@@ -17,7 +17,7 @@ const SubscribeBannerWrapper = styled(Flex)`
padding: 32px 16px;
background: var(--color-grey-42);
border-radius: 8px;
- margin-top: 40px;
+ margin: 40px 0;
@media ${device.tabletL} {
max-width: 328px;
padding: 32px 18.5px;
@@ -87,6 +87,15 @@ const EmailButton = styled(Button)`
width: auto;
}
`
+const AdditionalFlex = styled.div`
+ margin-top: 10px;
+ font-size: var(--text-size-xs);
+ line-height: 20px;
+ color: ${(props) => (props.color ? props.color : 'black')};
+ @media ${device.tabletL} {
+ font-size: 1.75rem;
+ }
+`
const ErrorMessages = styled(Text)`
font-size: 11px;
min-height: 16px;
@@ -346,11 +355,30 @@ const ArticleEmailBanner = () => {
{localize('Subscribe')}
{submit_status === true && (
-
+ <>
+
+
+ ,
+ ]}
+ />
+
+ >
)}
diff --git a/src/pages/blog/components/_subscribe.js b/src/pages/blog/components/_subscribe.js
index 06ad27b6dd6..683ff7b8c44 100644
--- a/src/pages/blog/components/_subscribe.js
+++ b/src/pages/blog/components/_subscribe.js
@@ -405,7 +405,7 @@ const Subscribe = () => {
isChecked={is_checked}
handleChangeCheckbox={handleChange}
color="#C2C2C2"
- link_text="Send me marketing materials too!"
+ link_text={localize('Send me marketing materials too!')}
/>
{
})}
+
@@ -449,6 +451,7 @@ const PreviewPage = () => {
+