releasebird-javascript-sdk 1.0.29 → 1.0.31

package/src/RbirdScreenshotManager.js

@@ -54,14 +54,44 @@ export default class RbirdScreenshotManager {
         RbirdWebsiteWidget.getInstance().openWebsiteWidget();
     }
 
+    showLoader() {
+        const loader = document.createElement('div');
+        loader.id = 'rbirdScreenshotLoader';
+        loader.className = 'rbird-screenshot-loader';
+
+        const spinner = document.createElement('div');
+        spinner.className = 'rbird-screenshot-loader-spinner';
+
+        const text = document.createElement('div');
+        text.className = 'rbird-screenshot-loader-text';
+        text.textContent = 'Creating screenshot...';
+
+        loader.appendChild(spinner);
+        loader.appendChild(text);
+        document.body.appendChild(loader);
+
+        return loader;
+    }
+
+    hideLoader() {
+        const loader = document.getElementById('rbirdScreenshotLoader');
+        if (loader) {
+            document.body.removeChild(loader);
+        }
+    }
+
     screenshot() {
         let that = this;
+        const loader = this.showLoader();
+
         html2canvas(document.body, {
             allowTaint: false,
             useCORS: false,
             logging: false,
             foreignObjectRendering: false
         }).then(function (canvas) {
+            that.hideLoader();
+
             if (RbirdWebsiteWidget.getInstance().iframe) {
                 RbirdWebsiteWidget.getInstance().iframe.contentWindow?.postMessage({
                     type: 'screenshot',
@@ -73,7 +103,8 @@ export default class RbirdScreenshotManager {
 
             //document.body.appendChild(canvas);
         }).catch((e) => {
-            document.body.appendChild(e.toString());
+            that.hideLoader();
+            console.error('Screenshot error:', e);
         });
     }
 

package/src/SVGEditor.js

@@ -28,6 +28,9 @@ class Menu {
         pathButton.style.boxShadow = "none";
         pathButton.style.border = "none";
         pathButton.style.cursor = "pointer";
+        pathButton.style.touchAction = "manipulation";
+        pathButton.style.webkitTapHighlightColor = "transparent";
+        pathButton.style.padding = "5px";
         pathButton.innerHTML = "<svg fill=\"none\" height=\"20pt\" viewBox=\"0 0 120 120\" width=\"20px\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path clip-rule=\"evenodd\"\n" +
             "          d=\"m76.25 82.5c-.6904 0-1.25.5596-1.25 1.25s.5596 1.25 1.25 1.25h21.25c6.904 0 12.5 5.5964 12.5 12.5 0 6.904-5.596 12.5-12.5 12.5h-71.5c-2.2091 0-4-1.791-4-4s1.7909-4 4-4h71.5c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5h-21.25c-5.1086 0-9.25-4.1414-9.25-9.25s4.1414-9.25 9.25-9.25h24.75c2.209 0 4 1.7909 4 4s-1.791 4-4 4z\"\n" +
@@ -46,6 +49,9 @@ class Menu {
         rectButton.style.cursor = "pointer";
         rectButton.style.boxShadow = "none";
         rectButton.style.border = "none";
+        rectButton.style.touchAction = "manipulation";
+        rectButton.style.webkitTapHighlightColor = "transparent";
+        rectButton.style.padding = "5px";
         rectButton.innerHTML = "<svg id=\"Layer_1\" enable-background=\"new 0 0 48 48\" height=\"20pt\" viewBox=\"0 0 48 48\" width=\"20pt\"\n" +
             "     xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path d=\"m44 12.5h-40c-.83 0-1.5.67-1.5 1.5v20c0 .83.67 1.5 1.5 1.5h40c.83 0 1.5-.67 1.5-1.5v-20c0-.83-.67-1.5-1.5-1.5zm-1.5 20h-37v-17h37z\"/>\n" +
@@ -59,6 +65,9 @@ class Menu {
         circleButton.style.cursor = "pointer";
         circleButton.style.boxShadow = "none";
         circleButton.style.border = "none";
+        circleButton.style.touchAction = "manipulation";
+        circleButton.style.webkitTapHighlightColor = "transparent";
+        circleButton.style.padding = "5px";
         circleButton.innerHTML = "<svg height=\"20pt\" viewBox=\"0 0 512 512\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
             "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
@@ -71,6 +80,9 @@ class Menu {
         ellipseButton.style.boxShadow = "none";
         ellipseButton.style.cursor = "pointer";
         ellipseButton.style.border = "none";
+        ellipseButton.style.touchAction = "manipulation";
+        ellipseButton.style.webkitTapHighlightColor = "transparent";
+        ellipseButton.style.padding = "5px";
         ellipseButton.addEventListener("click", (event) => this.onClick("shape", "ellipse"));
         ellipseButton.innerHTML = "<svg clip-rule=\"evenodd\" fill-rule=\"evenodd\" height=\"20pt\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"\n" +
             "     viewBox=\"0 0 24 24\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
@@ -89,17 +101,22 @@ class Menu {
     setResets() {
         const button = document.createElement("button");
         button.addEventListener("click", (event) => this.reset());
-        button.style.setProperty("border-color", 'black');
         button.style.border = "none";
         button.style.background = "none";
         button.style.cursor = "pointer";
-        button.style.marginTop = '3px';
-        button.innerHTML = "<svg id=\"Capa_1\" enable-background=\"new 0 0 511.697 511.697\" height=\"15pt\" viewBox=\"0 0 511.697 511.697\" width=\"15pt\"\n" +
+        button.style.padding = "5px";
+        button.style.display = "flex";
+        button.style.alignItems = "center";
+        button.style.justifyContent = "center";
+        button.style.touchAction = "manipulation";
+        button.style.webkitTapHighlightColor = "transparent";
+        button.title = "Undo last drawing";
+        button.innerHTML = "<svg id=\"Capa_1\" enable-background=\"new 0 0 511.697 511.697\" height=\"20pt\" viewBox=\"0 0 511.697 511.697\" width=\"20pt\"\n" +
             "     xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <g>\n" +
             "        <path clip-rule=\"evenodd\"\n" +
             "              d=\"m450.09 150.319c82.253 82.41 82.126 215.896-.284 298.149-39.451 39.376-92.891 61.526-148.63 61.606h-301.176v-60.235h301.176c83.167-.214 150.414-67.809 150.199-150.976-.214-82.864-67.335-149.985-150.199-150.199h-98.676v86.806l-202.5-116.922 202.5-116.926v86.807h98.678c55.893.006 109.48 22.278 148.912 61.89z\"\n" +
-            "              fill=\"#0291f7\" fill-rule=\"evenodd\"/>\n" +
+            "              fill=\"#6b7280\" fill-rule=\"evenodd\"/>\n" +
             "    </g>\n" +
             "</svg>";
         this.resets = [button];
@@ -111,13 +128,17 @@ class Menu {
         color.id = 'colorCircle';
         color.addEventListener("click", (event) => this.openColorPicker());
         color.style.cursor = 'pointer';
-        color.style.marginTop = '3px';
-        color.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"18pt\" width=\"18pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+        color.style.padding = '5px';
+        color.style.display = 'flex';
+        color.style.alignItems = 'center';
+        color.style.justifyContent = 'center';
+        color.style.touchAction = 'manipulation';
+        color.style.webkitTapHighlightColor = 'transparent';
+        color.title = 'Select color';
+        color.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24pt\" width=\"24pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
             "     y=\"0px\"\n" +
             "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:" + this.settings['color'] + "\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
+            "<circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"" + this.settings['color'] + "\" stroke=\"#d1d5db\" stroke-width=\"32\"/>\n" +
             "</svg>\n"
         temp.push(color);
         this.colors = temp;
@@ -133,138 +154,57 @@ class Menu {
     openColorPicker = () => {
         const colorPicker = document.createElement("div");
         colorPicker.id = "rbirdColorPicker";
-        colorPicker.style.width = "200px";
-        colorPicker.style.height = "60px";
+        colorPicker.style.display = "flex";
+        colorPicker.style.gap = "10px";
+        colorPicker.style.padding = "15px";
         colorPicker.style.cursor = "pointer";
         colorPicker.style.backgroundColor = "white";
         colorPicker.style.position = "absolute";
         colorPicker.style.top = "80px";
         colorPicker.style.zIndex = "900000000000";
         colorPicker.style.left = "50%";
-        colorPicker.style.border = "1px solid lightgrey";
-        colorPicker.style.padding = "10px";
-        colorPicker.style.paddingTop = "15px";
+        colorPicker.style.transform = "translateX(-50%)";
+        colorPicker.style.border = "1px solid #e5e7eb";
+        colorPicker.style.borderRadius = "8px";
+        colorPicker.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
         document.body.appendChild(colorPicker);
 
-        const blackIcon = document.createElement("div");
-        blackIcon.style.float = "left";
-        blackIcon.addEventListener("click", (event) => {
-            this.onClick("color", "black");
-            if (this.colors[0]) {
-                this.colors[0].innerHTML =  "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-                    "     y=\"0px\"\n" +
-                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-                    "<path style=\"fill:black;\"\n" +
-                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-                    "/>\n" +
-                    "</svg>\n";
-            }
-        });
-        blackIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-            "     y=\"0px\"\n" +
-            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:#000000;\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
-            "</svg>\n";
-        colorPicker.appendChild(blackIcon);
-
-        const redIcon = document.createElement("div");
-        redIcon.style.float = "left";
-        redIcon.style.marginLeft = "10px";
-        redIcon.addEventListener("click", (event) => {
-            this.onClick("color", "red");
-            if (this.colors[0]) {
-                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-                    "     y=\"0px\"\n" +
-                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-                    "<path style=\"fill:red;\"\n" +
-                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-                    "/>\n" +
-                    "</svg>\n";
-            }
-        });
-        redIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-            "     y=\"0px\"\n" +
-            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:red;\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
-            "</svg>\n";
-        colorPicker.appendChild(redIcon);
-
-        const blueIcon = document.createElement("div");
-        blueIcon.style.float = "left";
-        blueIcon.style.marginLeft = "10px";
-        blueIcon.addEventListener("click", (event) => {
-            this.onClick("color", "blue");
-            if (this.colors[0]) {
-                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-                    "     y=\"0px\"\n" +
-                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-                    "<path style=\"fill:blue;\"\n" +
-                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-                    "/>\n" +
-                    "</svg>\n";
-            }
-
-        });
-        blueIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-            "     y=\"0px\"\n" +
-            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:blue;\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
-            "</svg>\n";
-        colorPicker.appendChild(blueIcon);
-
-        const yellowIcon = document.createElement("div");
-        yellowIcon.style.float = "left";
-        yellowIcon.style.marginLeft = "10px";
-        yellowIcon.addEventListener("click", (event) => {
-            this.onClick("color", "yellow");
-            if (this.colors[0]) {
-                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-                    "     y=\"0px\"\n" +
-                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-                    "<path style=\"fill:yellow;\"\n" +
-                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-                    "/>\n" +
-                    "</svg>\n";
-            }
-        });
-        yellowIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-            "     y=\"0px\"\n" +
-            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:yellow;\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
-            "</svg>\n";
-        colorPicker.appendChild(yellowIcon);
-
-        const greenIcon = document.createElement("div");
-        greenIcon.style.float = "left";
-        greenIcon.style.marginLeft = "10px";
-        greenIcon.addEventListener("click", (event) => {
-            this.onClick("color", "green");
-            if (this.colors[0]) {
-                this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-                    "     y=\"0px\"\n" +
-                    "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-                    "<path style=\"fill:green;\"\n" +
-                    "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-                    "/>\n" +
-                    "</svg>\n";
-            }
+        const colors = [
+            { name: 'black', hex: '#000000' },
+            { name: 'red', hex: '#ef4444' },
+            { name: 'blue', hex: '#3b82f6' },
+            { name: 'yellow', hex: '#fbbf24' },
+            { name: 'green', hex: '#10b981' }
+        ];
+
+        colors.forEach(colorObj => {
+            const colorIcon = document.createElement("div");
+            colorIcon.style.cursor = "pointer";
+            colorIcon.style.transition = "transform 0.2s";
+            colorIcon.addEventListener("mouseenter", () => {
+                colorIcon.style.transform = "scale(1.1)";
+            });
+            colorIcon.addEventListener("mouseleave", () => {
+                colorIcon.style.transform = "scale(1)";
+            });
+            colorIcon.addEventListener("click", (event) => {
+                this.onClick("color", colorObj.name);
+                if (this.colors[0]) {
+                    this.colors[0].innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24pt\" width=\"24pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                        "     y=\"0px\"\n" +
+                        "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                        "<circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"" + colorObj.hex + "\" stroke=\"#d1d5db\" stroke-width=\"32\"/>\n" +
+                        "</svg>\n";
+                }
+                this.closeColorPicker();
+            });
+            colorIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"28pt\" width=\"28pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
+                "     y=\"0px\"\n" +
+                "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
+                "<circle cx=\"256\" cy=\"256\" r=\"240\" fill=\"" + colorObj.hex + "\" stroke=\"#d1d5db\" stroke-width=\"32\"/>\n" +
+                "</svg>\n";
+            colorPicker.appendChild(colorIcon);
         });
-        greenIcon.innerHTML = "<svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20pt\" width=\"20pt\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n" +
-            "     y=\"0px\"\n" +
-            "     viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n" +
-            "<path style=\"fill:green;\"\n" +
-            "      d=\"M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0L256,0z\"\n" +
-            "/>\n" +
-            "</svg>\n";
-        colorPicker.appendChild(greenIcon);
 
         colorPicker.addEventListener("click", (event) => this.closeColorPicker());
     }
@@ -281,34 +221,84 @@ class Menu {
         this.updateButtons();
 
         const menu = document.createElement("div");
-        menu.classList.add("menu")
-
-        Object.keys(this.settings).forEach((setting) => {
-            const section = document.createElement("div");
-            section.style.float = "left";
-            this[setting + "s"].forEach((button) => section.appendChild(button));
-            menu.appendChild(section);
-        });
-
-        const nextButton = document.createElement('div')
-        nextButton.style.backgroundColor = 'green';
+        menu.classList.add("menu");
+        menu.style.display = "flex";
+        menu.style.alignItems = "center";
+        menu.style.gap = "15px";
+        menu.style.flexWrap = "wrap";
+
+        // Tools section (shapes)
+        const toolsSection = document.createElement("div");
+        toolsSection.style.display = "flex";
+        toolsSection.style.gap = "5px";
+        toolsSection.style.alignItems = "center";
+        toolsSection.style.paddingRight = "15px";
+        toolsSection.style.borderRight = "1px solid #ddd";
+        this.shapes.forEach((button) => toolsSection.appendChild(button));
+        menu.appendChild(toolsSection);
+
+        // Color section
+        const colorSection = document.createElement("div");
+        colorSection.style.display = "flex";
+        colorSection.style.gap = "5px";
+        colorSection.style.alignItems = "center";
+        colorSection.style.paddingRight = "15px";
+        colorSection.style.borderRight = "1px solid #ddd";
+        this.colors.forEach((button) => colorSection.appendChild(button));
+        menu.appendChild(colorSection);
+
+        // Reset section
+        const resetSection = document.createElement("div");
+        resetSection.style.display = "flex";
+        resetSection.style.gap = "5px";
+        resetSection.style.alignItems = "center";
+        this.resets.forEach((button) => resetSection.appendChild(button));
+        menu.appendChild(resetSection);
+
+        // Take Screenshot button
+        const nextButton = document.createElement('div');
+        nextButton.style.backgroundColor = '#10b981';
         nextButton.style.color = 'white';
-        nextButton.style.fontWeight = '500';
+        nextButton.style.fontWeight = '600';
         nextButton.innerHTML = "Take Screenshot";
-        nextButton.style.float = "left";
-        nextButton.style.padding = "13px";
-        nextButton.style.paddingTop = "8px";
-        nextButton.style.paddingBottom = "8px";
-        nextButton.style.fontFamily = "Arial";
-        nextButton.style.fontSize = "16px";
+        nextButton.style.padding = "10px 20px";
+        nextButton.style.fontFamily = "Arial, sans-serif";
+        nextButton.style.fontSize = "15px";
         nextButton.style.borderRadius = "8px";
-        nextButton.style.marginLeft = "10px";
         nextButton.style.cursor = "pointer";
+        nextButton.style.touchAction = "manipulation";
+        nextButton.style.userSelect = "none";
+        nextButton.style.webkitUserSelect = "none";
+        nextButton.style.webkitTapHighlightColor = "transparent";
+        nextButton.style.transition = "background-color 0.2s";
+        nextButton.style.whiteSpace = "nowrap";
+
+        nextButton.addEventListener("mouseenter", () => {
+            nextButton.style.backgroundColor = "#059669";
+        });
+
+        nextButton.addEventListener("mouseleave", () => {
+            nextButton.style.backgroundColor = "#10b981";
+        });
+
+        // Mobile responsive adjustments
+        if (window.innerWidth <= 768) {
+            nextButton.style.fontSize = "14px";
+            nextButton.style.padding = "8px 16px";
+            menu.style.gap = "8px";
+            toolsSection.style.paddingRight = "8px";
+            colorSection.style.paddingRight = "8px";
+        }
 
         nextButton.addEventListener("click", (event) => {
             RbirdScreenshotManager.getInstance().screenshot();
         });
 
+        // Add touch event for better mobile support
+        nextButton.addEventListener("touchstart", (event) => {
+            event.stopPropagation();
+        });
+
         menu.appendChild(nextButton);
 
         return menu;
@@ -380,9 +370,16 @@ export default class SVGEditor {
     }
 
     attachEvents(svg) {
+        // Mouse events
         svg.addEventListener("mousedown", this.onMouseDown.bind(this));
         svg.addEventListener("mousemove", this.onMouseMove.bind(this));
         svg.addEventListener("mouseup", this.onMouseUp.bind(this));
+
+        // Touch events for mobile/tablet
+        svg.addEventListener("touchstart", this.onTouchStart.bind(this), {passive: false});
+        svg.addEventListener("touchmove", this.onTouchMove.bind(this), {passive: false});
+        svg.addEventListener("touchend", this.onTouchEnd.bind(this));
+        svg.addEventListener("touchcancel", this.onTouchEnd.bind(this));
     }
 
     createMenu() {
@@ -409,6 +406,19 @@ export default class SVGEditor {
         element.style.padding = '10px';
         element.style.borderRadius = '8px';
         element.style.transform = 'translateX(-50%)';
+        element.style.touchAction = 'manipulation';
+        element.style.userSelect = 'none';
+        element.style.webkitUserSelect = 'none';
+        element.style.zIndex = '900000001';
+
+        // Mobile responsive adjustments
+        if (window.innerWidth <= 768) {
+            element.style.padding = '8px';
+            element.style.top = '5px';
+            element.style.maxWidth = '95vw';
+            element.style.overflowX = 'auto';
+        }
+
         return element;
     }
 
@@ -416,6 +426,37 @@ export default class SVGEditor {
         this.codeSection.innerText = this.svg.innerHTML.replace(new RegExp("><", "g"), ">\n<");
     }
 
+    getEventPosition(event) {
+        // Handle touch events
+        if (event.touches && event.touches.length > 0) {
+            const touch = event.touches[0];
+            const rect = this.svg.getBoundingClientRect();
+            return {
+                x: touch.clientX - rect.left,
+                y: touch.clientY - rect.top
+            };
+        }
+        // Handle mouse events
+        return {
+            x: event.offsetX,
+            y: event.offsetY
+        };
+    }
+
+    onTouchStart(event) {
+        event.preventDefault();
+        this.onMouseDown(event);
+    }
+
+    onTouchMove(event) {
+        event.preventDefault();
+        this.onMouseMove(event);
+    }
+
+    onTouchEnd(event) {
+        this.onMouseUp();
+    }
+
     onMouseDown(event) {
         this.createdObject = document.createElementNS(svgns, this.menuSettings.shape);
         this.createdObject.setAttributeNS(null, "fill", this.menuSettings.fill);
@@ -423,10 +464,8 @@ export default class SVGEditor {
         this.createdObject.setAttributeNS(null, "stroke-width", String(this.menuSettings.size));
         this.svg.appendChild(this.createdObject);
 
-        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = {
-            x: event.offsetX,
-            y: event.offsetY
-        };
+        const position = this.getEventPosition(event);
+        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = position;
 
         switch (this.menuSettings.shape) {
             case "path":
@@ -441,7 +480,7 @@ export default class SVGEditor {
             return;
 
         this.lastMousePosition = this.currentMousePosition;
-        this.currentMousePosition = {x: event.offsetX, y: event.offsetY};
+        this.currentMousePosition = this.getEventPosition(event);
 
         this.updateCurrentObject();
     }

package/src/Styles.js

@@ -85,6 +85,7 @@ export const injectStyledCSS = (
     font-family: inherit;
     overflow-y: hidden;
     height: ${!isMobile ? '725px' : '100%'};
+    max-height: ${!isMobile ? '725px' : '100%'};
     text-align: center;
     bottom: ${!isMobile ? spaceBottom + 30 : 0}px;
     right: ${(launcherPosition === 'right' && !isMobile) ? (spaceLeftRight + 10) + 'px' : 'unset'};
@@ -92,6 +93,20 @@ export const injectStyledCSS = (
     top: ${!isMobile ? 'unset' : 0}px;
 }
 
+@media (min-width: 769px) and (max-width: 1024px) {
+    .cta__modal {
+        width: 100% !important;
+        height: 100% !important;
+        max-height: 100vh !important;
+        bottom: 0 !important;
+        top: env(safe-area-inset-top) !important;
+        left: 0 !important;
+        right: 0 !important;
+        border-radius: 0 !important;
+        padding-top: env(safe-area-inset-top);
+    }
+}
+
 .cta__modal_loading {
     position: fixed;
     outline: none;
@@ -296,6 +311,41 @@ background: transparent
         width: 100%;
     }
 }
+
+.rbird-screenshot-loader {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 900000010;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.95);
+    padding: 30px 40px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.rbird-screenshot-loader-spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: rbird-spin 1s linear infinite;
+    margin: 0 auto 15px;
+}
+
+.rbird-screenshot-loader-text {
+    color: #333;
+    font-size: 16px;
+    font-weight: 500;
+    font-family: Arial, sans-serif;
+}
+
+@keyframes rbird-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
     }`
 
     const oldNode = document.querySelector(".rbird-styles");

package/webpack.config.js

@@ -66,7 +66,7 @@ module.exports = {
     new webpack.DefinePlugin({
       PRODUCTION: 'true',
       API: JSON.stringify("https://api.releasebird.com/papi"),
-      CONTENT_URL:  JSON.stringify("https://prod.d2ihnay16ya32m.amplifyapp.com"),
+      CONTENT_URL:  JSON.stringify("https://wcontent.releasebird.net"),
     }),
     {
       apply: (compiler) => {