Skip to content
Permalink
Browse files

fix(ui): re-add missing QR code borders

  • Loading branch information...
mrfelton committed Jun 10, 2019
1 parent e4fc1c8 commit 86925cd94ca2ceec2c6d021de03fbe296bfe2fda
Showing with 34 additions and 28 deletions.
  1. +18 −16 renderer/components/UI/QRCode.js
  2. +16 −12 test/unit/components/UI/__snapshots__/QRCode.spec.js.snap
@@ -1,13 +1,15 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled, { withTheme } from 'styled-components'
import { px } from 'styled-system'
import { Box, Card } from 'rebass'
import QRCode from 'qrcode.react'

const QRCODE_SIZE_SMALL = 'small'
const QRCODE_SIZE_MEDIUM = 'medium'
const QRCODE_SIZE_LARGE = 'large'
const QRCODE_SIZE_XLARGE = 'xlarge'
const QRCODE_SIZE_XXLARGE = 'xxlarge'

const Container = styled(Card)`
position: relative;
@@ -20,40 +22,36 @@ const CropWrapper = styled(Card)`
width: ${props => props.size * 1.2}px;
height: ${props => props.size * 1.2}px;
`
const TopLeft = styled(Card)`
position: absolute;
top: 0;
left: 0;

const CornerCard = styled(Card)`
display: inline-block;
width: ${props => props.size * 1.2}px;
height: ${props => props.size * 1.2}px;
border: ${({ border }) => px(border)} solid
${({ theme, borderColor }) => theme.colors[borderColor]};
`
const TopLeft = styled(CornerCard)`
position: absolute;
top: 0;
left: 0;
clip-path: polygon(0 0, 25% 0, 25% 25%, 0 25%);
`
const TopRight = styled(Card)`
const TopRight = styled(CornerCard)`
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: ${props => props.size * 1.2}px;
height: ${props => props.size * 1.2}px;
clip-path: polygon(75% 0, 100% 0%, 100% 25%, 75% 25%);
`
const BottomLeft = styled(Card)`
const BottomLeft = styled(CornerCard)`
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: ${props => props.size * 1.2}px;
height: ${props => props.size * 1.2}px;
clip-path: polygon(0 75%, 25% 75%, 25% 100%, 0 100%);
`
const BottomRight = styled(Card)`
const BottomRight = styled(CornerCard)`
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
width: ${props => props.size * 1.2}px;
height: ${props => props.size * 1.2}px;
clip-path: polygon(75% 75%, 100% 75%, 100% 100%, 75% 100%);
`
const CodeWrapper = styled(Box)`
@@ -132,6 +130,10 @@ class ZapQRCode extends React.PureComponent {
size = 250
border = 2
break
case QRCODE_SIZE_XXLARGE:
size = 300
border = 2
break
}

return (
@@ -23,12 +23,13 @@ exports[`component.UI.QRCode should render correctly 1`] = `
border-radius: 10%;
border-color: #fd9800;
border-radius: 10%;
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 180px;
height: 180px;
border: 1px solid #fd9800;
position: absolute;
top: 0;
left: 0;
-webkit-clip-path: polygon(0 0,25% 0,25% 25%,0 25%);
clip-path: polygon(0 0,25% 0,25% 25%,0 25%);
}
@@ -40,12 +41,13 @@ exports[`component.UI.QRCode should render correctly 1`] = `
border-radius: 10%;
border-color: #fd9800;
border-radius: 10%;
position: absolute;
top: 0;
right: 0;
display: inline-block;
width: 180px;
height: 180px;
border: 1px solid #fd9800;
position: absolute;
top: 0;
right: 0;
-webkit-clip-path: polygon(75% 0,100% 0%,100% 25%,75% 25%);
clip-path: polygon(75% 0,100% 0%,100% 25%,75% 25%);
}
@@ -57,12 +59,13 @@ exports[`component.UI.QRCode should render correctly 1`] = `
border-radius: 10%;
border-color: #fd9800;
border-radius: 10%;
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 180px;
height: 180px;
border: 1px solid #fd9800;
position: absolute;
bottom: 0;
left: 0;
-webkit-clip-path: polygon(0 75%,25% 75%,25% 100%,0 100%);
clip-path: polygon(0 75%,25% 75%,25% 100%,0 100%);
}
@@ -74,12 +77,13 @@ exports[`component.UI.QRCode should render correctly 1`] = `
border-radius: 10%;
border-color: #fd9800;
border-radius: 10%;
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
width: 180px;
height: 180px;
border: 1px solid #fd9800;
position: absolute;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(75% 75%,100% 75%,100% 100%,75% 100%);
clip-path: polygon(75% 75%,100% 75%,100% 100%,75% 100%);
}

0 comments on commit 86925cd

Please sign in to comment.
You can’t perform that action at this time.