Adjust username change box to the mockup.

Telegram/Resources/langs/lang.strings

@@ -296,7 +296,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_settings_drop_area_subtitle" = "to set it as your photo";
 
 "lng_username_title" = "Username";
-"lng_username_about" = "You can choose a username on Telegram.\nIf you do, other people will be able to find\nyou by this username and contact you\nwithout knowing your phone number.\n\nYou can use a-z, 0-9 and underscores.\nMinimum length is 5 characters.";
+"lng_username_description" = "You can choose a username on Telegram. If you do, other people will be able to find you by this username and contact you without knowing your phone number.\n\nYou can use **a-z**, **0-9** and **underscores**.\nMinimum length is **5 characters**.";
 "lng_username_choose" = "Choose your username.";
 "lng_username_invalid" = "This username is invalid.";
 "lng_username_occupied" = "This username is already occupied.";

Telegram/SourceFiles/boxes/boxes.style

@@ -508,10 +508,12 @@ passcodeTextStyle: TextStyle(defaultTextStyle) {
 	lineHeight: 20px;
 }
 
-usernamePadding: margins(22px, 6px, 21px, 12px);
+defaultBoxLabel: FlatLabel(defaultFlatLabel) {
-usernameSkip: 49px;
+	minWidth: 272px;
-usernameTextStyle: TextStyle(boxTextStyle, passcodeTextStyle) {
 }
+usernamePadding: margins(24px, 2px, 24px, 10px);
+usernameSkip: 44px;
+usernameTextStyle: defaultTextStyle;
 usernameDefaultFg: windowSubTextFg;
 
 editMediaLabelMargins: margins(0px, 11px, 0px, 0px);

Telegram/SourceFiles/boxes/username_box.cpp

@@ -10,8 +10,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "boxes/peers/edit_peer_common.h"
 #include "lang/lang_keys.h"
 #include "ui/widgets/buttons.h"
+#include "ui/widgets/labels.h"
 #include "ui/special_fields.h"
 #include "ui/toast/toast.h"
+#include "ui/text/text_utilities.h"
 #include "main/main_session.h"
 #include "data/data_session.h"
 #include "data/data_user.h"
@@ -23,10 +25,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 
 UsernameBox::UsernameBox(QWidget*, not_null<Main::Session*> session)
 : _session(session)
-, _textStyle(st::usernameTextStyle)
+, _font(st::normalFont)
-, _font(st::boxTextFont)
 , _padding(st::usernamePadding)
-, _textCenterTop((_textStyle.lineHeight - _font->height) / 2)
+, _textCenterTop((_font->height - _font->height) / 2)
 , _api(&_session->mtp())
 , _username(
 	this,
@@ -34,8 +35,11 @@ UsernameBox::UsernameBox(QWidget*, not_null<Main::Session*> session)
 	rpl::single(qsl("@username")),
 	session->user()->username,
 	QString())
-, _link(this, QString(), st::boxLinkButton)
+, _about(
-, _about(st::boxWidth - _padding.left())
+	this,
+	tr::lng_username_description(Ui::Text::RichLangValue),
+	st::defaultBoxLabel)
+, _link(this, QString(), st::defaultLinkButton)
 , _checkTimer([=] { check(); }) {
 }
 
@@ -53,15 +57,19 @@ void UsernameBox::prepare() {
 	connect(_username, &Ui::MaskedInputField::submitted, [=] { save(); });
 	_link->addClickHandler([=] { linkClick(); });
 
-	_about.setText(_textStyle, tr::lng_username_about(tr::now));
+	_about->resizeToWidth(
-	setDimensions(
+		st::boxWideWidth - _padding.left() - _padding.right());
-		st::boxWidth,
+	_about->heightValue(
-		_padding.top()
+	) | rpl::start_with_next([=](int height) {
-			+ _username->height()
+		setDimensions(
-			+ st::usernameSkip
+			st::boxWideWidth,
-			+ _about.countHeight(st::boxWidth - _padding.left())
+			(_padding.top()
-			+ 3 * _textStyle.lineHeight
+				+ _username->height()
-			+ _padding.bottom());
+				+ st::usernameSkip
+				+ height
+				+ 3 * _font->height
+				+ _padding.bottom()));
+	}, lifetime());
 
 	updateLinkText();
 }
@@ -103,20 +111,12 @@ void UsernameBox::paintEvent(QPaintEvent *e) {
 			tr::lng_username_choose(tr::now));
 	}
 	p.setPen(st::boxTextFg);
-	const auto availW = st::boxWidth - _padding.left();
-	const auto h = _about.countHeight(availW);
-	_about.drawLeft(
-		p,
-		_padding.left(),
-		_username->y() + _username->height() + st::usernameSkip,
-		availW,
-		width());
 
 	const auto linkTop = _username->y()
 		+ _username->height()
 		+ st::usernameSkip
-		+ h
+		+ _about->height()
-		+ _textStyle.lineHeight
+		+ _font->height
 		+ _textCenterTop;
 	if (_link->isHidden()) {
 		p.drawTextLeft(
@@ -129,7 +129,7 @@ void UsernameBox::paintEvent(QPaintEvent *e) {
 		p.drawTextLeft(
 			_padding.left(),
 			linkTop
-				+ _textStyle.lineHeight
+				+ _font->height
 				+ _textCenterTop,
 			width(),
 			link);
@@ -150,17 +150,17 @@ void UsernameBox::resizeEvent(QResizeEvent *e) {
 		_username->height());
 	_username->moveToLeft(_padding.left(), _padding.top());
 
-	const auto availW = st::boxWidth - _padding.left();
+	_about->moveToLeft(
-	const auto h = _about.countHeight(availW);
+		_padding.left(),
-	const auto linkTop = _username->y()
+		_username->y() + _username->height() + st::usernameSkip);
-		+ _username->height()
+
-		+ st::usernameSkip
+	const auto linkTop = _about->y()
-		+ h
+		+ _about->height()
-		+ _textStyle.lineHeight
+		+ _font->height
 		+ _textCenterTop;
 	_link->moveToLeft(
 		_padding.left(),
-		linkTop + _textStyle.lineHeight + _textCenterTop);
+		linkTop + _font->height + _textCenterTop);
 }
 
 void UsernameBox::save() {
@@ -305,7 +305,7 @@ void UsernameBox::updateLinkText() {
 	const auto uname = getName();
 	_link->setText(_font->elided(
 		_session->createInternalLinkFull(uname),
-		st::boxWidth - _padding.left() - _padding.right()));
+		st::boxWideWidth - _padding.left() - _padding.right()));
 	if (uname.isEmpty()) {
 		if (!_link->isHidden()) {
 			_link->hide();

Telegram/SourceFiles/boxes/username_box.h

@@ -14,6 +14,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 namespace Ui {
 class UsernameInput;
 class LinkButton;
+class FlatLabel;
 } // namespace Ui
 
 namespace Main {
@@ -47,20 +48,19 @@ private:
 	void updateLinkText();
 
 	const not_null<Main::Session*> _session;
-	const style::TextStyle &_textStyle;
 	const style::font &_font;
 	const style::margins &_padding;
 	const int _textCenterTop;
 	MTP::Sender _api;
 
 	object_ptr<Ui::UsernameInput> _username;
+	object_ptr<Ui::FlatLabel> _about;
 	object_ptr<Ui::LinkButton> _link;
 
 	mtpRequestId _saveRequestId = 0;
 	mtpRequestId _checkRequestId = 0;
 	QString _sentUsername, _checkUsername, _errorText, _goodText;
 
-	Ui::Text::String _about;
 	base::Timer _checkTimer;
 
 };