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/apps/labelstudio/src/pages/WebhookPage/WebhookDetail.jsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { IconCross, IconPlus } from "@humansignal/icons";
 import { Button } from "@humansignal/ui";
-import { Form, Input, Label, Toggle } from "../../components/Form";
-import { Block, cn, Elem } from "../../utils/bem";
 import { cloneDeep } from "lodash";
-import { IconPlus, IconCross } from "@humansignal/icons";
+import { useEffect, useState } from "react";
+import { Form, Input, Label, Toggle } from "../../components/Form";
 import { useAPI } from "../../providers/ApiProvider";
+import { Block, cn, Elem } from "../../utils/bem";
 import "./WebhookPage.scss";
 import { Space } from "../../components/Space/Space";
 import { useProject } from "../../providers/ProjectProvider";
@@ -146,15 +146,18 @@ const WebhookDetail = ({ webhook, webhooksInfo, fetchWebhooks, onBack, onSelectA
                       type="button"
                       onClick={onAddHeaderClick}
                       look="string"
+                      leading={<IconPlus />}
                       className={rootClass.elem("headers-add")}
-                      size="small"
-                    >
-                      <IconPlus className="!h-3" />
-                    </Button>
+                      tooltip="Add Header"
+                    />
                   </Space>
                   {headers.map(([headKey, headValue], index) => {
                     return (
-                      <Space key={index} className={rootClass.elem("headers-row")} columnCount={3}>
+                      <Space
+                        key={`header-${headKey || "empty"}-${headValue || "empty"}-${index}`}
+                        className={rootClass.elem("headers-row")}
+                        stretch
+                      >
                         <Input
                           className={rootClass.elem("headers-input")}
                           skip
@@ -173,9 +176,11 @@ const WebhookDetail = ({ webhook, webhooksInfo, fetchWebhooks, onBack, onSelectA
                           <Button
                             className={rootClass.elem("headers-remove")}
                             type="button"
+                            variant="negative"
                             look="string"
                             icon={<IconCross />}
                             onClick={() => onHeaderRemove(index)}
+                            tooltip="Remove Header"
                           />
                         </div>
                       </Space>
@@ -241,13 +246,16 @@ const WebhookDetail = ({ webhook, webhooksInfo, fetchWebhooks, onBack, onSelectA
             <Elem name="controls">
               {webhook === null ? null : (
                 <Button
-                  look="danger"
+                  variant="negative"
+                  look="outlined"
                   type="button"
                   className={rootClass.elem("delete-button")}
                   onClick={() =>
                     WebhookDeleteModal({
                       onDelete: async () => {
-                        await api.callApi("deleteWebhook", { params: { pk: webhook.id } });
+                        await api.callApi("deleteWebhook", {
+                          params: { pk: webhook.id },
+                        });
                         onBack();
                         await fetchWebhooks();
                       },
@@ -274,7 +282,7 @@ const WebhookDetail = ({ webhook, webhooksInfo, fetchWebhooks, onBack, onSelectA
                   className={rootClass.elem("save-button")}
                   aria-label={webhook === null ? "Add webhook" : "Save webhook"}
                 >
-                  {webhook === null ? "Add Webhook" : "Save"}
+                  {webhook === null ? "Add Webhook" : "Save Changes"}
                 </Button>
               </Space>
             </Elem>

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>