fix: FIT-460: Adjust variants and styles of buttons across application for consistency

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

@@ -1,6 +1,6 @@
-import { ff } from "@humansignal/core";
 import { SampleDatasetSelect } from "@humansignal/app-common/blocks/SampleDatasetSelect/SampleDatasetSelect";
-import { IconErrorAlt, IconFileUpload, IconInfoOutline, IconTrash, IconUpload, IconCode } from "@humansignal/icons";
+import { ff } from "@humansignal/core";
+import { IconCode, IconErrorAlt, IconFileUpload, IconInfoOutline, IconTrash, IconUpload } from "@humansignal/icons";
 import { Badge } from "@humansignal/shad/components/ui/badge";
 import { cn as scn } from "@humansignal/shad/utils";
 import { useAtomValue } from "jotai";
@@ -11,9 +11,9 @@ import { cn } from "../../../utils/bem";
 import { unique } from "../../../utils/helpers";
 import { sampleDatasetAtom } from "../utils/atoms";
 import "./Import.scss";
+import { Button, CodeBlock, SimpleCard, Spinner, Tooltip } from "@humansignal/ui";
 import samples from "./samples.json";
 import { importFiles } from "./utils";
-import { Button, CodeBlock, SimpleCard, Spinner, Tooltip } from "@humansignal/ui";
 
 const importClass = cn("upload_page");
 const dropzoneClass = cn("dropzone");
@@ -158,10 +158,16 @@ export const ImportPage = ({
       return { ...state, uploading: [...action.sending, ...state.uploading] };
     }
     if (action.sent) {
-      return { ...state, uploading: state.uploading.filter((f) => !action.sent.includes(f)) };
+      return {
+        ...state,
+        uploading: state.uploading.filter((f) => !action.sent.includes(f)),
+      };
     }
     if (action.uploaded) {
-      return { ...state, uploaded: unique([...state.uploaded, ...action.uploaded], (a, b) => a.id === b.id) };
+      return {
+        ...state,
+        uploaded: unique([...state.uploaded, ...action.uploaded], (a, b) => a.id === b.id),
+      };
     }
     if (action.ids) {
       const ids = unique([...state.ids, ...action.ids]);
@@ -172,7 +178,11 @@ export const ImportPage = ({
     return state;
   };
 
-  const [files, dispatch] = useReducer(processFiles, { uploaded: [], uploading: [], ids: [] });
+  const [files, dispatch] = useReducer(processFiles, {
+    uploaded: [],
+    uploading: [],
+    ids: [],
+  });
   const showList = Boolean(files.uploaded?.length || files.uploading?.length || sample);
 
   const loadFilesList = useCallback(
@@ -328,12 +338,14 @@ export const ImportPage = ({
           onSubmit={onLoadURL}
         >
           <Input placeholder="Dataset URL" name="url" ref={urlRef} rawClassName="h-[40px]" />
-          <Button type="submit" aria-label="Add URL">
+          <Button variant="primary" look="outlined" type="submit" aria-label="Add URL">
             Add URL
           </Button>
         </form>
         <span>or</span>
         <Button
+          variant="primary"
+          look="outlined"
           type="button"
           onClick={() => document.getElementById("file-input").click()}
           leading={<IconUpload />}
@@ -364,7 +376,11 @@ export const ImportPage = ({
 
       <main>
         <Upload sendFiles={sendFiles} project={project}>
-          <div className={scn("flex gap-4 w-full min-h-full", { "justify-center": !showList })}>
+          <div
+            className={scn("flex gap-4 w-full min-h-full", {
+              "justify-center": !showList,
+            })}
+          >
             {!showList && (
               <div className="flex gap-4 justify-center items-start w-full h-full">
                 <label htmlFor="file-input" className="w-full h-full">

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

@@ -86,14 +86,6 @@
     button {
       margin-left: -1px;
       border-radius: 0 var(--corner-radius-smaller) var(--corner-radius-smaller) 0;
-      background: var(--color-primary-surface);
-      color: var(--color-primary-surface-content);
-      cursor: pointer;
-      transition: all 150ms ease-out;
-
-      &:hover {
-        background: var(--color-primary-surface-hover);
-      }
     }
 
     &+span {

web/apps/labelstudio/src/pages/Organization/PeoplePage/InviteLink.tsx

@@ -1,12 +1,12 @@
-import { Block } from "apps/labelstudio/src/components/Menu/MenuContext";
-import { Input } from "../../../components/Form";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Typography } from "@humansignal/ui";
 import { Space } from "@humansignal/ui/lib/space/space";
+import { Block } from "apps/labelstudio/src/components/Menu/MenuContext";
+import { Modal } from "apps/labelstudio/src/components/Modal/ModalPopup";
 import { API } from "apps/labelstudio/src/providers/ApiProvider";
-import { atomWithQuery } from "jotai-tanstack-query";
 import { useAtomValue } from "jotai";
-import { Modal } from "apps/labelstudio/src/components/Modal/ModalPopup";
-import { Button, Typography } from "@humansignal/ui";
+import { atomWithQuery } from "jotai-tanstack-query";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "../../../components/Form";
 
 const linkAtom = atomWithQuery(() => ({
   queryKey: ["invite-link"],
@@ -65,7 +65,9 @@ const InvitationModal = () => {
           rel="noreferrer"
           className="hover:underline"
           onClick={() =>
-            __lsa("docs.organization.add_people.learn_more", { href: "https://labelstud.io/guide/signup.html" })
+            __lsa("docs.organization.add_people.learn_more", {
+              href: "https://labelstud.io/guide/signup.html",
+            })
           }
         >
           Learn more
@@ -83,7 +85,13 @@ const InvitationFooter = () => {
   return (
     <Space spread>
       <Space>
-        <Button look="outlined" style={{ width: 170 }} onClick={() => refetch()} aria-label="Refresh invite link">
+        <Button
+          variant="negative"
+          look="outlined"
+          style={{ width: 170 }}
+          onClick={() => refetch()}
+          aria-label="Refresh invite link"
+        >
           Reset Link
         </Button>
       </Space>

web/apps/labelstudio/src/pages/Organization/PeoplePage/PeoplePage.jsx

@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useRef, useState } from "react";
 import { Button } from "@humansignal/ui";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { HeidiTips } from "../../../components/HeidiTips/HeidiTips";
 import { modal } from "../../../components/Modal/Modal";
 import { Space } from "../../../components/Space/Space";
@@ -8,11 +8,11 @@ import { FF_AUTH_TOKENS, FF_LSDV_E_297, isFF } from "../../../utils/feature-flag
 import "./PeopleInvitation.scss";
 import { PeopleList } from "./PeopleList";
 import "./PeoplePage.scss";
-import { SelectedUser } from "./SelectedUser";
 import { TokenSettingsModal } from "@humansignal/app-common/blocks/TokenSettingsModal";
 import { IconPlus } from "@humansignal/icons";
 import { useToast } from "@humansignal/ui";
 import { InviteLink } from "./InviteLink";
+import { SelectedUser } from "./SelectedUser";
 
 export const PeoplePage = () => {
   const apiSettingsModal = useRef();

web/libs/app-common/src/blocks/TokenSettingsModal/index.tsx

@@ -1,11 +1,10 @@
-import { useAtomValue } from "jotai";
 import { settingsAtom, TOKEN_SETTINGS_KEY } from "@humansignal/app-common/pages/AccountSettings/atoms";
-import { queryClientAtom } from "jotai-tanstack-query";
-import { Button } from "@humansignal/ui";
 import type { AuthTokenSettings } from "@humansignal/app-common/pages/AccountSettings/types";
-import { type ChangeEvent, useState } from "react";
-
+import { Button } from "@humansignal/ui";
 import { Form, Input, Toggle } from "apps/labelstudio/src/components/Form";
+import { useAtomValue } from "jotai";
+import { queryClientAtom } from "jotai-tanstack-query";
+import { type ChangeEvent, useState } from "react";
 
 export const TokenSettingsModal = ({
   showTTL,
@@ -32,7 +31,11 @@ function TokenSettingsModalView({
   settings,
   showTTL,
   onSaved,
-}: { settings: AuthTokenSettings; showTTL?: boolean; onSaved?: () => void }) {
+}: {
+  settings: AuthTokenSettings;
+  showTTL?: boolean;
+  onSaved?: () => void;
+}) {
   const [enableTTL, setEnableTTL] = useState(settings.api_tokens_enabled);
   const queryClient = useAtomValue(queryClientAtom);
   const reloadSettings = () => {
@@ -77,8 +80,8 @@ function TokenSettingsModalView({
         </Form.Row>
       )}
       <Form.Actions>
-        <Button look="outlined" type="submit">
-          Save
+        <Button variant="primary" look="filled" type="submit">
+          Save Changes
         </Button>
       </Form.Actions>
     </Form>

web/libs/app-common/src/pages/AccountSettings/sections/PersonalAccessToken.tsx

@@ -1,15 +1,13 @@
-import { IconLaunch, IconFileCopy, Label, Typography } from "@humansignal/ui";
-import styles from "./PersonalAccessToken.module.scss";
-import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
-import { atom, useAtomValue } from "jotai";
-import { Button } from "@humansignal/ui";
 import { useCopyText } from "@humansignal/core/lib/hooks/useCopyText";
-
+import { Button, IconFileCopy, IconLaunch, Label, Typography } from "@humansignal/ui";
 /**
  * FIXME: This is legacy imports. We're not supposed to use such statements
  * each one of these eventually has to be migrated to core/ui
  */
 import { Input, TextArea } from "apps/labelstudio/src/components/Form";
+import { atom, useAtomValue } from "jotai";
+import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
+import styles from "./PersonalAccessToken.module.scss";
 
 const tokenAtom = atomWithQuery(() => ({
   queryKey: ["access-token"],
@@ -60,12 +58,13 @@ export const PersonalAccessToken = () => {
               leading={<IconFileCopy />}
               onClick={copyToken}
               disabled={tokenCopied}
+              variant="primary"
               look="outlined"
-              variant="neutral"
+              className="w-[116px]"
             >
               {tokenCopied ? "Copied!" : "Copy"}
             </Button>
-            <Button look="outlined" variant="neutral" onClick={() => reset.mutate()}>
+            <Button variant="negative" look="outlined" onClick={() => reset.mutate()}>
               Reset
             </Button>
           </div>
@@ -80,7 +79,14 @@ export const PersonalAccessToken = () => {
               rawClassName={styles.textarea}
               value={curl}
             />
-            <Button icon={<IconFileCopy />} onClick={copyCurl} disabled={curlCopied} look="outlined" variant="neutral">
+            <Button
+              leading={<IconFileCopy />}
+              onClick={copyCurl}
+              disabled={curlCopied}
+              variant="primary"
+              look="outlined"
+              className="w-[116px]"
+            >
               {curlCopied ? "Copied!" : "Copy"}
             </Button>
           </div>

web/libs/core/src/lib/utils/schema/tags.json

@@ -69,6 +69,13 @@
         "required": false,
         "default": 32
       },
+      "spectrogram": {
+        "name": "spectrogram",
+        "description": "Determines whether an audio spectrogram is automatically displayed upon loading.",
+        "type": ["true", "false"],
+        "required": false,
+        "default": false
+      },
       "splitchannels": {
         "name": "splitchannels",
         "description": "Display multiple audio channels separately, if the audio file has more than one channel. (**NOTE: Requires more memory to operate.**)",
@@ -1075,6 +1082,12 @@
         "description": "Allow to use `children` field in dynamic choices to nest them. Submitted result will contain array of arrays, every item is a list of values from topmost parent choice down to selected one.",
         "type": ["true", "false"],
         "required": false
+      },
+      "layout": {
+        "name": "layout",
+        "description": "Layout of the choices: `select` for dropdown/select box format, `inline` for horizontal single row display, `vertical` for vertically stacked display (default)",
+        "type": ["select", "inline", "vertical"],
+        "required": false
       }
     }
   },
@@ -2104,6 +2117,13 @@
         "description": "Only show smart tool for interactive pre-annotations",
         "type": ["true", "false"],
         "required": false
+      },
+      "snap": {
+        "name": "snap",
+        "description": "Snap rectangle to image pixels",
+        "type": ["pixel", "none"],
+        "required": false,
+        "default": "none"
       }
     }
   },
@@ -2175,6 +2195,13 @@
         "type": ["true", "false"],
         "required": false,
         "default": true
+      },
+      "snap": {
+        "name": "snap",
+        "description": "Snap rectangle to image pixels",
+        "type": ["pixel", "none"],
+        "required": false,
+        "default": "none"
       }
     }
   },
@@ -2572,6 +2599,13 @@
         "type": "string",
         "required": false,
         "default": false
+      },
+      "open": {
+        "name": "open",
+        "description": "Sets default collapsed state",
+        "type": ["true", "false"],
+        "required": false,
+        "default": false
       }
     }
   },

web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -1,25 +1,25 @@
-import { type FC, useCallback, useContext, useMemo } from "react";
 import {
-  IconCursor,
+  IconBoundingBox,
   IconClockTimeFourOutline,
+  IconCursor,
   IconList,
   IconOutlinerEyeClosed,
   IconOutlinerEyeOpened,
+  IconPredictions,
   IconSortDown,
   IconSortUp,
-  IconBoundingBox,
-  IconPredictions,
 } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
+import { type FC, useCallback, useContext, useMemo } from "react";
 import { Dropdown } from "../../../common/Dropdown/Dropdown";
 // eslint-disable-next-line
 // @ts-ignore
 import { Menu } from "../../../common/Menu/Menu";
 import { BemWithSpecifiContext } from "../../../utils/bem";
 import { SidePanelsContext } from "../SidePanelsContext";
 import "./ViewControls.scss";
-import { FF_DEV_3873, isFF } from "../../../utils/feature-flags";
 import { observer } from "mobx-react";
+import { FF_DEV_3873, isFF } from "../../../utils/feature-flags";
 
 const { Block, Elem } = BemWithSpecifiContext();
 
@@ -201,15 +201,13 @@ const Grouping = <T extends string>({
         size="smaller"
         data-testid={`grouping-${value}`}
         look="string"
+        leading={readableValue.icon}
         trailing={
-          <>
-            {readableValue.icon}{" "}
-            {isFF(FF_DEV_3873) ? (
-              extraIcon
-            ) : (
-              <DirectionIndicator direction={direction} name={value} value={value} wrap={false} />
-            )}
-          </>
+          isFF(FF_DEV_3873) ? (
+            extraIcon
+          ) : (
+            <DirectionIndicator direction={direction} name={value} value={value} wrap={false} />
+          )
         }
       >
         {readableValue.selectedLabel}