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
; + return ( +
+
Log in to Comm
+
+ Open the Comm app on your phone and scan the QR code below +
+ +
+
How to find the scanner:
+
+ Go to Profile +
+
+ Select Linked devices +
+
+ Click Add on the top right +
+
+
+ ); } export default QrCodeLogin;