fix: OPTIC-979: converting stylus files to scss

web/apps/labelstudio/src/components/Badges/Enterprise.scss

@@ -0,0 +1,31 @@
+.enterprise-badge {
+  display: inline-block;
+  border-radius: 4px;
+  background: linear-gradient(135deg, #FFA663 0%, #FF7557 51.56%, #E37BD3 100%);
+  vertical-align: middle;
+  margin: 0 8px;
+  height: 20px;
+
+  &__label {
+    margin: 1px;
+    background: var(--persimmon_0);
+    color: var(--persimmon_400);
+    border-radius: 3px;
+    font-size: 11px;
+    padding: 2px 5px 2px 3px;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    line-height: 100%;
+    font-weight: 500;
+  }
+
+  &_filled &__label {
+    background: none;
+    color: var(--persimmon_0);
+  }
+
+  &_filled &__icon path {
+    fill: var(--persimmon_0);
+  }
+}

web/apps/labelstudio/src/components/Badges/Enterprise.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { IconSpark } from "../../assets/icons";
 import { Block, Elem } from "../../utils/bem";
-import "./Enterprise.styl";
+import "./Enterprise.scss";
 
 export const EnterpriseBadge: FC<{
   filled?: boolean;

web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -6,7 +6,7 @@ import { BemWithSpecifiContext } from "../../utils/bem";
 import { absoluteURL } from "../../utils/helpers";
 import { Dropdown } from "../Dropdown/Dropdown";
 import { Menu } from "../Menu/Menu";
-import "./Breadcrumbs.styl";
+import "./Breadcrumbs.scss";
 
 const { Block, Elem } = BemWithSpecifiContext();
 

web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,108 @@
+.breadcrumbs {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+
+  &__label {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  &__beta {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--plum_0);
+    padding: 2px 8px;
+    background-color: var(--plum_500);
+    border-radius: 12px;
+  }
+
+  &__list {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    font-size: 16px;
+    line-height: 22px;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: default;
+
+    &:not(.breadcrumbs__item_last) {
+      cursor: pointer;
+
+      & > span,
+      & > a {
+        color: var(--sand_600) !important;
+      }
+    }
+
+    &:not(:nth-child(2)) {
+      flex-shrink: 0;
+    }
+
+    &:nth-child(2) span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:only-child {
+      pointer-events: none;
+    }
+  }
+
+  &__item > span,
+  &__item > a {
+    text-decoration: none;
+    color: var(--sand_900);
+
+    &:hover {
+      color: var(--grape_500) !important;
+    }
+  }
+
+  &__item + &__item {
+    margin-left: 30px;
+  }
+
+  &__item + &__item::before {
+    top: 50%;
+    right: 100%;
+    width: 30px;
+    content: "/";
+    height: 16px;
+    display: block;
+    color: var(--sand_600);
+    position: absolute;
+    transform: translate3d(0, -50%, 0);
+    text-align: center;
+    line-height: 16px;
+    font-size: 18px;
+  }
+
+  &__settings {
+    width: 20px;
+    height: 20px;
+    display: block;
+    margin-left: 10px;
+  }
+
+  &__settings img {
+    display: block;
+    opacity: 0.23;
+  }
+}

web/apps/labelstudio/src/components/Button/Button.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Block, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/helpers";
 import { FormSubmissionContext } from "../Form/FormContext";
-import "./Button.styl";
+import "./Button.scss";
 
 export const Button = React.forwardRef(
   ({ children, type, extra, className, size, waiting, icon, tag, look, ...rest }, ref) => {