Page MenuHomePhabricator
Files F3291664

D8821.id29975.diff
No OneTemporary
Actions

D8821.id29975.diff
View Options

diff --git a/web/account/qr-code-login.css b/web/account/qr-code-login.css
new file mode 100644
--- /dev/null
+++ b/web/account/qr-code-login.css
@@ -0,0 +1,45 @@
+div.qrContainer {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ height: 100%;
+ background-color: var(--bg);
+}
+
+div.title {
+ padding-top: 90px;
+ color: var(--label-default-color);
+ font-size: var(--xxxl-font-32);
+ font-weight: var(--bold);
+}
+
+div.scanInstructions {
+ color: var(--label-default-color);
+ font-size: var(--l-font-18);
+ font-weight: var(--semi-bold);
+ padding: 40px;
+}
+
+div.instructionsContainer {
+ margin-top: 50px;
+ width: 350px;
+ border: solid var(--help-color) 2px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+
+div.instructionsTitle {
+ color: var(--help-color);
+ font-weight: var(--bold);
+ margin: 15px 0;
+}
+
+div.instructionsStep {
+ color: var(--label-default-color);
+}
+
+div.instructionsStep:last-of-type {
+ margin-bottom: 20px;
+}
diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -1,9 +1,37 @@
// @flow
+import { QRCodeSVG } from 'qrcode.react';
import * as React from 'react';
+import css from './qr-code-login.css';
+
function QrCodeLogin(): React.Node {
- return <div />;
+ return (
+ <div className={css.qrContainer}>
+ <div className={css.title}>Log in to Comm</div>
+ <div className={css.scanInstructions}>
+ Open the Comm app on your phone and scan the QR code below
+ </div>
+ <QRCodeSVG
+ value="https://comm.app/"
+ size={300}
+ marginSize={4}
+ level="L"
+ />
+ <div className={css.instructionsContainer}>
+ <div className={css.instructionsTitle}>How to find the scanner:</div>
+ <div className={css.instructionsStep}>
+ Go to <strong>Profile</strong>
+ </div>
+ <div className={css.instructionsStep}>
+ Select <strong>Linked devices</strong>
+ </div>
+ <div className={css.instructionsStep}>
+ Click <strong>Add</strong> on the top right
+ </div>
+ </div>
+ </div>
+ );
}
export default QrCodeLogin;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 4:09 PM (9 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2529536
Default Alt Text
D8821.id29975.diff (2 KB)

Event Timeline