From fe4bb1935802b2eaca767491db6e43bbf82f9bf0 Mon Sep 17 00:00:00 2001
From: John Preston <johnprestonmail@gmail.com>
Date: Thu, 25 Nov 2021 19:46:37 +0400
Subject: [PATCH] Improve custom device name input design.

---
 Telegram/Resources/langs/lang.strings        |  2 +-
 Telegram/SourceFiles/boxes/sessions_box.cpp  | 33 +++++++++++++-------
 Telegram/SourceFiles/settings/settings.style | 16 ++++++++++
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/Telegram/Resources/langs/lang.strings b/Telegram/Resources/langs/lang.strings
index 59502c77ba..1b5a92b5b2 100644
--- a/Telegram/Resources/langs/lang.strings
+++ b/Telegram/Resources/langs/lang.strings
@@ -700,7 +700,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_settings_reset_one_sure" = "Do you want to terminate this session?";
 "lng_settings_reset_button" = "Terminate";
 "lng_settings_rename_device" = "Rename";
-"lng_settings_device_name" = "Device name ({device})";
+"lng_settings_device_name" = "Device name";
 "lng_settings_rename_device_title" = "Rename current device";
 "lng_settings_manage_local_storage" = "Manage local storage";
 "lng_settings_ask_question" = "Ask a Question";
diff --git a/Telegram/SourceFiles/boxes/sessions_box.cpp b/Telegram/SourceFiles/boxes/sessions_box.cpp
index aaa433a996..6a94829b27 100644
--- a/Telegram/SourceFiles/boxes/sessions_box.cpp
+++ b/Telegram/SourceFiles/boxes/sessions_box.cpp
@@ -16,10 +16,6 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/boxes/confirm_box.h"
 #include "lang/lang_keys.h"
 #include "main/main_session.h"
-#include "styles/style_boxes.h"
-#include "styles/style_info.h"
-#include "styles/style_layers.h"
-#include "styles/style_settings.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/input_fields.h"
 #include "ui/widgets/labels.h"
@@ -30,6 +26,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "core/application.h"
 #include "core/core_settings.h"
 #include "window/window_session_controller.h"
+#include "styles/style_boxes.h"
+#include "styles/style_info.h"
+#include "styles/style_layers.h"
+#include "styles/style_settings.h"
 
 namespace {
 
@@ -39,13 +39,24 @@ constexpr auto kMaxDeviceModelLength = 32;
 void RenameBox(not_null<Ui::GenericBox*> box) {
 	box->setTitle(tr::lng_settings_rename_device_title());
 
-	const auto name = box->addRow(object_ptr<Ui::InputField>(
-		box,
-		st::defaultInputField,
-		tr::lng_settings_device_name(
-			lt_device,
-			rpl::single(Platform::DeviceModelPretty())),
-		Core::App().settings().customDeviceModel()));
+	const auto skip = st::settingsSubsectionTitlePadding.top();
+	box->addRow(
+		object_ptr<Ui::FlatLabel>(
+			box,
+			tr::lng_settings_device_name(),
+			st::settingsSubsectionTitle),
+		st::boxRowPadding + style::margins(0, skip, 0, 0));
+	const auto name = box->addRow(
+		object_ptr<Ui::InputField>(
+			box,
+			st::settingsDeviceName,
+			rpl::single(Platform::DeviceModelPretty()),
+			Core::App().settings().customDeviceModel()),
+		st::boxRowPadding - style::margins(
+			st::settingsDeviceName.textMargins.left(),
+			0,
+			st::settingsDeviceName.textMargins.right(),
+			0));
 	name->setMaxLength(kMaxDeviceModelLength);
 	box->setFocusCallback([=] {
 		name->setFocusFast();
diff --git a/Telegram/SourceFiles/settings/settings.style b/Telegram/SourceFiles/settings/settings.style
index eca3f69bf0..e06edc15c9 100644
--- a/Telegram/SourceFiles/settings/settings.style
+++ b/Telegram/SourceFiles/settings/settings.style
@@ -218,6 +218,22 @@ settingsAccentColorLine: 3px;
 settingsFilterIconSkip: 68px;
 settingsFilterIconLeft: 17px;
 
+settingsDeviceName: InputField(defaultInputField) {
+	textBg: transparent;
+	textMargins: margins(1px, 3px, 1px, 4px);
+
+	placeholderFg: placeholderFg;
+	placeholderFgActive: placeholderFgActive;
+	placeholderFgError: placeholderFgActive;
+	placeholderMargins: margins(1px, 0px, 1px, 0px);
+	placeholderScale: 0.;
+	placeholderFont: normalFont;
+
+	heightMin: 29px;
+
+	font: boxTextFont;
+}
+
 dictionariesSectionButton: SettingsButton(settingsUpdateToggle) {
 	font: font(14px semibold);
 }