Improve confirm join box design.

Telegram/SourceFiles/api/api_chat_invite.cpp

@@ -104,6 +104,8 @@ ConfirmInviteBox::ConfirmInviteBox(
 , _submit(std::move(submit))
 , _title(this, st::confirmInviteTitle)
 , _status(this, st::confirmInviteStatus)
+, _about(this, st::confirmInviteAbout)
+, _aboutRequests(this, st::confirmInviteStatus)
 , _participants(GetParticipants(_session, data))
 , _isChannel(data.is_channel() && !data.is_megagroup())
 , _requestApprove(data.is_request_needed()) {
@@ -127,6 +129,18 @@ ConfirmInviteBox::ConfirmInviteBox(
 	}();
 	_title->setText(title);
 	_status->setText(status);
+	if (const auto v = qs(data.vabout().value_or_empty()); !v.isEmpty()) {
+		_about->setText(v);
+	} else {
+		_about.destroy();
+	}
+	if (_requestApprove) {
+		_aboutRequests->setText(_isChannel
+			? tr::lng_group_request_about_channel(tr::now)
+			: tr::lng_group_request_about(tr::now));
+	} else {
+		_aboutRequests.destroy();
+	}
 
 	const auto photo = _session->data().processPhoto(data.vphoto());
 	if (!photo->isNull()) {
@@ -182,7 +196,7 @@ void ConfirmInviteBox::prepare() {
 
 	auto newHeight = st::confirmInviteStatusTop + _status->height() + st::boxPadding.bottom();
 	if (!_participants.empty()) {
-		int skip = (st::boxWideWidth - 4 * st::confirmInviteUserPhotoSize) / 5;
+		int skip = (st::confirmInviteUsersWidth - 4 * st::confirmInviteUserPhotoSize) / 5;
 		int padding = skip / 2;
 		_userWidth = (st::confirmInviteUserPhotoSize + 2 * padding);
 		int sumWidth = _participants.size() * _userWidth;
@@ -199,6 +213,16 @@ void ConfirmInviteBox::prepare() {
 
 		newHeight += st::confirmInviteUserHeight;
 	}
+	if (_about) {
+		const auto padding = st::confirmInviteAboutPadding;
+		_about->resizeToWidth(st::boxWideWidth - padding.left() - padding.right());
+		newHeight += padding.top() + _about->height() + padding.bottom();
+	}
+	if (_aboutRequests) {
+		const auto padding = st::confirmInviteAboutRequestsPadding;
+		_aboutRequests->resizeToWidth(st::boxWideWidth - padding.left() - padding.right());
+		newHeight += padding.top() + _aboutRequests->height() + padding.bottom();
+	}
 	setDimensions(st::boxWideWidth, newHeight);
 }
 
@@ -206,6 +230,19 @@ void ConfirmInviteBox::resizeEvent(QResizeEvent *e) {
 	BoxContent::resizeEvent(e);
 	_title->move((width() - _title->width()) / 2, st::confirmInviteTitleTop);
 	_status->move((width() - _status->width()) / 2, st::confirmInviteStatusTop);
+	auto bottom = _status->y()
+		+ _status->height()
+		+ st::boxPadding.bottom()
+		+ (_participants.empty() ? 0 : st::confirmInviteUserHeight);
+	if (_about) {
+		const auto padding = st::confirmInviteAboutPadding;
+		_about->move((width() - _about->width()) / 2, bottom + padding.top());
+		bottom += padding.top() + _about->height() + padding.bottom();
+	}
+	if (_aboutRequests) {
+		const auto padding = st::confirmInviteAboutRequestsPadding;
+		_aboutRequests->move((width() - _aboutRequests->width()) / 2, bottom + padding.top());
+	}
 }
 
 void ConfirmInviteBox::paintEvent(QPaintEvent *e) {

Telegram/SourceFiles/api/api_chat_invite.h

@@ -68,6 +68,8 @@ private:
 	Fn<void()> _submit;
 	object_ptr<Ui::FlatLabel> _title;
 	object_ptr<Ui::FlatLabel> _status;
+	object_ptr<Ui::FlatLabel> _about;
+	object_ptr<Ui::FlatLabel> _aboutRequests;
 	std::shared_ptr<Data::PhotoMedia> _photo;
 	std::unique_ptr<Ui::EmptyUserpic> _photoEmpty;
 	std::vector<Participant> _participants;

Telegram/SourceFiles/boxes/boxes.style

@@ -82,29 +82,39 @@ confirmInviteTitle: FlatLabel(defaultFlatLabel) {
 	maxHeight: 24px;
 	textFg: windowBoldFg;
 	style: TextStyle(defaultTextStyle) {
-		font: font(16px semibold);
-		linkFont: font(16px semibold);
-		linkFontOver: font(16px semibold underline);
+		font: font(18px semibold);
+		linkFont: font(18px semibold);
+		linkFontOver: font(18px semibold underline);
 	}
 }
-confirmInviteStatus: FlatLabel(boxLabel) {
+confirmInviteAbout: FlatLabel(boxLabel) {
 	align: align(center);
 	minWidth: 320px;
-	textFg: windowSubTextFg;
+	maxHeight: 60px;
+	style: TextStyle(boxLabelStyle) {
+		lineHeight: 19px;
+	}
 }
-confirmInviteTitleTop: 106px;
-confirmInvitePhotoSize: 76px;
-confirmInvitePhotoTop: 20px;
-confirmInviteStatusTop: 136px;
-confirmInviteUserHeight: 84px;
-confirmInviteUserPhotoSize: 56px;
-confirmInviteUserPhotoTop: 166px;
+confirmInviteStatus: FlatLabel(confirmInviteAbout) {
+	textFg: windowSubTextFg;
+	style: boxLabelStyle;
+}
+confirmInviteAboutPadding: margins(36px, 4px, 36px, 10px);
+confirmInviteAboutRequestsPadding: margins(36px, 9px, 36px, 15px);
+confirmInviteTitleTop: 141px;
+confirmInvitePhotoSize: 96px;
+confirmInvitePhotoTop: 33px;
+confirmInviteStatusTop: 164px;
+confirmInviteUserHeight: 100px;
+confirmInviteUserPhotoSize: 50px;
+confirmInviteUserPhotoTop: 210px;
+confirmInviteUsersWidth: 320px;
 confirmInviteUserName: FlatLabel(defaultFlatLabel) {
 	align: align(center);
 	minWidth: 66px;
 	maxHeight: 20px;
 }
-confirmInviteUserNameTop: 227px;
+confirmInviteUserNameTop: 264px;
 
 confirmPhoneAboutLabel: FlatLabel(defaultFlatLabel) {
 	minWidth: 272px;