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 conditions', + link_text = localize('I agree to the <0>terms and conditions'), }) => { 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 = () => { +