From c89a1b3b27023195e1384b697c062cea53488c1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 9 Feb 2024 15:44:53 +0100
Subject: [PATCH] :bug: Fix extend button style in prototype tab

---
 .../styles/common/refactor/basic-rules.scss   |  11 +-
 .../styles/common/refactor/design-tokens.scss |   4 +
 .../sidebar/options/menus/interactions.cljs   |   4 +-
 .../sidebar/options/menus/interactions.scss   | 288 +++++++++---------
 4 files changed, 164 insertions(+), 143 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 29a9219f0b..83f2c904cb 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -125,10 +125,11 @@
   @include buttonStyle;
   @include flexCenter;
   @include focusTertiary;
+  --button-tertiary-border-width: $s-2;
   border-radius: $br-8;
   color: var(--button-tertiary-foreground-color-rest);
   background-color: transparent;
-  border: $s-2 solid transparent;
+  border: var(--button-tertiary-border-width) solid transparent;
   svg,
   span svg {
     stroke: var(--button-tertiary-foreground-color-rest);
@@ -136,7 +137,7 @@
   &:hover {
     background-color: var(--button-tertiary-background-color-hover);
     color: var(--button-tertiary-foreground-color-hover);
-    border: $s-2 solid var(--button-secondary-border-color-hover);
+    border-color: var(--button-secondary-border-color-hover);
     svg,
     span svg {
       stroke: var(--button-tertiary-foreground-color-hover);
@@ -144,7 +145,7 @@
   }
   &:active {
     outline: none;
-    border: $s-2 solid transparent;
+    border-color: transparent;
     background-color: var(--button-tertiary-background-color-active);
     color: var(--button-tertiary-foreground-color-active);
     svg,
@@ -169,7 +170,7 @@
 
 .button-icon-selected {
   outline: none;
-  border: $s-2 solid var(--button-icon-border-color-selected);
+  border-color: var(--button-icon-border-color-selected);
   background-color: var(--button-icon-background-color-selected);
   color: var(--button-icon-foreground-color-selected);
   svg {
@@ -183,7 +184,7 @@
   @include focusRadio;
   border-radius: $br-8;
   color: var(--button-radio-foreground-color-rest);
-  border: $s-1 solid var(--button-radio-background-color-rest);
+  border-color: $s-1 solid var(--button-radio-background-color-rest);
   svg,
   span svg {
     stroke: var(--button-radio-foreground-color-rest);
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 67abb7774a..799195f848 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -65,6 +65,9 @@
   --button-tertiary-border-color-focus: var(--color-accent-primary);
   --button-tertiary-foreground-color-focus: var(--color-foreground-primary);
 
+  --expand-button-icon-border-width: 0;
+  --expand-button-icon-border-width-selected: 0;
+
   --button-icon-foreground-color: var(--color-foreground-secondary);
   --button-icon-foreground-color-hover: var(--color-foreground-secondary);
   --button-icon-background-color-selected: var(--color-background-quaternary);
@@ -396,4 +399,5 @@
   --assets-item-name-foreground-color: var(--color-foreground-primary);
 
   --text-editor-selection-background-color: var(--la-tertiary-70);
+  --expand-button-icon-border-width-selected: 2px;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
index c88dbc51b7..f5f04bb7ac 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
@@ -403,10 +403,10 @@
 
 
     [:div {:class (stl/css-case  :element-set-options-group true
-                                 :open extended-open?)}
+                                 :element-set-options-group-open extended-open?)}
           ; Summary
      [:div {:class (stl/css :interactions-summary)}
-      [:div {:class (stl/css-case :extend-btn true
+      [:button {:class (stl/css-case :extend-btn true
                                   :extended extended-open?)
              :on-click toggle-extended}
        i/menu-refactor]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index cc3679140f..09c1b42077 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -96,151 +96,167 @@
   @include flexColumn($s-12);
 }
 
-.element-set-options-group {
-  &.open {
-    @include flexColumn;
-    .extended-options {
-      @include flexColumn;
-      .property-row {
-        @extend .attr-row;
-        &.big-row {
-          height: 100%;
-        }
-        .interaction-name {
-          @include twoLineTextEllipsis;
-          @include titleTipography;
-          padding-left: $s-4;
-          width: $s-92;
-          margin: auto 0;
-          grid-area: name;
-          color: var(--title-foreground-color);
-        }
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          grid-area: content;
-          .easing-select {
-            width: $s-156;
-            padding: 0 $s-8;
-            .dropdown-upwards {
-              bottom: $s-36;
-              width: $s-156;
-              top: unset;
-            }
-          }
-        }
-        .input-element-wrapper {
-          @extend .input-element;
-          grid-area: content;
-        }
-        .checkbox-option {
-          @extend .input-checkbox;
-          grid-area: content;
-        }
-        .position-btns-wrapper {
-          grid-area: content;
-          display: grid;
-          grid-template-areas:
-            "topleft top topright"
-            "left center right"
-            "bottomleft bottom bottomright";
-          grid-template-columns: repeat(3, 1fr);
-          grid-template-rows: repeat(3, 1fr);
-          width: $s-84;
-          height: $s-84;
-          border-radius: $br-8;
-          background-color: var(--color-background-tertiary);
-          .direction-btn {
-            @extend .button-tertiary;
-            height: $s-28;
-            width: $s-28;
-            .rectangle {
-              height: $s-8;
-              width: $s-8;
-              background-color: var(--color-background-quaternary);
-            }
-            &:hover {
-              .rectangle {
-                background-color: var(--color-accent-primary);
-              }
-            }
-            &.active {
-              background-color: var(--color-background-quaternary);
-              .rectangle {
-                background-color: var(--color-accent-primary);
-              }
-            }
-          }
-          .center-btn {
-            grid-area: center;
-          }
-          .top-left-btn {
-            grid-area: topleft;
-          }
-          .top-right-btn {
-            grid-area: topright;
-          }
-          .top-center-btn {
-            grid-area: top;
-          }
-          .bottom-left-btn {
-            grid-area: bottomleft;
-          }
-          .bottom-right-btn {
-            grid-area: bottomright;
-          }
-          .bottom-center-btn {
-            grid-area: bottom;
-          }
-        }
-        .buttons-wrapper {
-          grid-area: content;
-          .right svg {
-            transform: rotate(-90deg);
-          }
-          .left svg {
-            transform: rotate(90deg);
-          }
-          .up svg {
-            transform: rotate(180deg);
-          }
-        }
-        .inputs-wrapper {
-          grid-area: content;
-          @include flexRow;
-          .radio-btn {
-            @extend .input-checkbox;
-          }
-        }
+.element-set-options-group-open {
+  @include flexColumn;
+}
+
+.extended-options {
+  @include flexColumn;
+}
+
+.property-row {
+  @extend .attr-row;
+  &.big-row {
+    height: 100%;
+  }
+  .interaction-name {
+    @include twoLineTextEllipsis;
+    @include titleTipography;
+    padding-left: $s-4;
+    width: $s-92;
+    margin: auto 0;
+    grid-area: name;
+    color: var(--title-foreground-color);
+  }
+  .select-wrapper {
+    display: flex;
+    align-items: center;
+    grid-area: content;
+    .easing-select {
+      width: $s-156;
+      padding: 0 $s-8;
+      .dropdown-upwards {
+        bottom: $s-36;
+        width: $s-156;
+        top: unset;
       }
     }
   }
-
-  .interactions-summary {
-    @extend .asset-element;
-    height: $s-44;
-    padding: 0;
-    gap: $s-4;
-    .extend-btn {
+  .input-element-wrapper {
+    @extend .input-element;
+    grid-area: content;
+  }
+  .checkbox-option {
+    @extend .input-checkbox;
+    grid-area: content;
+  }
+  .position-btns-wrapper {
+    grid-area: content;
+    display: grid;
+    grid-template-areas:
+      "topleft top topright"
+      "left center right"
+      "bottomleft bottom bottomright";
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    width: $s-84;
+    height: $s-84;
+    border-radius: $br-8;
+    background-color: var(--color-background-tertiary);
+    .direction-btn {
       @extend .button-tertiary;
-      height: 100%;
+      height: $s-28;
       width: $s-28;
-      svg {
-        @extend .button-icon;
+      .rectangle {
+        height: $s-8;
+        width: $s-8;
+        background-color: var(--color-background-quaternary);
       }
-      &.extended {
-        @extend .button-icon-selected;
+      &:hover {
+        .rectangle {
+          background-color: var(--color-accent-primary);
+        }
+      }
+      &.active {
+        background-color: var(--color-background-quaternary);
+        .rectangle {
+          background-color: var(--color-accent-primary);
+        }
       }
     }
-
-    .remove-btn {
-      @extend .button-tertiary;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon-small;
-      }
+    .center-btn {
+      grid-area: center;
     }
+    .top-left-btn {
+      grid-area: topleft;
+    }
+    .top-right-btn {
+      grid-area: topright;
+    }
+    .top-center-btn {
+      grid-area: top;
+    }
+    .bottom-left-btn {
+      grid-area: bottomleft;
+    }
+    .bottom-right-btn {
+      grid-area: bottomright;
+    }
+    .bottom-center-btn {
+      grid-area: bottom;
+    }
+  }
+  .buttons-wrapper {
+    grid-area: content;
+    .right svg {
+      transform: rotate(-90deg);
+    }
+    .left svg {
+      transform: rotate(90deg);
+    }
+    .up svg {
+      transform: rotate(180deg);
+    }
+  }
+  .inputs-wrapper {
+    grid-area: content;
+    @include flexRow;
+    .radio-btn {
+      @extend .input-checkbox;
+    }
+  }
+}
+
+.interactions-summary {
+  @extend .asset-element;
+  height: $s-44;
+  padding: 0;
+  gap: $s-8;
+
+  .remove-btn {
+    @extend .button-tertiary;
+    height: $s-32;
+    width: $s-28;
+    svg {
+      @extend .button-icon-small;
+    }
+  }
+}
+
+.extend-btn {
+  @extend .button-tertiary;
+  --button-tertiary-border-width: var(--expand-button-icon-border-width);
+  height: 100%;
+  width: $s-28;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  padding: 0;
+  svg {
+    @extend .button-icon;
+  }
+  position: relative;
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-inline-end: $s-1 solid var(--panel-background-color);
+  }
+  &.extended {
+    @extend .button-icon-selected;
+    --button-tertiary-border-width: var(--expand-button-icon-border-width-selected);
   }
 }