🎉 Add interaction flows

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -937,6 +937,10 @@
   .element-set-options-group {
     flex-wrap: wrap;
   }
+
+  &:not(:first-child) {
+    border-top: 1px solid $color-gray-60;
+  }
 }
 
 .exports-options,

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

@@ -75,7 +75,84 @@
   }
 
   svg {
-    width: 18px;
     height: 18px;
+    width: 18px;
   }
 }
+
+.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 {
+  display: flex;
+
+  & .content {
+    align-items: center;
+    background-color: $color-gray-50;
+    border-radius: 4px;
+    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 {
+    background-color: $color-primary;
+
+    & svg {
+      fill: $color-gray-60;
+    }
+
+    & span {
+      color: $color-gray-60;
+    }
+  }
+}
+

frontend/resources/styles/main/partials/viewer-header.scss

@@ -68,7 +68,7 @@
       align-items: center;
       cursor: pointer;
       display: flex;
-      width: 90px;
+      position: relative;
 
       > span {
         color: $color-gray-10;
@@ -96,7 +96,7 @@
       }
 
       .dropdown {
-        min-width: 260px;
+        min-width: 295px;
         top: 45px;
         left: -25px;
       }

frontend/resources/styles/main/partials/workspace.scss

@@ -238,10 +238,6 @@
   font-size: $fs12;
 }
 
-.selected .workspace-frame-label {
-  fill: $color-primary-dark;
-}
-
 .multiuser-cursor {
   align-items: center;
   display: flex;