From 9b54fcdf1234285d5cef5ed74e8f93106c3526ae Mon Sep 17 00:00:00 2001
From: S Santhosh Nagaraj <nssvlr@gmail.com>
Date: Fri, 12 Mar 2021 00:51:45 +0530
Subject: [PATCH] feat: Add QR Code to Share Object Modal (#11735)

Co-authored-by: Kaan Kabalak <kaankabalak@gmail.com>
---
 browser/app/js/objects/ShareObjectModal.js | 2 ++
 browser/app/less/inc/misc.less             | 7 ++++++-
 browser/package.json                       | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/browser/app/js/objects/ShareObjectModal.js b/browser/app/js/objects/ShareObjectModal.js
index e48a0a76f..6d4c2ff24 100644
--- a/browser/app/js/objects/ShareObjectModal.js
+++ b/browser/app/js/objects/ShareObjectModal.js
@@ -26,6 +26,7 @@ import {
   SHARE_OBJECT_EXPIRY_HOURS,
   SHARE_OBJECT_EXPIRY_MINUTES
 } from "../constants"
+import QRCode from "react-qr-code";
 
 export class ShareObjectModal extends React.Component {
   constructor(props) {
@@ -89,6 +90,7 @@ export class ShareObjectModal extends React.Component {
         <ModalHeader>Share Object</ModalHeader>
         <ModalBody>
           <div className="input-group copy-text">
+            <QRCode value={url} size={128}/>
             <label>Shareable Link</label>
             <input
               type="text"
diff --git a/browser/app/less/inc/misc.less b/browser/app/less/inc/misc.less
index 28e00c8e6..cddfddf89 100644
--- a/browser/app/less/inc/misc.less
+++ b/browser/app/less/inc/misc.less
@@ -75,6 +75,11 @@
 			border-color: darken(@input-border, 5%);
 		}
 	}
+
+	svg {
+	  display: block;
+		margin: 0 auto 5px;
+	}
 }
 
 /*--------------------------
@@ -150,4 +155,4 @@
   100% {
     transform: rotate(360deg);
   }
-}
\ No newline at end of file
+}
diff --git a/browser/package.json b/browser/package.json
index 67286570d..905a4cb0c 100644
--- a/browser/package.json
+++ b/browser/package.json
@@ -84,6 +84,7 @@
     "react-dropzone": "^11.0.1",
     "react-infinite-scroller": "^1.2.4",
     "react-onclickout": "^2.0.8",
+    "react-qr-code": "^1.1.1",
     "react-redux": "^5.1.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",