Skip to content

Commit

Permalink
[web][native] add white frame around QR code
Browse files Browse the repository at this point in the history
Summary:
[ENG-9875](https://linear.app/comm/issue/ENG-9875/add-white-frame-around-qr-code).

**Native**
before:
{F3377060}
after:
{F3377059}

**Web**
before:
{F3377067}
after:
{F3377068}

Test Plan:
On Android physical device:
1. Scanning QR code when using `Add` from `Linked devices` works
2. Scanning QR code using an app camera (deep linking) works

Reviewers: angelika, tomek

Reviewed By: tomek

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D14055
  • Loading branch information
xsanm committed Dec 2, 2024
1 parent 98f0d29 commit 2e4448a
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 2 deletions.
8 changes: 7 additions & 1 deletion native/qr-code/qr-code-screen.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ function QRCodeScreen(props: QRCodeScreenProps): React.Node {
<Text style={styles.headingSubtext}>
Open the Comm app on your phone and scan the QR code below
</Text>
<QRCode value={qrCodeURL} size={200} />
<View style={styles.qrCodeContainer}>
<QRCode value={qrCodeURL} size={200} />
</View>
<View style={styles.instructionsBox}>
<Text style={styles.instructionsTitle}>How to find the scanner:</Text>
<Text style={styles.instructionsStep}>
Expand Down Expand Up @@ -102,6 +104,10 @@ const unboundStyles = {
instructionsBold: {
fontWeight: 'bold',
},
qrCodeContainer: {
padding: 5,
backgroundColor: 'panelForegroundLabel',
},
};

export default QRCodeScreen;
8 changes: 8 additions & 0 deletions web/account/qr-code-login.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,11 @@ div.instructionsStep {
div.instructionsStep:last-of-type {
margin-bottom: 20px;
}

div.qrCodeContainer {
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
background: var(--fg);
}
4 changes: 3 additions & 1 deletion web/account/qr-code-login.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ function QRCodeLogin(): React.Node {
<div className={css.scanInstructions}>
Open the Comm app on your phone and scan the QR code below
</div>
<QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
<div className={css.qrCodeContainer}>
<QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
</div>
<div className={css.instructionsContainer}>
<div className={css.instructionsTitle}>How to find the scanner:</div>
<div className={css.instructionsStep}>
Expand Down

0 comments on commit 2e4448a

Please sign in to comment.