fix: move 'Upload QR Code' button to the right of the color picker bu…

…tton (#62) * fix: move 'Upload QR Code' button to the right of the color picker button * chore: increment version * chore: build Co-authored-by: Johnny Almonte <[email protected]>
standardnotes · Sep 6, 2021 · 65f5ed3 · 65f5ed3
1 parent f8c2bc0
commit 65f5ed3
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 20 deletions.
diff --git a/app/components/EditEntry.js b/app/components/EditEntry.js
@@ -160,16 +160,14 @@ export default class EditEntry extends React.Component {
                 <div className="color-picker-swatch" onClick={this.handleSwatchClick}>
                   <div style={swatchStyle} />
                 </div>
+                {id == null && (
+                  <QRCodeReader
+                    onSuccess={this.onQRCodeSuccess}
+                    onError={this.onQRCodeError}
+                  />
+                )}
               </div>
             </div>
-            {id == null && (
-              <div className="sk-panel-section sk-panel-hero align-items-center">
-                <QRCodeReader
-                  onSuccess={this.onQRCodeSuccess}
-                  onError={this.onQRCodeError}
-                />
-              </div>
-            )}
             <form onSubmit={this.onSave} autoComplete="off">
               <div className="sk-panel-section">
                 <input

diff --git a/app/components/QRCodeReader.js b/app/components/QRCodeReader.js
@@ -69,15 +69,17 @@ export default class QRCodeReader extends React.Component {
 
   render() {
     return (
-      <div className="sk-button info">
-        <label className="no-style">
-          <input
-            type="file"
-            style={{ display: 'none' }}
-            onChange={this.onImageSelected}
-          />
-          <div className="sk-label">Upload QR Code</div>
-        </label>
+      <div className="qr-code-reader-container">
+        <div className="sk-button info">
+          <label className="no-style">
+            <input
+              type="file"
+              style={{ display: 'none' }}
+              onChange={this.onImageSelected}
+            />
+            <div className="sk-label">Upload QR Code</div>
+          </label>
+        </div>
       </div>
     );
   }

diff --git a/app/stylesheets/main.scss b/app/stylesheets/main.scss
@@ -399,3 +399,7 @@ html {
 //     opacity: 0;
 //   }
 // }
+
+.qr-code-reader-container {
+  margin-left: 15px;
+}
diff --git a/dist/dist.css b/dist/dist.css
diff --git a/dist/dist.js b/dist/dist.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sn-token-vault",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "main": "dist/dist.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",