From 3366c21e6b2cdb4e2ecd5e1761d8ec95d699b4dc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 10 Dec 2021 14:49:49 +0000
Subject: [PATCH 1/4] Iterate space panel toggle collapse interaction

---
 res/css/structures/_SpacePanel.scss | 44 +++++++++--------------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 781beaa149d..fbb0ebe1b9c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -36,49 +36,33 @@ $activeBorderColor: $primary-content;
     flex-direction: column;
 
     .mx_SpacePanel_toggleCollapse {
-        position: relative;
-        height: 32px;
-        width: 32px;
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background-color: $tertiary-content;
+        top: 18px; // v-align with avatar
+        right: -10px;
 
         &::before {
             content: "";
             position: absolute;
-            width: 32px;
-            height: 32px;
-            left: 0;
-            mask-position: center;
-            mask-size: 24px;
+            width: inherit;
+            height: inherit;
+            mask-position: center 1px; // center the chevron more visually
+            mask-size: 20px;
             mask-repeat: no-repeat;
-            background-color: $secondary-content;
+            background-color: $background;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
             transform: rotate(270deg);
         }
 
         &:not(.expanded) {
-            position: absolute;
-            left: 68px;
-            top: 12px;
-            border-radius: 0 8px 8px 0;
-            background-color: $primary-content;
             opacity: 0;
-
-            &::before {
-                background-color: $background;
-            }
         }
 
-        &.expanded {
-            margin-left: auto;
-            margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke
-            border-radius: 8px;
-
-            &::before {
-                transform: rotate(90deg);
-            }
-
-            &:hover {
-                background-color: $panel-actions;
-            }
+        &.expanded::before {
+            transform: rotate(90deg);
         }
     }
 

From 24da30d645deaefd98753cd5d744f83424c2a4c0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 10 Dec 2021 14:55:18 +0000
Subject: [PATCH 2/4] Tweak to match Figma

---
 res/css/structures/_SpacePanel.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index fbb0ebe1b9c..ce0d308812c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -49,7 +49,7 @@ $activeBorderColor: $primary-content;
             position: absolute;
             width: inherit;
             height: inherit;
-            mask-position: center 1px; // center the chevron more visually
+            mask-position: center;
             mask-size: 20px;
             mask-repeat: no-repeat;
             background-color: $background;
@@ -58,7 +58,16 @@ $activeBorderColor: $primary-content;
         }
 
         &:not(.expanded) {
+            width: 24px;
+            height: 24px;
             opacity: 0;
+            top: 16px; // v-align with avatar
+            right: -14px;
+
+            &::before {
+                mask-size: 24px;
+                mask-position: center 1px;
+            }
         }
 
         &.expanded::before {

From 7beb548cee63ee7e454798d6932f9e6e29d83ff5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Dec 2021 09:29:33 +0000
Subject: [PATCH 3/4] Iterate PR based on review

---
 res/css/structures/_SpacePanel.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index ce0d308812c..0a59cdca199 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -50,7 +50,7 @@ $activeBorderColor: $primary-content;
             width: inherit;
             height: inherit;
             mask-position: center;
-            mask-size: 20px;
+            mask-size: contain;
             mask-repeat: no-repeat;
             background-color: $background;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
@@ -58,14 +58,14 @@ $activeBorderColor: $primary-content;
         }
 
         &:not(.expanded) {
-            width: 24px;
-            height: 24px;
+            width: 18px;
+            height: 18px;
             opacity: 0;
-            top: 16px; // v-align with avatar
-            right: -14px;
+            top: 19px; // v-align with avatar
+            right: -8px;
 
             &::before {
-                mask-size: 24px;
+                mask-size: contain;
                 mask-position: center 1px;
             }
         }

From c68d502ccbaa1a791d9565bfe1043c44a45278c7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 13 Dec 2021 12:50:07 +0000
Subject: [PATCH 4/4] fix thing

---
 res/css/structures/_SpacePanel.scss | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 0a59cdca199..1f2f5f4a58c 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -37,12 +37,12 @@ $activeBorderColor: $primary-content;
 
     .mx_SpacePanel_toggleCollapse {
         position: absolute;
-        height: 20px;
-        width: 20px;
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
         background-color: $tertiary-content;
-        top: 18px; // v-align with avatar
-        right: -10px;
+        top: 19px; // v-align with avatar
+        right: -8px;
 
         &::before {
             content: "";
@@ -58,14 +58,9 @@ $activeBorderColor: $primary-content;
         }
 
         &:not(.expanded) {
-            width: 18px;
-            height: 18px;
             opacity: 0;
-            top: 19px; // v-align with avatar
-            right: -8px;
 
             &::before {
-                mask-size: contain;
                 mask-position: center 1px;
             }
         }