Page MenuHomePhorge
Files F32167617

D8821.1765052824.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D8821.1765052824.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;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -242,4 +242,5 @@
--community-roles-text-color: var(--shades-white-100);
--modal-separator: var(--shades-black-80);
--create-roles-text-color: var(--shades-white-100);
+ --qr-code-login-instructions-color: var(--shades-black-60);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 8:27 PM (22 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5840627
Default Alt Text
D8821.1765052824.diff (2 KB)

Event Timeline