From 67b0078b334e6ebd509c9f0679fa4624b1a0154f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 23 May 2022 07:42:48 +0000
Subject: [PATCH] Integrate thread panel's header style declarations with those
 of BaseCard (#8651)

* Variable on mx_BaseCard_Header

- Use a variable for margin of buttons on mx_BaseCard_header
- Reduce default margin instead of setting negative left and right values
- Set margin to span in order to ensure spacing between the back button and the span (6px: 30px - 24px)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use the same variable to the mask button

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove obsolete declarations - mx_ThreadPanel_button

mx_ThreadPanel_button does not seem to be used anywhere.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/right_panel/_BaseCard.scss    |  9 ++--
 res/css/views/right_panel/_ThreadPanel.scss | 50 +++++++--------------
 2 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
index db492a0825..39e699a60a 100644
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@@ -25,7 +25,9 @@ limitations under the License.
     flex: 1;
 
     .mx_BaseCard_header {
-        margin: 4px 0;
+        --BaseCard_header_button-margin: $spacing-12;
+
+        margin: $spacing-4 0;
 
         > h2 {
             margin: 0 44px;
@@ -36,12 +38,13 @@ limitations under the License.
             white-space: nowrap;
         }
 
-        .mx_BaseCard_back, .mx_BaseCard_close {
+        .mx_BaseCard_back,
+        .mx_BaseCard_close {
             position: absolute;
             background-color: rgba(141, 151, 165, 0.2);
             height: 20px;
             width: 20px;
-            margin: 12px;
+            margin: var(--BaseCard_header_button-margin);
             top: 0;
             border-radius: 50%;
 
diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
index cfcaa8c789..4e93b00116 100644
--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/res/css/views/right_panel/_ThreadPanel.scss
@@ -15,32 +15,38 @@ limitations under the License.
 */
 
 .mx_ThreadPanel {
+    --ThreadPanel_header-button-size: 24px;
+
     display: flex;
     flex-direction: column;
     height: 100px;
     overflow: visible;
 
     .mx_BaseCard_header {
-        margin-bottom: 12px;
+        margin-bottom: $spacing-12;
 
         .mx_BaseCard_close,
         .mx_BaseCard_back {
-            width: 24px;
-            height: 24px;
+            width: var(--ThreadPanel_header-button-size);
+            height: var(--ThreadPanel_header-button-size);
         }
 
         .mx_BaseCard_back {
-            left: -4px;
+            margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
         }
 
         .mx_BaseCard_close {
-            right: -4px;
+            margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
         }
     }
 
     .mx_BaseCard_back ~ .mx_ThreadPanel__header {
         width: calc(100% - 60px);
-        margin-left: 30px;
+        margin-inline-start: var(--ThreadPanel_header-button-size);
+
+        span {
+            margin-inline-start: 6px;
+        }
     }
 
     .mx_ThreadPanel__header {
@@ -68,42 +74,16 @@ limitations under the License.
         }
 
         .mx_MessageActionBar_maskButton {
-            --size: 24px;
-            width: var(--size);
-            height: var(--size);
+            width: var(--ThreadPanel_header-button-size);
+            height: var(--ThreadPanel_header-button-size);
 
             &::after {
-                mask-size: var(--size);
+                mask-size: var(--ThreadPanel_header-button-size);
                 mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
             }
         }
     }
 
-    .mx_ThreadPanel_button {
-        width: 20px;
-        height: 20px;
-        margin-top: -3px;
-        margin-bottom: auto;
-        position: relative;
-
-        &::before {
-            top: 2px;
-            left: 2px;
-            content: '';
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background: $primary-content;
-        }
-
-        &.mx_ThreadPanel_OptionsButton::before {
-            mask-image: url('$(res)/img/element-icons/context-menu.svg');
-        }
-    }
-
     .mx_AutoHideScrollbar,
     .mx_RoomView_messagePanelSpinner {
         background-color: $background;