From b33d11440225cea7fcc919545404a78819311d0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 20 Feb 2024 14:50:18 +0100
Subject: [PATCH] :bug: Fix chevron icon behavior on title bars

---
 .../src/app/main/ui/components/title_bar.cljs | 13 ++-
 .../src/app/main/ui/components/title_bar.scss | 99 +++++++++----------
 2 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs
index dcce61678..7c7a50af3 100644
--- a/frontend/src/app/main/ui/components/title_bar.cljs
+++ b/frontend/src/app/main/ui/components/title_bar.cljs
@@ -11,10 +11,13 @@
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
 
+(def ^:private chevron-icon
+  (i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
+
 (mf/defc title-bar
   {::mf/wrap-props false}
   [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
-  (let [klass (dm/str (stl/css :title-bar) " " class)]
+  (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)]
     [:div {:class klass}
      (if ^boolean collapsable
        [:div {:class (stl/css :title-wrapper)}
@@ -23,15 +26,15 @@
                     :on-click on-collapsed}
            [:span {:class (stl/css-case
                            :collapsabled-icon true
-                           :rotated collapsed)}
-            i/arrow-refactor]
+                           :collapsed collapsed)}
+            chevron-icon]
            [:div {:class (stl/css :title)} title]]
           [:*
            [:button {:class (stl/css-case
                              :collapsabled-icon true
-                             :rotated collapsed)
+                             :collapsed collapsed)
                      :on-click on-collapsed}
-            i/arrow-refactor]
+            chevron-icon]
            [:div {:class (stl/css :title)} title]])]
        [:div {:class (stl/css-case :title-only true
                                    :title-only-icon-gap add-icon-gap
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index bfbd756fc..8321ac49e 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -45,63 +45,12 @@
   color: var(--title-foreground-color);
   stroke: var(--title-foreground-color);
   overflow: hidden;
-  .toggle-btn {
-    @include buttonStyle;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    padding: 0;
-    color: var(--title-foreground-color);
-    stroke: var(--title-foreground-color);
-    overflow: hidden;
-    .collapsabled-icon {
-      @include flexCenter;
-      height: $s-24;
-      border-radius: $br-8;
-      svg {
-        @extend .button-icon-small;
-        transform: rotate(90deg);
-        stroke: var(--icon-foreground);
-      }
-      &.rotated svg {
-        transform: rotate(0deg);
-      }
-    }
-    &:hover {
-      color: var(--title-foreground-color-hover);
-      stroke: var(--title-foreground-color-hover);
-      .title {
-        color: var(--title-foreground-color-hover);
-        stroke: var(--title-foreground-color-hover);
-      }
-      .collapsabled-icon svg {
-        stroke: var(--title-foreground-color-hover);
-      }
-    }
-  }
-  .collapsabled-icon {
-    @include buttonStyle;
-    @include flexCenter;
-    height: $s-24;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon-small;
-      transform: rotate(90deg);
-      stroke: var(--icon-foreground);
-    }
-    &.rotated svg {
-      transform: rotate(0deg);
-    }
-  }
+
   &:hover {
     color: var(--title-foreground-color-hover);
-    stroke: var(--title-foreground-color-hover);
     .title {
       stroke: var(--title-foreground-color-hover);
     }
-    .collapsabled-icon svg {
-      stroke: var(--title-foreground-color-hover);
-    }
   }
 }
 
@@ -137,3 +86,49 @@
 .title-only-icon-gap {
   --title-bar-title-margin: #{$s-12};
 }
+
+.toggle-btn {
+  @include buttonStyle;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding: 0;
+  color: var(--title-foreground-color);
+  stroke: var(--title-foreground-color);
+  overflow: hidden;
+
+  --chevron-icon-color: var(--icon-foreground);
+
+  &:hover {
+    --chevron-icon-color: var(--title-foreground-color-hover);
+
+    color: var(--title-foreground-color-hover);
+    .title {
+      color: var(--title-foreground-color-hover);
+      stroke: var(--title-foreground-color-hover);
+    }
+  }
+}
+
+.collapsabled-icon {
+  @include buttonStyle;
+  @include flexCenter;
+  height: $s-24;
+  border-radius: $br-8;
+
+  --chevron-icon-rotation: 90deg;
+
+  &.collapsed {
+    --chevron-icon-rotation: 0deg;
+  }
+
+  &:hover {
+    --chevron-icon-color: var(--title-foreground-color-hover);
+  }
+}
+
+.chevron-icon {
+  @extend .button-icon-small;
+  transform: rotate(var(--chevron-icon-rotation));
+  stroke: var(--chevron-icon-color);
+}