From 3e59813d0a46ed3e531b091c53d9cc18da009922 Mon Sep 17 00:00:00 2001
From: jparez <jparez@genymobile.com>
Date: Wed, 8 Jan 2025 10:49:42 +0100
Subject: [PATCH] fix temp. border effect on modal

---
 src/plugins/Screencast.js              |  4 ++--
 src/scss/components/_screencast.scss   | 24 +++++++++++++++++-------
 src/scss/components/_widgetwindow.scss | 15 ---------------
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/plugins/Screencast.js b/src/plugins/Screencast.js
index a23b881b..7a876cfc 100644
--- a/src/plugins/Screencast.js
+++ b/src/plugins/Screencast.js
@@ -247,7 +247,7 @@ module.exports = class Screencast extends OverlayPlugin {
         this.screenshotBtn = document.createElement('div');
         this.screenshotBtn.className = 'gm-action gm-screencast-screenshot';
         screenshot.onclick = this.onScreenshotClick.bind(this);
-        screenshot.className = 'gm-horizontal gm-screenshot';
+        screenshot.className = 'gm-screenshot';
 
         const screenshotLabel = this.i18n.SCREENCAST_SCREENSHOT || 'Screenshot';
         screenshot.innerHTML = '<label>' + screenshotLabel + '</label>';
@@ -260,7 +260,7 @@ module.exports = class Screencast extends OverlayPlugin {
         this.screencastBtn.className = 'gm-action gm-screencast-screencast';
 
         this.screencast.onclick = this.onScreencastClick.bind(this);
-        this.screencast.className = 'gm-horizontal gm-screencast';
+        this.screencast.className = 'gm-screencast';
 
         const screencastLabel = this.i18n.SCREENCAST_SCREENCAST || 'Screencast';
         this.screencast.innerHTML = '<label>' + screencastLabel + '</label>';
diff --git a/src/scss/components/_screencast.scss b/src/scss/components/_screencast.scss
index 3825f75a..54e144a5 100644
--- a/src/scss/components/_screencast.scss
+++ b/src/scss/components/_screencast.scss
@@ -24,33 +24,43 @@
             pointer-events: none;
         }
 
+        .gm-inputs {
+            display: flex;
+        }
+
         .gm-screenshot,
         .gm-screencast {
             display: inline-block;
             width: auto;
             margin-right: 50px;
+            display: flex;
+            flex-direction: row-reverse;
 
             .gm-action {
                 width: 32px;
                 min-height: 32px;
                 cursor: pointer;
                 display: block;
-                float: left;
-                background-size: 26px;
-                background-repeat: no-repeat;
-                background-position: center;
+                -webkit-mask-size: contain;
+                mask-size: contain;
+                -webkit-mask-repeat: no-repeat;
+                mask-repeat: no-repeat;
+                -webkit-mask-position: center;
+                mask-position: center;
+                background-color: var(--gm-toolbar-icon-color);
             }
         }
 
         .gm-screenshot .gm-action {
-            background-image: url('../assets/images/ic-screenshot_default.svg');
+            mask-image: url('../assets/images/ic_screenshot.svg');
+            --webkit-mask-image: url('../assets/images/ic_screenshot.svg');
         }
 
         .gm-screencast .gm-action {
-            background-image: url('../assets/images/ic-screencast_default.svg');
+            mask-image: url('../assets/images/ic_screencast.svg');
+            --webkit-mask-image: url('../assets/images/ic_screencast.svg');
 
             .disabled {
-                background-image: url('../assets/images/ic-screencast_disabled.svg');
                 color: var(--gm-btn-bg-color-disabled);
             }
         }
diff --git a/src/scss/components/_widgetwindow.scss b/src/scss/components/_widgetwindow.scss
index f73ccbcf..3be8508d 100644
--- a/src/scss/components/_widgetwindow.scss
+++ b/src/scss/components/_widgetwindow.scss
@@ -47,21 +47,6 @@
         margin-bottom: 30px;
     }
 
-    // TODO delete when screencast will be reworked
-    .gm-horizontal {
-        margin: 15px 0;
-
-        label,
-        input,
-        button {
-            display: inline-block;
-        }
-
-        label {
-            width: 50%;
-        }
-    }
-
     button {
         color: var(--gm-btn-text-color);
         background-color: var(--gm-btn-bg-color);