From 46f07a8edbf2f85e54f1c9a3ee6c14bf2b86d519 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 8 Jun 2022 08:22:43 +0000
Subject: [PATCH] Organize style rules of ThreadPanel header (#8672)

* Move declarations for ThreadPanel_dropdown to '.ThreadPanel__header'

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

* Move declarations under '.mx_ThreadPanel_dropdown'

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

* Move '~ .mx_ThreadPanel__header'

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

* Move '.mx_ThreadPanel__header' under '.mx_BaseCard_header'

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

* Use spacing variables for dropdown

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

* yarn run link:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/right_panel/_ThreadPanel.scss | 114 ++++++++++----------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
index ce4a5d7903..eccd2d7624 100644
--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/res/css/views/right_panel/_ThreadPanel.scss
@@ -33,53 +33,76 @@ limitations under the License.
 
         .mx_BaseCard_back {
             margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
+
+            ~ .mx_ThreadPanel__header {
+                width: calc(100% - 60px);
+                margin-inline-start: var(--ThreadPanel_header-button-size);
+
+                span {
+                    margin-inline-start: 6px;
+                }
+            }
         }
 
         .mx_BaseCard_close {
             margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
         }
-    }
 
-    .mx_BaseCard_back ~ .mx_ThreadPanel__header {
-        width: calc(100% - 60px);
-        margin-inline-start: var(--ThreadPanel_header-button-size);
+        .mx_ThreadPanel__header {
+            width: calc(100% - 38px);
+            height: 24px;
+            display: flex;
+            flex: 1;
+            justify-content: space-between;
+            align-items: center;
 
-        span {
-            margin-inline-start: 6px;
-        }
-    }
+            span:first-of-type {
+                font-weight: 600;
+                font-size: 15px;
+                line-height: 18px;
+                color: $secondary-content;
+            }
 
-    .mx_ThreadPanel__header {
-        width: calc(100% - 38px);
-        height: 24px;
-        display: flex;
-        flex: 1;
-        justify-content: space-between;
-        align-items: center;
+            .mx_AccessibleButton {
+                font-size: 12px;
+                color: $secondary-content;
+            }
 
-        span:first-of-type {
-            font-weight: 600;
-            font-size: 15px;
-            line-height: 18px;
-            color: $secondary-content;
-        }
+            .mx_MessageActionBar_optionsButton {
+                position: relative;
+            }
 
-        .mx_AccessibleButton {
-            font-size: 12px;
-            color: $secondary-content;
-        }
+            .mx_MessageActionBar_maskButton {
+                width: var(--ThreadPanel_header-button-size);
+                height: var(--ThreadPanel_header-button-size);
 
-        .mx_MessageActionBar_optionsButton {
-            position: relative;
-        }
+                &::after {
+                    mask-size: var(--ThreadPanel_header-button-size);
+                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
+                }
+            }
 
-        .mx_MessageActionBar_maskButton {
-            width: var(--ThreadPanel_header-button-size);
-            height: var(--ThreadPanel_header-button-size);
+            .mx_ThreadPanel_dropdown {
+                padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
+                border-radius: 4px;
+                line-height: 1.5;
+                user-select: none;
 
-            &::after {
-                mask-size: var(--ThreadPanel_header-button-size);
-                mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
+                &:hover,
+                &[aria-expanded=true] {
+                    background: $quinary-content;
+                }
+
+                &::before {
+                    content: "";
+                    width: 18px;
+                    height: 18px;
+                    background: currentColor;
+                    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                    mask-size: 100%;
+                    mask-repeat: no-repeat;
+                    float: right;
+                }
             }
         }
     }
@@ -179,29 +202,6 @@ limitations under the License.
         box-sizing: border-box;
     }
 
-    .mx_ThreadPanel_dropdown {
-        padding: 3px 4px 3px 8px;
-        border-radius: 4px;
-        line-height: 1.5;
-        user-select: none;
-    }
-
-    .mx_ThreadPanel_dropdown:hover,
-    .mx_ThreadPanel_dropdown[aria-expanded=true] {
-        background: $quinary-content;
-    }
-
-    .mx_ThreadPanel_dropdown::before {
-        content: "";
-        width: 18px;
-        height: 18px;
-        background: currentColor;
-        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
-        mask-size: 100%;
-        mask-repeat: no-repeat;
-        float: right;
-    }
-
     .mx_MessageTimestamp {
         font-size: $font-12px;
         color: $secondary-content;