From 396fd2d01272c46a1b7f8bf91a406dd638ae898d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Jul 2021 20:39:44 +0200
Subject: [PATCH] Move silence button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/toasts/_IncomingCallToast.scss | 43 ++++++++++----------
 src/toasts/IncomingCallToast.tsx             | 10 ++---
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index bcfb61ed21..04f92bb095 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -29,7 +29,6 @@ limitations under the License.
     background-color: $voipcall-plinth-color; // To match mx_Toast
 
     pointer-events: initial; // restore pointer events so the user can accept/decline
-    cursor: pointer;
 
     .mx_IncomingCallToast_content {
         display: flex;
@@ -119,30 +118,30 @@ limitations under the License.
                 }
             }
         }
+    }
 
-        .mx_IncomingCallToast_iconButton {
-            display: flex;
-            position: absolute;
-            right: 8px;
+    .mx_IncomingCallToast_iconButton {
+        display: flex;
+        height: 20px;
+        width: 20px;
 
-            &::before {
-                content: '';
+        &::before {
+            content: '';
 
-                height: 20px;
-                width: 20px;
-                background-color: $tertiary-fg-color;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-position: center;
-            }
-        }
-
-        .mx_IncomingCallToast_silence::before {
-            mask-image: url('$(res)/img/voip/silence.svg');
-        }
-
-        .mx_IncomingCallToast_unSilence::before {
-            mask-image: url('$(res)/img/voip/un-silence.svg');
+            height: inherit;
+            width: inherit;
+            background-color: $tertiary-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
         }
     }
+
+    .mx_IncomingCallToast_silence::before {
+        mask-image: url('$(res)/img/voip/silence.svg');
+    }
+
+    .mx_IncomingCallToast_unSilence::before {
+        mask-image: url('$(res)/img/voip/un-silence.svg');
+    }
 }
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index f8a7f0591f..7a7aacac12 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -113,11 +113,6 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
                     <div className="mx_CallEvent_type_icon" />
                     { isVoice ? _t("Voice call") : _t("Video call") }
                 </div>
-                <AccessibleTooltipButton
-                    className={silenceClass}
-                    onClick={this.onSilenceClick}
-                    title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
-                />
                 <div className="mx_IncomingCallToast_buttons">
                     <AccessibleButton
                         className="mx_IncomingCallToast_button mx_IncomingCallToast_button_decline"
@@ -135,6 +130,11 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
                     </AccessibleButton>
                 </div>
             </div>
+            <AccessibleTooltipButton
+                className={silenceClass}
+                onClick={this.onSilenceClick}
+                title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
+            />
         </React.Fragment>;
     }
 }