From 0a3a896dc93681cf6922b89ab165822812fb3ec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Tue, 12 Dec 2023 13:42:46 +0100
Subject: [PATCH] :bug: fix wrong spacing between interactions in the prototype
 tab

---
 .../styles/common/refactor/mixins.scss        |   4 +-
 .../sidebar/options/menus/interactions.scss   | 307 +++++++++---------
 2 files changed, 157 insertions(+), 154 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 578b69720..583ee3a73 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -10,10 +10,10 @@
   align-items: center;
 }
 
-@mixin flexColumn {
+@mixin flexColumn($gap: $s-4) {
   display: flex;
   flex-direction: column;
-  gap: $s-4;
+  gap: #{$gap};
 }
 
 @mixin flexRow {
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 3d4e14be4..077c816fc 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
@@ -48,159 +48,7 @@
       }
     }
 
-    .groups {
-      @include flexColumn;
-      .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;
-              }
-              .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;
-                }
-              }
-            }
-          }
-        }
 
-        .interactions-summary {
-          @extend .asset-element;
-          height: $s-44;
-          padding: 0;
-          gap: $s-4;
-          .extend-btn {
-            @extend .button-tertiary;
-            height: 100%;
-            width: $s-28;
-            svg {
-              @extend .button-icon;
-            }
-            &.extended {
-              background-color: var(--button-radio-background-color-active);
-              svg {
-                stroke: var(--button-radio-foreground-color-active);
-              }
-            }
-          }
-
-
-          .remove-btn {
-            @extend .button-tertiary;
-            height: $s-32;
-            width: $s-28;
-            svg {
-              @extend .button-icon-small;
-            }
-          }
-        }
-      }
-    }
   }
   .element-set {
     @include flexColumn;
@@ -225,6 +73,161 @@
   }
 }
 
+.groups {
+  @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;
+        }
+        .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;
+          }
+        }
+      }
+    }
+  }
+
+  .interactions-summary {
+    @extend .asset-element;
+    height: $s-44;
+    padding: 0;
+    gap: $s-4;
+    .extend-btn {
+      @extend .button-tertiary;
+      height: 100%;
+      width: $s-28;
+      svg {
+        @extend .button-icon;
+      }
+      &.extended {
+        background-color: var(--button-radio-background-color-active);
+        svg {
+          stroke: var(--button-radio-foreground-color-active);
+        }
+      }
+    }
+
+
+    .remove-btn {
+      @extend .button-tertiary;
+      height: $s-32;
+      width: $s-28;
+      svg {
+        @extend .button-icon-small;
+      }
+    }
+  }
+}
+
 .flow-element {
   @extend .asset-element;
   padding: 0;