0.0.59

components.js

@@ -2060,7 +2060,7 @@ smPopup.innerHTML = `
             <div class="handle"></div>
             <slot name="header"></slot>
         </div>
-        <div class="popup-body">
+        <div part="popup-body" class="popup-body">
             <slot></slot>
         </div>
     </div>

css/main.css

@@ -460,6 +460,9 @@ sm-popup h5:not(.tag) {
 #qr_code_popup::part(popup) {
   height: 80vh;
 }
+#qr_code_popup::part(popup-body) {
+  padding: 0;
+}
 #qr_code_popup sm-tab-header {
   width: max-content;
   align-self: center;
@@ -469,7 +472,12 @@ sm-popup h5:not(.tag) {
   display: flex;
   height: max-content;
   flex-direction: column;
-  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+#qr_code_popup p {
+  margin-top: 1rem;
+  opacity: 0.8;
 }
 
 .popup-header {

css/main.scss

@@ -476,6 +476,9 @@ sm-popup{
     &::part(popup){
         height: 80vh;
     }
+    &::part(popup-body){
+        padding: 0;
+    }
     sm-tab-header{
         width: max-content;
         align-self: center;
@@ -485,7 +488,12 @@ sm-popup{
         display: flex;
         height: max-content;
         flex-direction: column;
-        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+    p{
+        margin-top: 1rem;
+        opacity: 0.8;
     }
 }
 

index.html

@@ -69,7 +69,7 @@
         <sm-tab-panels id="qr_selector">
             <sm-panel>
                 <div id="reader"></div>
-                <sm-select id="select_camera"></sm-select>
+                <p>Point your camera towards QR Code</p>
             </sm-panel>
             <sm-panel>
                 <div id="my_qr_code"></div>
@@ -1644,11 +1644,6 @@
                 case 'qr_code_popup':
                     Html5Qrcode.getCameras().then(devices => {
                     if (devices && devices.length) {
-                        let cameras = ``
-                        for(device of devices){
-                            cameras += `<sm-option value="${device.id}">${device.label}</sm-option>`
-                        }
-                        selectCamera.innerHTML = cameras
                         startScanning(devices[devices.length-1].id)
                     }
                     }).catch(err => {
@@ -1658,10 +1653,6 @@
             }
         })
 
-        selectCamera.addEventListener('change', e => {
-            startScanning(selectCamera.value)
-        })
-
         function startScanning(cameraId){
             qrScannerInstance.start(
                 cameraId,