chore: OPTIC-1778: Unify and prettify icons

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

@@ -75,10 +75,6 @@
 
     & svg {
       color: var(--sand_500) !important;
-
-      & path {
-        stroke: var(--sand_500);
-      }
     }
   }
 

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

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/bem";
 import "./DescriptionList.scss";
-import { IconInfoOutline } from "../../assets/icons";
+import { IconInfoOutline } from "@humansignal/icons";
 import { Tooltip } from "@humansignal/ui";
 
 export const DescriptionList = ({ style, className, children }) => {

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

@@ -1,6 +1,6 @@
 import { Fragment, useCallback, useMemo, useState } from "react";
 import sanitizeHtml from "sanitize-html";
-import { LsSlack } from "../../assets/icons";
+import { IconSlack } from "@humansignal/icons";
 import { Block, Elem } from "../../utils/bem";
 import { absoluteURL, copyText } from "../../utils/helpers";
 import { Button } from "../Button/Button";
@@ -87,7 +87,7 @@ export const ErrorWrapper = ({
 
       <Elem name="actions">
         <Space spread>
-          <Elem tag={Button} name="action-slack" target="_blank" icon={<LsSlack />} href={SLACK_INVITE_URL}>
+          <Elem tag={Button} name="action-slack" target="_blank" icon={<IconSlack />} href={SLACK_INVITE_URL}>
             Ask on Slack
           </Elem>
 

web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.jsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { FaMinus, FaPlus } from "react-icons/fa";
 import { Block, Elem } from "../../../../utils/bem";
 import { Oneof } from "../../../Oneof/Oneof";
 import { FormField } from "../../FormField";
 import { default as Label } from "../Label/Label";
 import "./Counter.scss";
+import { IconMinus, IconPlus } from "@humansignal/icons";
 
 const allowedKeys = ["ArrowUp", "ArrowDown", "Backspace", "Delete", /[0-9]/];
 
@@ -158,8 +158,8 @@ const CounterButton = ({ type }) => {
       onMouseDownCapture={(e) => e.preventDefault()}
     >
       <Oneof value={type}>
-        <FaMinus case="decrease" />
-        <FaPlus case="increase" />
+        <IconMinus case="decrease" />
+        <IconPlus case="increase" />
       </Oneof>
     </Elem>
   );

web/apps/labelstudio/src/components/HeidiTips/HeidiTip.tsx

@@ -1,6 +1,6 @@
 import { type FC, type MouseEvent, useCallback, useMemo } from "react";
 import { Block, Elem } from "../../utils/bem";
-import { IconCross } from "@humansignal/ui";
+import { IconCross } from "@humansignal/icons";
 import "./HeidiTip.scss";
 import { Button } from "../Button/Button";
 import { HeidiSpeaking } from "../../assets/images";

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

@@ -6,11 +6,12 @@ import {
   IconPersonInCircle,
   IconPin,
   IconTerminal,
-  LsDoor,
-  LsGitHub,
-  LsSettings,
-  LsSlack,
-} from "../../assets/icons";
+  IconDoor,
+  IconGitHub,
+  IconSettings,
+  IconSlack,
+} from "@humansignal/icons";
+import { Userpic } from "@humansignal/ui";
 import { useConfig } from "../../providers/ConfigProvider";
 import { useContextComponent, useFixedLocation } from "../../providers/RoutesProvider";
 import { useCurrentUser } from "../../providers/CurrentUser";
@@ -20,7 +21,6 @@ import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs";
 import { Dropdown } from "../Dropdown/Dropdown";
 import { Hamburger } from "../Hamburger/Hamburger";
 import { Menu } from "../Menu/Menu";
-import { Userpic } from "@humansignal/ui";
 import { VersionNotifier, VersionProvider } from "../VersionNotifier/VersionNotifier";
 import "./Menubar.scss";
 import "./MenuContent.scss";
@@ -151,9 +151,13 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
             align="right"
             content={
               <Menu>
-                <Menu.Item icon={<LsSettings />} label="Account &amp; Settings" href={pages.AccountSettingsPage.path} />
+                <Menu.Item
+                  icon={<IconSettings />}
+                  label="Account &amp; Settings"
+                  href={pages.AccountSettingsPage.path}
+                />
                 {/* <Menu.Item label="Dark Mode"/> */}
-                <Menu.Item icon={<LsDoor />} label="Log Out" href={absoluteURL("/logout")} data-external />
+                <Menu.Item icon={<IconDoor />} label="Log Out" href={absoluteURL("/logout")} data-external />
                 {showNewsletterDot && (
                   <>
                     <Menu.Divider />
@@ -204,14 +208,14 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
                 <Menu.Item
                   label="GitHub"
                   href="https://github.com/HumanSignal/label-studio"
-                  icon={<LsGitHub />}
+                  icon={<IconGitHub />}
                   target="_blank"
                   rel="noreferrer"
                 />
                 <Menu.Item
                   label="Slack Community"
                   href="https://slack.labelstud.io/?source=product-menu"
-                  icon={<LsSlack />}
+                  icon={<IconSlack />}
                   target="_blank"
                   rel="noreferrer"
                 />

web/apps/labelstudio/src/components/Modal/ModalPopup.jsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
 import { createPortal } from "react-dom";
-import { IconCross } from "@humansignal/ui";
+import { IconCross } from "@humansignal/icons";
 import { BemWithSpecifiContext, cn } from "../../utils/bem";
 import { aroundTransition } from "@humansignal/core/lib/utils/transition";
 import { Button } from "../Button/Button";

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

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 import { useAPI } from "../../providers/ApiProvider";
 import { Block, Elem } from "../../utils/bem";
 import "./VersionNotifier.scss";
-import { IconBell } from "../../assets/icons";
+import { IconBell } from "@humansignal/icons";
 
 const VersionContext = createContext();
 

web/apps/labelstudio/src/pages/CreateProject/Config/TemplatesList.jsx

@@ -3,7 +3,7 @@ import { Spinner } from "../../../components";
 import { useAPI } from "../../../providers/ApiProvider";
 import { cn } from "../../../utils/bem";
 import "./Config.scss";
-import { IconInfo } from "../../../assets/icons";
+import { IconInfo } from "@humansignal/icons";
 
 const listClass = cn("templates-list");
 

web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx

@@ -4,7 +4,7 @@ import { cn } from "../../../utils/bem";
 import { cn as scn } from "@humansignal/shad/utils";
 import { unique } from "../../../utils/helpers";
 import "./Import.scss";
-import { IconError, IconInfo, IconUpload } from "../../../assets/icons";
+import { IconError, IconInfo, IconUpload } from "@humansignal/icons";
 import { useAPI } from "../../../providers/ApiProvider";
 import Input from "libs/datamanager/src/components/Common/Input/Input";
 import { Button } from "apps/labelstudio/src/components";

web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss

@@ -114,8 +114,8 @@
   }
 
   &__upload-icon {
-    height: 16px;
-    margin-right: 8px;
+    height: 20px;
+    width: 20px;
   }
 
   &__info-icon {

web/apps/labelstudio/src/pages/Home/HomePage.tsx

@@ -1,7 +1,7 @@
 import type { Page } from "../types/Page";
 import { Button } from "@humansignal/shad/components/ui/button";
-import { IconFolder, SimpleCard, Spinner } from "@humansignal/ui";
-import { IconExternal, IconFolderAdd, IconHumanSignal, IconUserAdd } from "@humansignal/icons";
+import { SimpleCard, Spinner } from "@humansignal/ui";
+import { IconExternal, IconFolderAdd, IconHumanSignal, IconUserAdd, IconFolderOpen } from "@humansignal/icons";
 import { HeidiTips } from "../../components/HeidiTips/HeidiTips";
 import { useQuery } from "@tanstack/react-query";
 import { useAPI } from "../../providers/ApiProvider";
@@ -125,7 +125,7 @@ export const HomePage: Page = () => {
                     "rounded-full w-12 h-12 flex justify-center items-center bg-lsAccentGrapeSubtle text-lsPrimaryIcon"
                   }
                 >
-                  <IconFolder />
+                  <IconFolderOpen />
                 </div>
                 <Heading size={2}>Create your first project</Heading>
                 <Sub>Import your data and set up the labeling interface to start annotating</Sub>