From f96e5318120b6f3532113a14bf3d1fa611b278dd Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Mon, 23 Dec 2024 15:13:10 +0100
Subject: [PATCH] Update the design

---
 .../auth/deviceCode/DeviceCodeBody.tsx          | 13 ++++++++++++-
 .../components/auth/deviceCode/deviceCode.scss  | 17 +++++++++++++++++
 packages/app/icons/webfont/hash.svg             |  3 +++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 packages/app/icons/webfont/hash.svg

diff --git a/packages/app/components/auth/deviceCode/DeviceCodeBody.tsx b/packages/app/components/auth/deviceCode/DeviceCodeBody.tsx
index 912f982..9356c10 100644
--- a/packages/app/components/auth/deviceCode/DeviceCodeBody.tsx
+++ b/packages/app/components/auth/deviceCode/DeviceCodeBody.tsx
@@ -4,6 +4,8 @@ import { FormattedMessage as Message } from 'react-intl';
 import { Input } from 'app/components/ui/form';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
 
+import style from './deviceCode.scss';
+
 export default class DeviceCodeBody extends BaseAuthBody {
     static displayName = 'DeviceCodeBody';
     static panelId = 'deviceCode';
@@ -15,12 +17,21 @@ export default class DeviceCodeBody extends BaseAuthBody {
             <>
                 {this.renderErrors()}
 
+                <div className={style.icon} />
+
+                <div className={style.description}>
+                    <Message
+                        id="deviceCodeDescription"
+                        defaultMessage="To authorize the application, enter the code displayed on the screen."
+                    />
+                </div>
+
                 <Message id="enterDeviceCode" defaultMessage="Enter Device Code">
                     {(nodes) => (
                         <Input
                             {...this.bindField('user_code')}
-                            icon="key"
                             autoFocus
+                            center
                             required
                             placeholder={nodes as string}
                         />
diff --git a/packages/app/components/auth/deviceCode/deviceCode.scss b/packages/app/components/auth/deviceCode/deviceCode.scss
index f90e318..ac9e2af 100644
--- a/packages/app/components/auth/deviceCode/deviceCode.scss
+++ b/packages/app/components/auth/deviceCode/deviceCode.scss
@@ -3,3 +3,20 @@
     margin: 0 auto;
     padding: 55px 13px 0;
 }
+
+.description {
+    font-size: 15px;
+    color: #aaa;
+    text-align: center;
+    margin-bottom: 15px;
+}
+
+.icon {
+    composes: hash from '~app/components/ui/icons.scss';
+
+    display: block;
+    text-align: center;
+    font-size: 69px;
+    color: #ccc;
+    margin-block: 5px 15px;
+}
diff --git a/packages/app/icons/webfont/hash.svg b/packages/app/icons/webfont/hash.svg
new file mode 100644
index 0000000..2f35f8c
--- /dev/null
+++ b/packages/app/icons/webfont/hash.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78 69">
+    <path d="M43.18 40 46 29H34.82L32 40h11.18zm34.79-22.39-2.53 10.06a1.45 1.45 0 0 1-1.4 1.08H59.27l-2.89 11.5h14.05c.45 0 .85.23 1.12.54.28.36.41.8.28 1.26L69.3 52.1a1.4 1.4 0 0 1-1.4 1.08H53.13l-3.65 14.73a1.49 1.49 0 0 1-1.4 1.08H37.96c-.45 0-.9-.23-1.17-.54a1.55 1.55 0 0 1-.27-1.26l3.52-14.01H28.57l-3.66 14.73a1.49 1.49 0 0 1-1.4 1.08H13.35c-.4 0-.85-.23-1.12-.54a1.55 1.55 0 0 1-.27-1.26l3.52-14.01H1.43a1.51 1.51 0 0 1-1.13-.54 1.55 1.55 0 0 1-.27-1.26l2.53-10.06c.18-.63.72-1.08 1.4-1.08h14.77l2.89-11.5H7.57a1.51 1.51 0 0 1-1.13-.54c-.27-.36-.4-.8-.27-1.26L8.7 16.9a1.4 1.4 0 0 1 1.4-1.08h14.77l3.65-14.73A1.5 1.5 0 0 1 29.97 0h10.11c.41 0 .86.23 1.13.54.27.36.36.8.27 1.26L37.96 15.8h11.47l3.66-14.73A1.5 1.5 0 0 1 54.53 0h10.12c.4 0 .85.23 1.13.54.27.36.36.8.27 1.26L62.52 15.8h14.05c.45 0 .85.23 1.13.54.27.36.36.81.27 1.26z" />
+</svg>