diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /browser/components/pocket/content/panels/js/components/Signup | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/pocket/content/panels/js/components/Signup')
-rw-r--r-- | browser/components/pocket/content/panels/js/components/Signup/Signup.jsx | 79 | ||||
-rw-r--r-- | browser/components/pocket/content/panels/js/components/Signup/Signup.scss | 19 |
2 files changed, 98 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx new file mode 100644 index 0000000000..7e628c0ad5 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx @@ -0,0 +1,79 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import React from "react"; +import Header from "../Header/Header"; +import Button from "../Button/Button"; + +function Signup(props) { + const { locale, pockethost, utmSource, utmCampaign, utmContent } = props; + const utmParams = `utm_source=${utmSource}${ + utmCampaign && utmContent + ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}` + : `` + }`; + return ( + <div className="stp_panel_container"> + <div className="stp_panel stp_panel_signup"> + <Header> + <Button + style="secondary" + url={`https://${pockethost}/login?${utmParams}`} + source="log_in" + > + <span data-l10n-id="pocket-panel-signup-login" /> + </Button> + </Header> + <hr /> + {locale?.startsWith("en") ? ( + <> + <div className="stp_signup_content_wrapper"> + <h3 + className="header_medium" + data-l10n-id="pocket-panel-signup-cta-a-fix" + /> + <p data-l10n-id="pocket-panel-signup-cta-b-updated" /> + </div> + <div className="stp_signup_content_wrapper"> + <hr /> + </div> + <div className="stp_signup_content_wrapper"> + <div className="stp_signup_img_rainbow_reader" /> + <h3 className="header_medium"> + Get thought-provoking article recommendations + </h3> + <p> + Find stories that go deep into a subject or offer a new + perspective. + </p> + </div> + </> + ) : ( + <div className="stp_signup_content_wrapper"> + <h3 + className="header_large" + data-l10n-id="pocket-panel-signup-cta-a-fix" + /> + <p data-l10n-id="pocket-panel-signup-cta-b-short" /> + <strong> + <p data-l10n-id="pocket-panel-signup-cta-c-updated" /> + </strong> + </div> + )} + <hr /> + <span className="stp_button_wide"> + <Button + style="primary" + url={`https://${pockethost}/ff_signup?${utmParams}`} + source="sign_up_1" + > + <span data-l10n-id="pocket-panel-button-activate" /> + </Button> + </span> + </div> + </div> + ); +} + +export default Signup; diff --git a/browser/components/pocket/content/panels/js/components/Signup/Signup.scss b/browser/components/pocket/content/panels/js/components/Signup/Signup.scss new file mode 100644 index 0000000000..21b34ddcb6 --- /dev/null +++ b/browser/components/pocket/content/panels/js/components/Signup/Signup.scss @@ -0,0 +1,19 @@ +body { + &.stp_signup_body { + overflow: hidden; + } +} + +.stp_panel_signup { + .stp_signup_content_wrapper { + margin: 12px 0 20px; + } + .stp_signup_img_rainbow_reader { + background: url(../img/rainbow-reader.svg) bottom center no-repeat; + background-size: contain; + height: 72px; + width: 82px; + float: inline-end; + margin-inline-start: 16px; + } +} |