smartcomply-web-sdk 1.0.71 → 1.0.73

package/dist/smartcomply.browser.js

@@ -6508,38 +6508,44 @@ var SmartComplySDK = (() => {
     `;
       stepBadge.textContent = "STEP 1 OF 2 · CHECK THE PHOTO";
       this.root.appendChild(stepBadge);
+      const imgWrap = document.createElement("div");
+      imgWrap.style.cssText = "position:relative;width:100%;";
       const img = document.createElement("img");
       let currentUrl = URL.createObjectURL(imageData);
       img.src = currentUrl;
       img.style.cssText = `
-      width:100%;max-height:300px;object-fit:contain;border-radius:${RADIUS.md}px;
-      border:2px solid ${theme.border};
+      display:block;width:100%;max-height:300px;object-fit:contain;
+      border-radius:${RADIUS.md}px;border:2px solid ${theme.border};
+      background:${theme.inputBg};
     `;
-      this.root.appendChild(img);
+      imgWrap.appendChild(img);
       let currentBlob = imageData;
       let isRotating = false;
-      const label = document.createElement("div");
-      label.style.cssText = `color:${theme.text};font-size:${TYPE.base}px;font-weight:700;text-align:center;`;
-      label.textContent = "Does the photo look clear?";
-      this.root.appendChild(label);
-      const sublabel = document.createElement("div");
-      sublabel.style.cssText = `color:${theme.textMuted};font-size:${TYPE.xs}px;text-align:center;line-height:1.6;`;
-      sublabel.textContent = "All text must be readable and all four corners must be visible.";
-      this.root.appendChild(sublabel);
       const rotateBtn = document.createElement("button");
       rotateBtn.type = "button";
-      rotateBtn.setAttribute("aria-label", "Rotate photo 90 degrees");
+      rotateBtn.setAttribute("aria-label", "Photo sideways or upside-down? Rotate it 90 degrees");
+      rotateBtn.title = "Rotate 90°";
       rotateBtn.style.cssText = `
+      position:absolute;bottom:10px;right:10px;
       display:flex;align-items:center;justify-content:center;gap:6px;
-      margin:0 auto;padding:8px 16px;background:transparent;
-      color:${theme.textSecondary};border:1.5px solid ${theme.border};
+      padding:8px 14px;background:${theme.isDark ? "rgba(20,20,20,0.72)" : "rgba(255,255,255,0.92)"};
+      backdrop-filter:blur(6px);color:${theme.text};border:1px solid ${theme.border};
       border-radius:${RADIUS.pill}px;cursor:pointer;
-      font-size:12.5px;font-weight:600;font-family:inherit;
+      box-shadow:0 2px 10px rgba(0,0,0,${theme.isDark ? "0.4" : "0.15"});
+      font-size:12.5px;font-weight:600;font-family:inherit;line-height:1;
+      transition:transform 0.15s ease,opacity 0.15s ease;
     `;
       rotateBtn.innerHTML = `<span style="display:inline-flex;">${icon("rotate", 15)}</span><span>Rotate</span>`;
+      rotateBtn.addEventListener("mouseenter", () => {
+        rotateBtn.style.transform = "translateY(-1px)";
+      });
+      rotateBtn.addEventListener("mouseleave", () => {
+        rotateBtn.style.transform = "translateY(0)";
+      });
       rotateBtn.addEventListener("click", async () => {
         if (isRotating) return;
         isRotating = true;
+        rotateBtn.style.opacity = "0.5";
         rotateBtn.disabled = true;
         try {
           const rotated = await this._rotateImage(currentBlob, 90);
@@ -6551,10 +6557,20 @@ var SmartComplySDK = (() => {
         } catch {
         } finally {
           isRotating = false;
+          rotateBtn.style.opacity = "1";
           rotateBtn.disabled = false;
         }
       });
-      this.root.appendChild(rotateBtn);
+      imgWrap.appendChild(rotateBtn);
+      this.root.appendChild(imgWrap);
+      const label = document.createElement("div");
+      label.style.cssText = `color:${theme.text};font-size:${TYPE.base}px;font-weight:700;text-align:center;`;
+      label.textContent = "Does the photo look clear?";
+      this.root.appendChild(label);
+      const sublabel = document.createElement("div");
+      sublabel.style.cssText = `color:${theme.textMuted};font-size:${TYPE.xs}px;text-align:center;line-height:1.6;`;
+      sublabel.textContent = "All text must be readable and all four corners must be visible. Sideways or upside-down? Use Rotate on the photo above.";
+      this.root.appendChild(sublabel);
       const qualityNotice = document.createElement("div");
       qualityNotice.style.cssText = `
       display:none;width:100%;padding:10px 14px;border-radius:${RADIUS.md}px;