diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js index 7c1055d8cac4..6b413f9a0ae0 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js @@ -683,7 +683,7 @@ const ProtonScreenActionButtons = props => { } return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { - className: "action-buttons" + className: `action-buttons ${content.dual_action_buttons ? "dual-action-buttons" : ""}` }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, { text: (_content$primary_butt = content.primary_button) === null || _content$primary_butt === void 0 ? void 0 : _content$primary_butt.label }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css index f911e8625aaf..dfd2cecf1308 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css @@ -415,6 +415,19 @@ body[lwt-newtab-brighttext] { .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label { vertical-align: middle; } +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons button { + padding: 8px 16px; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta { + display: block; + position: relative; + bottom: unset; + margin-block: 5px 0; +} +.onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.dual-action-buttons .secondary-cta .secondary { + margin-inline: 0; + font-size: 13px; +} .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta { position: absolute; bottom: -30px; diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss index 5c13f5a74733..f3d3a9404581 100644 --- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss +++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss @@ -321,6 +321,25 @@ body { } } + &.dual-action-buttons { + + button { + padding: 8px 16px; + } + + .secondary-cta { + display: block; + position: relative; + bottom: unset; + margin-block: 5px 0; + + .secondary { + margin-inline: 0; + font-size: 13px; + } + } + } + .secondary-cta { position: absolute; bottom: -30px; diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx index da34ce81cb3e..9d8fc697bc3c 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx +++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx @@ -62,7 +62,11 @@ export const ProtonScreenActionButtons = props => { } return ( -
+