Skip to content

Commit 58f2955

Browse files
ryelleryelle
authored
Login: Update styles and layout of QR code screen (#102010)
* Login: Update styles and layout of QR code screen * Add the WordPress logo to QR login screen * Update instructions text * Fix woo text alignment and link size * Center the content vertically on page
1 parent 922f753 commit 58f2955

File tree

5 files changed

+59
-85
lines changed

5 files changed

+59
-85
lines changed

‎client/blocks/qr-code-login/index.jsx

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { getTracksAnonymousUserId } from '@automattic/calypso-analytics';
22
import config from '@automattic/calypso-config';
3-
import { Card, Gridicon, ExternalLink } from '@automattic/components';
3+
import { ExternalLink } from '@automattic/components';
44
import { localizeUrl } from '@automattic/i18n-utils';
5+
import { Notice } from '@wordpress/components';
56
import { addQueryArgs } from '@wordpress/url';
67
import { useTranslate } from 'i18n-calypso';
78
import { QRCodeSVG } from 'qrcode.react';
89
import { useEffect, useState } from 'react';
910
import qrCenter from 'calypso/assets/images/qr-login/app.png';
1011
import { setStoredItem, getStoredItem } from 'calypso/lib/browser-storage';
1112
import { useInterval } from 'calypso/lib/interval';
12-
import { login } from 'calypso/lib/paths';
1313
import { postLoginRequest, getErrorFromHTTPError } from 'calypso/state/login/utils';
1414

1515
import './style.scss';
@@ -73,26 +73,20 @@ function QRCodePlaceholder() {
7373
);
7474
}
7575

76-
function QRCodeErrorCard( { redirectToAfterLoginUrl, locale } ) {
76+
function QRCodeErrorCard() {
7777
const translate = useTranslate();
7878

79-
const loginUrl = login( {
80-
redirectTo: redirectToAfterLoginUrl,
81-
locale,
82-
} );
8379
return (
84-
<Card className="qr-code-login">
80+
<div className="qr-code-login is-error">
8581
<div className="qr-code-login__token-error">
82+
<h1 className="qr-code-login-page__heading">{ translate( 'Log in via Jetpack app' ) }</h1>
8683
<p>{ translate( 'Mobile App QR Code login is currently unavailable.' ) }</p>
87-
<p>
88-
<a href={ loginUrl }>{ translate( 'Back to login' ) }</a>
89-
</p>
9084
</div>
91-
</Card>
85+
</div>
9286
);
9387
}
9488

95-
function QRCodeLogin( { locale, redirectToAfterLoginUrl } ) {
89+
function QRCodeLogin( { redirectToAfterLoginUrl } ) {
9690
const translate = useTranslate();
9791
const [ tokenState, setTokenState ] = useState( null );
9892
const [ authState, setAuthState ] = useState( false );
@@ -217,7 +211,11 @@ function QRCodeLogin( { locale, redirectToAfterLoginUrl } ) {
217211
),
218212
},
219213
} ),
220-
translate( 'Tap the Me Tab.' ),
214+
translate( 'Tap the {{strong}}Me{{/strong}} tab.', {
215+
components: {
216+
strong: <strong />,
217+
},
218+
} ),
221219
translate( 'Tap the {{strong}}Scan Login Code{{/strong}} option.', {
222220
components: {
223221
strong: <strong />,
@@ -227,7 +225,7 @@ function QRCodeLogin( { locale, redirectToAfterLoginUrl } ) {
227225
];
228226

229227
const notice = translate(
230-
"Logging in via the Jetpack app is {{strong}}not available{{/strong}} if you've enabled two-step authentication on your account.",
228+
'Logging in via the Jetpack app is {{strong}}not available{{/strong}} to accounts with two-factor authentication enabled.',
231229
{
232230
components: {
233231
strong: <strong />,
@@ -236,32 +234,29 @@ function QRCodeLogin( { locale, redirectToAfterLoginUrl } ) {
236234
);
237235

238236
if ( isErrorState ) {
239-
return (
240-
<QRCodeErrorCard locale={ locale } redirectToAfterLoginUrl={ redirectToAfterLoginUrl } />
241-
);
237+
return <QRCodeErrorCard />;
242238
}
243239

244240
return (
245-
<Card className="qr-code-login">
241+
<div className="qr-code-login">
246242
<div className="qr-code-login__token">
247243
<TokenQRCode tokenData={ tokenState } />
248244
</div>
249245

250246
<div className="qr-code-login__instructions">
251-
<h2 className="qr-code-login__heading">{ translate( 'Use QR Code to login' ) }</h2>
247+
<h1 className="qr-code-login-page__heading">{ translate( 'Log in via Jetpack app' ) }</h1>
248+
<Notice isDismissible={ false } status="warning">
249+
<p>{ notice }</p>
250+
</Notice>
252251
<ol className="qr-code-login__steps">
253252
{ steps.map( ( step, index ) => (
254253
<li key={ 'step-' + index } className="qr-code-login__step">
255254
{ step }
256255
</li>
257256
) ) }
258257
</ol>
259-
<div className="qr-code-login__info">
260-
<Gridicon icon="info-outline" size={ 18 } />
261-
<p>{ notice }</p>
262-
</div>
263258
</div>
264-
</Card>
259+
</div>
265260
);
266261
}
267262

‎client/blocks/qr-code-login/style.scss

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,54 +5,22 @@
55
display: flex;
66
flex-direction: column;
77
clear: left;
8+
gap: 16px 48px;
9+
10+
&:not(.is-error) {
11+
margin-bottom: 48px;
12+
}
813

914
@include break-small {
1015
flex-direction: row-reverse;
1116
}
1217

1318
.qr-code-login__instructions {
1419
text-align: left;
15-
padding-right: 20px;
16-
font-size: $font-body-small;
17-
18-
.qr-code-login__heading {
19-
font-size: $font-title-small;
20-
text-align: center;
21-
margin-bottom: 12px;
22-
font-weight: 500;
23-
24-
@include break-small {
25-
text-align: left;
26-
}
27-
}
20+
line-height: 1.6;
2821

2922
.qr-code-login__steps {
30-
margin-left: 16px;
31-
}
32-
33-
.qr-code-login__step {
34-
margin-bottom: 0.75em;
35-
}
36-
37-
.qr-code-login__info {
38-
border-radius: 2px;
39-
font-size: $font-body-small;
40-
padding: 8px;
41-
align-items: center;
42-
background-color: var(--color-neutral-0);
43-
display: flex;
44-
color: var(--color-neutral-50);
45-
46-
.gridicon {
47-
padding-right: 4px;
48-
width: 60px;
49-
text-align: left;
50-
fill: var(--color-warning);
51-
}
52-
53-
strong {
54-
color: var(--color-neutral-70);
55-
}
23+
margin: 16px 0 0 16px;
5624
}
5725

5826
a {

‎client/layout/masterbar/woo.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -158,17 +158,17 @@ $breakpoint-mobile: 660px;
158158
.wp-login__links button,
159159
.button:not(.social-buttons__button),
160160
.magic-login__footer a {
161-
font-size: $woo-font-size-base;
162-
line-height: 28px;
163-
text-align: center;
164161
color: $gray-50;
165162
text-decoration: underline;
166-
letter-spacing: 0;
167163

168-
&:hover,
169164
&:visited {
170165
color: $gray-50;
171166
}
167+
168+
&:hover,
169+
&:focus {
170+
color: $woo-gray-100;
171+
}
172172
}
173173

174174
.button:not(.social-buttons__button) {
@@ -722,7 +722,6 @@ $breakpoint-mobile: 660px;
722722

723723
a {
724724
color: var(--woo-purple-70);
725-
font-size: $font-body;
726725
text-decoration: none;
727726
}
728727

@@ -1525,6 +1524,7 @@ $breakpoint-mobile: 660px;
15251524
color: var(--woo-purple-40);
15261525
text-align: center;
15271526
font-weight: 400;
1527+
font-size: $woo-font-size-base;
15281528
line-height: 20px;
15291529
margin-block-start: 24px;
15301530
text-decoration: underline;

‎client/login/qr-code-login-page/index.jsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, Gridicon } from '@automattic/components';
1+
import { Card } from '@automattic/components';
22
import { useTranslate } from 'i18n-calypso';
33
import AsyncLoad from 'calypso/components/async-load';
44
import Main from 'calypso/components/main';
@@ -17,7 +17,19 @@ function QrCodeLoginPage( { locale, redirectTo } ) {
1717
return (
1818
<Main className="qr-code-login-page">
1919
<div className="qr-code-login-page__form">
20-
<h1 className="qr-code-login-page__heading">{ translate( 'Log in via Jetpack app' ) }</h1>
20+
<div className="magic-login__gutenboarding-wordpress-logo">
21+
<svg
22+
aria-hidden="true"
23+
role="img"
24+
focusable="false"
25+
xmlns="http://www.w3.org/2000/svg"
26+
width="24"
27+
height="24"
28+
viewBox="0 0 20 20"
29+
>
30+
<path d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"></path>
31+
</svg>
32+
</div>
2133
<AsyncLoad
2234
require="calypso/blocks/qr-code-login"
2335
placeholder={ <QrCodeLoginPlaceholder /> }
@@ -27,7 +39,6 @@ function QrCodeLoginPage( { locale, redirectTo } ) {
2739
/>
2840
<div className="qr-code-login-page__footer">
2941
<a href={ login( { locale, redirectTo, isWhiteLogin } ) }>
30-
<Gridicon icon="arrow-left" size={ 18 } />
3142
{ translate( 'Enter a password instead' ) }
3243
</a>
3344
</div>

‎client/login/qr-code-login-page/style.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,36 @@
33

44
.qr-code-login-page {
55
margin: 0 auto;
6-
max-width: 780px;
6+
max-width: 700px;
77
text-align: center;
88
}
99

10+
.layout:has(.qr-code-login-page) {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
1016
.qr-code-login-page__heading {
11-
font-size: $font-title-small;
12-
margin-bottom: 32px;
13-
margin-top: 16px;
14-
text-align: center;
17+
@include onboarding-heading-text-mobile;
18+
margin-bottom: 16px;
19+
text-align: left !important;
1520
}
1621

1722
.qr-code-login-page__footer {
1823
a {
19-
color: var(--color-neutral-50);
2024
display: block;
21-
/* stylelint-disable-next-line declaration-property-unit-allowed-list */
22-
line-height: 4em;
2325
font-size: $font-body-small;
26+
color: var(--color-text);
2427
font-weight: 600;
2528
padding: 0 24px;
2629
text-align: center;
27-
text-decoration: none;
30+
text-decoration: underline;
2831

2932
&:hover {
3033
color: var(--color-primary);
3134
}
3235
}
33-
.gridicon {
34-
vertical-align: text-bottom;
35-
}
3636
}
3737

3838
.qr-code-login-page__placeholder {

0 commit comments

Comments
 (0)