♻️ Remove new-css-system from interaction tab

frontend/resources/styles/main-default.scss

@@ -71,7 +71,6 @@
 @import "main/partials/project-bar";
 @import "main/partials/sidebar";
 @import "main/partials/sidebar-document-history";
-@import "main/partials/sidebar-interactions";
 @import "main/partials/tab-container";
 @import "main/partials/tool-bar";
 @import "main/partials/user-settings";

frontend/resources/styles/main/partials/sidebar-interactions.scss

@@ -1,215 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.interactions-help {
-  font-size: $fs12;
-  padding: 7px $size-4;
-  margin: 0 -7px;
-  text-align: center;
-
-  &.separator {
-    padding-bottom: $size-4;
-    border-bottom: 1px solid $color-black;
-  }
-}
-
-.interactions-help-icon {
-  height: 32px;
-  width: 32px;
-  margin: $size-4 auto;
-
-  svg {
-    fill: $color-gray-40;
-    height: 32px;
-    width: 32px;
-  }
-}
-
-.interactions-summary {
-  cursor: pointer;
-  flex-basis: 0;
-  flex-grow: 1;
-
-  .trigger-name {
-    font-size: $fs12;
-    color: $color-white;
-  }
-
-  .action-summary {
-    font-size: $fs12;
-    color: $color-gray-20;
-  }
-}
-
-.interactions-element {
-  display: flex;
-  align-items: center;
-  margin: 0 -7px;
-  padding: 0 7px;
-
-  .element-label {
-    color: $color-gray-20;
-    font-size: $fs12;
-    width: 64px;
-  }
-
-  &.separator {
-    border-top: 1px solid $color-black;
-    margin-top: $size-1;
-  }
-}
-
-.interactions-pos-buttons {
-  margin-top: $size-2;
-  padding-top: $size-2;
-  padding-bottom: $size-2;
-  justify-content: space-between;
-
-  .element-set-actions-button {
-    min-width: 18px;
-    min-height: 18px;
-  }
-
-  svg {
-    height: 18px;
-    width: 18px;
-  }
-}
-
-.interactions-way-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
-  & .input-radio {
-    margin-bottom: 0;
-
-    & label {
-      color: $color-gray-20;
-
-      &:before {
-        background-color: unset;
-      }
-    }
-
-    & input[type="radio"]:checked {
-      & + label {
-        &:before {
-          background-color: $color-primary;
-          box-shadow: inset 0 0 0 5px $color-gray-50;
-        }
-      }
-    }
-  }
-}
-
-.interactions-direction-buttons {
-  margin-top: $size-2;
-  padding-top: $size-2;
-  padding-bottom: $size-2;
-  justify-content: space-around;
-
-  .element-set-actions-button {
-    min-width: 40px;
-    min-height: 13px;
-  }
-
-  svg {
-    height: 13px;
-    width: 13px;
-  }
-}
-
-.interactions-easing-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 30px;
-  min-height: 30px;
-
-  & svg {
-    width: 12px;
-    height: 12px;
-    stroke: $color-gray-20;
-  }
-}
-
-.flow-element {
-  display: flex;
-  align-items: center;
-  padding: $size-1;
-
-  .element-label {
-    font-size: $fs11;
-  }
-
-  .flow-name {
-    cursor: pointer;
-  }
-
-  & input.element-name {
-    background: transparent;
-    border-color: $color-primary;
-    color: $color-white;
-    font-size: $fs11;
-  }
-}
-
-.flow-button {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: $size-2;
-
-  & svg {
-    height: 12px;
-    width: 12px;
-    fill: $color-gray-20;
-  }
-
-  &:hover svg {
-    fill: $color-primary;
-  }
-}
-
-.flow-badge {
-  cursor: pointer;
-  display: flex;
-
-  & .content {
-    align-items: center;
-    background-color: $color-gray-50;
-    border-radius: $br4;
-    display: flex;
-    height: 24px;
-
-    & svg {
-      height: 12px;
-      margin: 0 $size-2;
-      width: 12px;
-      fill: $color-gray-20;
-    }
-
-    & span {
-      color: $color-gray-20;
-      font-size: $fs12;
-      margin-right: $size-4;
-    }
-  }
-
-  &.selected .content,
-  &:hover .content {
-    background-color: $color-primary;
-
-    & svg {
-      fill: $color-gray-60;
-    }
-
-    & span {
-      color: $color-gray-60;
-    }
-  }
-}

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss

@@ -10,10 +10,13 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
-  .interaction-options {
+}
+
+.interaction-options {
   @include flexColumn;
-    .element-title {
+}
-      .add-interaction-btn {
+
+.add-interaction-btn {
   @extend .button-tertiary;
   height: $s-32;
   width: $s-28;
@@ -21,14 +24,17 @@
     @extend .button-icon;
     stroke: var(--icon-foreground);
   }
-      }
+}
-    }
 
-    .help-content {
+.help-content {
   padding: $s-20;
-      .help-group {
+}
+
+.help-group {
   margin-bottom: $s-40;
-        .interactions-help-icon {
+}
+
+.interactions-help-icon {
   @include flexCenter;
   width: $s-48;
   height: $s-48;
@@ -41,38 +47,39 @@
     height: $s-32;
     width: $s-32;
   }
-        }
+}
-        .interactions-help {
+
+.interactions-help {
   @include titleTipography;
   text-align: center;
-        }
+  color: var(--title-foreground-color);
-      }
+}
-    }
+
-  }
+.element-set {
-  .element-set {
   @include flexColumn;
-    .add-flow-btn {
+}
+
+.add-flow-btn {
   @extend .button-tertiary;
   height: $s-32;
   width: $s-28;
   svg {
     @extend .button-icon;
   }
-    }
-  }
 }
 
 .interactions-info {
   flex-grow: 1;
   display: grid;
+}
 
-  .trigger-name {
+.trigger-name {
   color: var(--color-foreground-primary);
-  }
+}
-  .action-summary {
+
+.action-summary {
   color: var(--color-foreground-secondary);
   @include textEllipsis;
-  }
 }
 
 .groups {
@@ -96,6 +103,7 @@
           width: $s-92;
           margin: auto 0;
           grid-area: name;
+          color: var(--title-foreground-color);
         }
         .select-wrapper {
           display: flex;
@@ -231,7 +239,9 @@
 
 .flow-element {
   @include flexRow;
-  .flow-info {
+}
+
+.flow-info {
   display: flex;
   align-items: center;
   gap: $s-2;
@@ -240,7 +250,9 @@
   height: $s-32;
   width: 100%;
   flex-grow: 1;
-    .flow-name-wrapper {
+}
+
+.flow-name-wrapper {
   @include titleTipography;
   @include focusInput;
   display: flex;
@@ -270,11 +282,13 @@
       }
     }
   }
+
   .flow-input {
     @extend .input-base;
     background-color: transparent;
     height: $s-28;
   }
+
   .flow-input-wrapper {
     @include titleTipography;
     display: flex;
@@ -288,6 +302,7 @@
     color: var(--input-foreground-color);
     border-radius: $br-8;
   }
+
   &:hover {
     background-color: var(--input-background-color-hover);
     border: $s-1 solid var(--input-background-color-hover);
@@ -298,6 +313,7 @@
       }
     }
   }
+
   &:focus,
   &:focus-within {
     background-color: var(--input-background-color-active);
@@ -306,10 +322,9 @@
   &.editing {
     background-color: var(--input-background-color-active);
   }
-    }
+}
-  }
 
-  .remove-flow-btn {
+.remove-flow-btn {
   @extend .button-tertiary;
   height: $s-32;
   width: $s-28;
@@ -317,5 +332,4 @@
   svg {
     @extend .button-icon;
   }
-  }
 }