ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-01-11 22:32:18 +05:30
Code Issues Packages Projects Releases Wiki Activity

Update the design

Browse Source
This commit is contained in:
ErickSkrauch 2024-12-23 15:13:10 +01:00
parent cf5973c876
commit f96e531812
No known key found for this signature in database
GPG Key ID: 669339FCBB30EE0E
3 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/components/auth/deviceCode/DeviceCodeBody.tsx
View File

@ -4,6 +4,8 @@ import { FormattedMessage as Message } from 'react-intl';
import { Input } from 'app/components/ui/form'; import { Input } from 'app/components/ui/form';
import BaseAuthBody from 'app/components/auth/BaseAuthBody'; import BaseAuthBody from 'app/components/auth/BaseAuthBody';
import style from './deviceCode.scss';
export default class DeviceCodeBody extends BaseAuthBody { export default class DeviceCodeBody extends BaseAuthBody {
static displayName = 'DeviceCodeBody'; static displayName = 'DeviceCodeBody';
static panelId = 'deviceCode'; static panelId = 'deviceCode';
@ -15,12 +17,21 @@ export default class DeviceCodeBody extends BaseAuthBody {
<> <>
{this.renderErrors()} {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"> <Message id="enterDeviceCode" defaultMessage="Enter Device Code">
{(nodes) => ( {(nodes) => (
<Input <Input
{...this.bindField('user_code')} {...this.bindField('user_code')}
icon="key"
autoFocus autoFocus
center
required required
placeholder={nodes as string} placeholder={nodes as string}
/> />

17
packages/app/components/auth/deviceCode/deviceCode.scss
View File

@ -3,3 +3,20 @@
margin: 0 auto; margin: 0 auto;
padding: 55px 13px 0; 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;
}

3
packages/app/icons/webfont/hash.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 912 B