add qr-code border

src/renderer/component/common/qr-code.jsx

@@ -7,18 +7,16 @@ type Props = {
   value: string,
   paddingRight?: boolean,
   paddingTop?: boolean,
-  size?: number,
 };
 
 class QRCode extends React.Component<Props> {
   static defaultProps = {
     paddingRight: false,
     paddingTop: false,
-    size: 128,
   };
 
   render() {
-    const { value, paddingRight, paddingTop, size } = this.props;
+    const { value, paddingRight, paddingTop } = this.props;
     return (
       <div
         className={classnames('qr-code', {
@@ -26,7 +24,7 @@ class QRCode extends React.Component<Props> {
           'qr-code--top-padding': paddingTop,
         })}
       >
-        <QRCodeElement value={value} size={size} />
+        <QRCodeElement value={value} />
       </div>
     );
   }

src/renderer/component/walletAddress/view.jsx

@@ -67,7 +67,7 @@ class WalletAddress extends React.PureComponent<Props> {
         </div>
 
         <div className="card__content">
-          {showQR && <QRCode value={receiveAddress} paddingTop size={256} />}
+          {showQR && <QRCode value={receiveAddress} paddingTop />}
         </div>
 
         <div className="card__content">

src/renderer/scss/_gui.scss

@@ -356,10 +356,13 @@ p {
 }
 
 .qr-code {
+  border: 3px solid var(--color-white);
+  height: 134px;
+  width: 134px;
   &.qr-code--right-padding {
-    padding-right: $spacing-vertical * 2/3;
+    margin-right: $spacing-vertical * 2/3;
   }
   &.qr-code--top-padding {
-    padding-top: $spacing-vertical * 2/3;
+    margin-top: $spacing-vertical * 2/3;
   }
 }