Replaced list of credits topup options with big label in settings.

Telegram/Resources/langs/lang.strings

@@ -2414,6 +2414,8 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_credits_summary_history_entry_inner_in" = "In-App Purchase";
 "lng_credits_summary_balance" = "Balance";
 "lng_credits_more_options" = "More Options";
+"lng_credits_balance_me" = "your balance";
+"lng_credits_buy_button" = "Buy More Stars";
 "lng_credits_gift_button" = "Gift Stars to Friends";
 "lng_credits_box_out_title" = "Confirm Your Purchase";
 "lng_credits_box_out_sure#one" = "Do you want to buy **\"{text}\"** in **{bot}** for **{count} Star**?";

Telegram/SourceFiles/boxes/gift_credits_box.cpp

@@ -123,7 +123,8 @@ void GiftCreditsBox(
 		box->verticalLayout(),
 		peer,
 		0,
-		[=] { gifted(); box->uiShow()->hideLayer(); });
+		[=] { gifted(); box->uiShow()->hideLayer(); },
+		tr::lng_credits_summary_options_subtitle());
 
 	box->setPinnedToBottomContent(
 		object_ptr<Ui::VerticalLayout>(box));

Telegram/SourceFiles/payments/ui/payments_reaction_box.cpp

@@ -30,7 +30,8 @@ namespace Settings {
 [[nodiscard]] not_null<Ui::RpWidget*> AddBalanceWidget(
 	not_null<Ui::RpWidget*> parent,
 	rpl::producer<uint64> balanceValue,
-	bool rightAlign);
+	bool rightAlign,
+	rpl::producer<float64> opacityValue = nullptr);
 } // namespace Settings
 
 namespace Ui {

Telegram/SourceFiles/settings/settings_credits.cpp

@@ -40,6 +40,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/wrap/vertical_layout.h"
 #include "window/window_session_controller.h"
 #include "styles/style_credits.h"
+#include "styles/style_giveaway.h"
 #include "styles/style_info.h"
 #include "styles/style_layers.h"
 #include "styles/style_premium.h"
@@ -350,20 +351,87 @@ void Credits::setupContent() {
 			Ui::StartFireworks(_parent);
 		}
 	};
-	const auto self = _controller->session().user();
-	FillCreditOptions(_controller->uiShow(), content, self, 0, paid);
-	{
-		Ui::AddSkip(content);
-		const auto giftButton = AddButtonWithIcon(
+	Ui::AddSkip(content);
+	Ui::AddSkip(content);
+	const auto balanceLine = content->add(
+		object_ptr<Ui::CenterWrap<>>(
+			content,
+			object_ptr<Ui::RpWidget>(content)))->entity();
+	const auto balanceIcon = CreateSingleStarWidget(
+		balanceLine,
+		st::creditsSettingsBigBalance.style.font->height);
+	const auto balanceAmount = Ui::CreateChild<Ui::FlatLabel>(
+		balanceLine,
+		_controller->session().credits().balanceValue(
+		) | rpl::map(Lang::FormatCountDecimal),
+		st::creditsSettingsBigBalance);
+	balanceAmount->sizeValue() | rpl::start_with_next([=] {
+		balanceLine->resize(
+			balanceIcon->width()
+				+ st::creditsSettingsBigBalanceSkip
+				+ balanceAmount->textMaxWidth(),
+			balanceIcon->height());
+	}, balanceLine->lifetime());
+	balanceLine->widthValue() | rpl::start_with_next([=] {
+		balanceAmount->moveToRight(0, 0);
+	}, balanceLine->lifetime());
+	Ui::AddSkip(content);
+	content->add(
+		object_ptr<Ui::CenterWrap<>>(
+			content,
+			object_ptr<Ui::FlatLabel>(
+				content,
+				tr::lng_credits_balance_me(),
+				st::infoTopBar.subtitle)));
+	Ui::AddSkip(content);
+	Ui::AddSkip(content);
+	Ui::AddSkip(content);
+
+	const auto button = content->add(
+		object_ptr<Ui::RoundButton>(
+			content,
+			tr::lng_credits_buy_button(),
+			st::creditsSettingsBigBalanceButton),
+		st::boxRowPadding);
+	button->setTextTransform(Ui::RoundButton::TextTransform::NoTransform);
+	button->setClickedCallback([=, show = _controller->uiShow()] {
+		show->show(Box([=](not_null<Ui::GenericBox*> box) {
+			box->setStyle(st::giveawayGiftCodeBox);
+			box->setWidth(st::boxWideWidth);
+			box->setTitle(tr::lng_credits_summary_options_subtitle());
+			const auto inner = box->verticalLayout();
+			const auto self = show->session().user();
+			FillCreditOptions(show, inner, self, 0, paid, nullptr);
+
+			const auto button = box->addButton(tr::lng_close(), [=] {
+				box->closeBox();
+			});
+			const auto buttonWidth = st::boxWideWidth
+				- rect::m::sum::h(st::giveawayGiftCodeBox.buttonPadding);
+			button->widthValue() | rpl::filter([=] {
+				return (button->widthNoMargins() != buttonWidth);
+			}) | rpl::start_with_next([=] {
+				button->resizeToWidth(buttonWidth);
+			}, button->lifetime());
+		}));
+	});
+
+	Ui::AddSkip(content);
+
+	const auto gift = content->add(
+		object_ptr<Ui::RoundButton>(
 			content,
 			tr::lng_credits_gift_button(),
-			st::settingsButtonLightNoIcon);
-		Ui::AddSkip(content);
-		Ui::AddDivider(content);
-		giftButton->setClickedCallback([=] {
-			Ui::ShowGiftCreditsBox(_controller, paid);
-		});
-	}
+			st::creditsSettingsBigBalanceButtonGift),
+		st::boxRowPadding);
+	gift->setTextTransform(Ui::RoundButton::TextTransform::NoTransform);
+	gift->setClickedCallback([=, controller = _controller] {
+		Ui::ShowGiftCreditsBox(controller, paid);
+	});
+
+	Ui::AddSkip(content);
+	Ui::AddSkip(content);
+	Ui::AddDivider(content);
 
 	setupSubscriptions(content);
 	setupHistory(content);
@@ -422,7 +490,12 @@ QPointer<Ui::RpWidget> Credits::createPinnedToTop(
 		const auto balance = AddBalanceWidget(
 			content,
 			_controller->session().credits().balanceValue(),
-			true);
+			true,
+			content->heightValue() | rpl::map([=](int height) {
+				const auto ratio = float64(height - content->minimumHeight())
+					/ (content->maximumHeight() - content->minimumHeight());
+				return (1. - ratio / 0.35);
+			}));
 		_controller->session().credits().load(true);
 		rpl::combine(
 			balance->sizeValue(),

Telegram/SourceFiles/settings/settings_credits_graphics.cpp

@@ -398,7 +398,8 @@ void FillCreditOptions(
 		not_null<Ui::VerticalLayout*> container,
 		not_null<PeerData*> peer,
 		int minimumCredits,
-		Fn<void()> paid) {
+		Fn<void()> paid,
+		rpl::producer<QString> subtitle) {
 	const auto options = container->add(
 		object_ptr<Ui::SlideWrap<Ui::VerticalLayout>>(
 			container,
@@ -415,9 +416,9 @@ void FillCreditOptions(
 		while (content->count()) {
 			delete content->widgetAt(0);
 		}
-		Ui::AddSubsectionTitle(
-			content,
-			tr::lng_credits_summary_options_subtitle());
+		if (subtitle) {
+			Ui::AddSubsectionTitle(content, std::move(subtitle));
+		}
 
 		const auto buttons = content->add(
 			object_ptr<Ui::VerticalLayout>(content));
@@ -570,29 +571,41 @@ void FillCreditOptions(
 not_null<Ui::RpWidget*> AddBalanceWidget(
 		not_null<Ui::RpWidget*> parent,
 		rpl::producer<uint64> balanceValue,
-		bool rightAlign) {
+		bool rightAlign,
+		rpl::producer<float64> opacityValue) {
+	struct State final {
+		QImage star;
+		float64 opacity = 1.0;
+		Ui::Text::String label;
+		Ui::Text::String count;
+	};
 	const auto balance = Ui::CreateChild<Balance>(parent);
-	const auto balanceStar = balance->lifetime().make_state<QImage>(
-		Ui::GenerateStars(st::creditsBalanceStarHeight, 1));
-	const auto starSize = balanceStar->size() / style::DevicePixelRatio();
-	const auto label = balance->lifetime().make_state<Ui::Text::String>(
+	const auto state = balance->lifetime().make_state<State>();
+	state->star = QImage(Ui::GenerateStars(st::creditsBalanceStarHeight, 1));
+	const auto starSize = state->star.size() / style::DevicePixelRatio();
+	state->label = Ui::Text::String(
 		st::defaultTextStyle,
 		tr::lng_credits_summary_balance(tr::now));
-	const auto count = balance->lifetime().make_state<Ui::Text::String>(
+	state->count = Ui::Text::String(
 		st::semiboldTextStyle,
 		tr::lng_contacts_loading(tr::now));
-	const auto diffBetweenStarAndCount = count->style()->font->spacew;
+	if (opacityValue) {
+		std::move(opacityValue) | rpl::start_with_next([=](float64 value) {
+			state->opacity = value;
+		}, balance->lifetime());
+	}
+	const auto diffBetweenStarAndCount = state->count.style()->font->spacew;
 	const auto resize = [=] {
 		balance->resize(
 			std::max(
-				label->maxWidth(),
-				count->maxWidth()
+				state->label.maxWidth(),
+				state->count.maxWidth()
 					+ starSize.width()
 					+ diffBetweenStarAndCount),
-			label->style()->font->height + starSize.height());
+			state->label.style()->font->height + starSize.height());
 	};
 	std::move(balanceValue) | rpl::start_with_next([=](uint64 value) {
-		count->setText(
+		state->count.setText(
 			st::semiboldTextStyle,
 			Lang::FormatCountToShort(value).string);
 		balance->setBalance(value);
@@ -602,32 +615,33 @@ not_null<Ui::RpWidget*> AddBalanceWidget(
 	) | rpl::start_with_next([=] {
 		auto p = QPainter(balance);
 
+		p.setOpacity(state->opacity);
 		p.setPen(st::boxTextFg);
 
-		label->draw(p, {
+		state->label.draw(p, {
 			.position = QPoint(
-				rightAlign ? (balance->width() - label->maxWidth()) : 0,
+				rightAlign ? (balance->width() - state->label.maxWidth()) : 0,
 				0),
 			.availableWidth = balance->width(),
 		});
-		count->draw(p, {
+		state->count.draw(p, {
 			.position = QPoint(
 				(rightAlign
-					? (balance->width() - count->maxWidth())
+					? (balance->width() - state->count.maxWidth())
 					: (starSize.width() + diffBetweenStarAndCount)),
-				label->minHeight()
-					+ (starSize.height() - count->minHeight()) / 2),
+				state->label.minHeight()
+					+ (starSize.height() - state->count.minHeight()) / 2),
 			.availableWidth = balance->width(),
 		});
 		p.drawImage(
 			(rightAlign
 				? (balance->width()
-					- count->maxWidth()
+					- state->count.maxWidth()
 					- starSize.width()
 					- diffBetweenStarAndCount)
 				: 0),
-			label->minHeight(),
-			*balanceStar);
+			state->label.minHeight(),
+			state->star);
 	}, balance->lifetime());
 	return balance;
 }
@@ -1696,7 +1710,8 @@ void SmallBalanceBox(
 		box->verticalLayout(),
 		show->session().user(),
 		credits - show->session().credits().balance(),
-		[=] { show->session().credits().load(true); });
+		[=] { show->session().credits().load(true); },
+		tr::lng_credits_summary_options_subtitle());
 
 	content->setMaximumHeight(st::creditsLowBalancePremiumCoverHeight);
 	content->setMinimumHeight(st::infoLayerTopBarHeight);

Telegram/SourceFiles/settings/settings_credits_graphics.h

@@ -58,12 +58,14 @@ void FillCreditOptions(
 	not_null<Ui::VerticalLayout*> container,
 	not_null<PeerData*> peer,
 	int minCredits,
-	Fn<void()> paid);
+	Fn<void()> paid,
+	rpl::producer<QString> subtitle);
 
 [[nodiscard]] not_null<Ui::RpWidget*> AddBalanceWidget(
 	not_null<Ui::RpWidget*> parent,
 	rpl::producer<uint64> balanceValue,
-	bool rightAlign);
+	bool rightAlign,
+	rpl::producer<float64> opacityValue = nullptr);
 
 void AddWithdrawalWidget(
 	not_null<Ui::VerticalLayout*> container,

Telegram/SourceFiles/ui/boxes/peer_qr_box.cpp

@@ -302,7 +302,7 @@ not_null<Ui::RpWidget*> PrepareQrWidget(
 		divider->resize(container->width(), result->height());
 		result->moveToLeft((container->width() - result->width()) / 2, 0);
 		topWidget->setVisible(userpicToggled);
-		topWidget->moveToLeft(0, -std::numeric_limits<int>::min());
+		topWidget->moveToLeft(0, std::numeric_limits<int>::min());
 		topWidget->raise();
 
 		aboutLabel->raise();

Telegram/SourceFiles/ui/effects/credits.style

@@ -11,6 +11,23 @@ using "ui/widgets/widgets.style";
 using "ui/effects/premium.style";
 using "settings/settings.style";
 
+creditsSettingsBigBalance: FlatLabel(defaultFlatLabel) {
+	style: TextStyle(defaultTextStyle) {
+		font: font(24px semibold);
+	}
+}
+creditsSettingsBigBalanceSkip: 4px;
+creditsSettingsBigBalanceButton: RoundButton(defaultActiveButton) {
+	height: 42px;
+	textTop: 12px;
+	style: semiboldTextStyle;
+}
+creditsSettingsBigBalanceButtonGift: RoundButton(defaultLightButton) {
+	height: 42px;
+	textTop: 12px;
+	style: defaultTextStyle;
+}
+
 creditsPremiumCover: PremiumCover(defaultPremiumCover) {
 	about: FlatLabel(userPremiumCoverAbout) {
 		textFg: boxTitleFg;