refactor(frontend): Button with intent and size replaces the text buttons

frontend/src/js/authorization/LoginPage.tsx

@@ -5,8 +5,8 @@ import { useNavigate } from "react-router";
 import { tv } from "tailwind-variants";
 import { usePostLogin } from "../api/api";
 import { useAppTheme } from "../app-theme-context";
-import PrimaryButton from "../button/PrimaryButton";
 import ErrorMessage from "../error-message/ErrorMessage";
+import { Button } from "../ui-components/Button";
 import { Icon } from "../ui-components/Icon";
 import InputPlain from "../ui-components/InputPlain/InputPlain";
 
@@ -115,18 +115,16 @@ const LoginPage = () => {
               disabled: loading,
             }}
           />
-          <PrimaryButton
+          <Button
+            intent="primary"
             className={submitButton()}
-            disabled={!user || !password}
-            large
+            isDisabled={!user || !password}
+            size="lg"
             type="submit"
           >
-            <Icon
-              icon={loading ? faSpinner : faCheck}
-              className="mr-[10px] text-white"
-            />
+            <Icon icon={loading ? faSpinner : faCheck} className="text-white" />
             {t("login.submit")}
-          </PrimaryButton>
+          </Button>
         </form>
       </div>
     </div>

frontend/src/js/button/BadgeToggleButton.tsx

@@ -3,10 +3,10 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 import { tv } from "tailwind-variants";
 
-import BasicButton from "./BasicButton";
+import { Button } from "../ui-components/Button";
 
 const badgeToggleButton = tv({
-  base: ["rounded", "px-1 py-px", "text-sm", "font-bold", "whitespace-nowrap"],
+  base: ["h-auto px-1 py-px", "text-sm", "font-bold"],
   variants: {
     active: {
       true: [
@@ -51,13 +51,16 @@ export const BadgeToggleButton = ({
   useHotkeys(hotkey || "", onClick, { enabled: !!hotkey }, [hotkey, onClick]);
 
   return (
-    <BasicButton
+    <Button
+      intent="tertiary"
+      size="sm"
+      aria-pressed={!!active}
       className={badgeToggleButton({ active: !!active, className })}
-      onClick={onClick}
+      onPress={onClick}
     >
       {!active && "+ "}
       {children}
       {hotkey && <span className={superScript()}>{hotkey}</span>}
-    </BasicButton>
+    </Button>
   );
 };

frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx

@@ -2,12 +2,11 @@ import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { tv } from "tailwind-variants";
-
 import type { StateT } from "../app/reducers";
-import { TransparentButton } from "../button/TransparentButton";
 import AnimatedDots from "../common/components/AnimatedDots";
 import ConceptTreesOpenButtons from "../concept-trees-open/ConceptTreesOpenButtons";
 import SearchBar from "../search-bar/SearchBar";
+import { Button } from "../ui-components/Button";
 
 import {
   clearSearchQuery,
@@ -90,15 +89,16 @@ const ConceptTreeSearchBox = ({ className }: { className?: string }) => {
                   ? t("conceptTreeList.showingMismatches")
                   : t("conceptTreeList.showingMatchesOnly")}
               </span>
-              <TransparentButton
+              <Button
+                intent="secondary"
                 className="my-[3px] ml-[5px]"
-                tiny
-                onClick={onToggleShowMismatches}
+                size="sm"
+                onPress={onToggleShowMismatches}
               >
                 {showMismatches
                   ? t("conceptTreeList.showMatchesOnly")
                   : t("conceptTreeList.showMismatches")}
-              </TransparentButton>
+              </Button>
             </div>
           </div>
         )

frontend/src/js/entity-history/SearchEntities.tsx

@@ -3,15 +3,13 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { tv } from "tailwind-variants";
-
 import {
   usePostPrefixForSuggestions,
   usePostResolveEntities,
 } from "../api/api";
 import { transformFilterValueToApi } from "../api/apiHelper";
 import type { TableT } from "../api/types";
 import type { StateT } from "../app/reducers";
-import PrimaryButton from "../button/PrimaryButton";
 import { getConceptById } from "../concept-trees/globalTreeStoreHelper";
 import { useDatasetId } from "../dataset/selectors";
 import { isMultiSelectFilter, resetFilters } from "../model/filter";
@@ -22,6 +20,7 @@ import type {
   BigMultiSelectFilterWithValueType,
   MultiSelectFilterWithValueType,
 } from "../standard-query-editor/types";
+import { Button } from "../ui-components/Button";
 import { Icon } from "../ui-components/Icon";
 
 import type { LoadingPayload } from "./LoadHistoryDropzone";
@@ -246,14 +245,15 @@ export const SearchEntitiesComponent = ({
         onSwitchFilterMode={noop}
         onLoadFilterSuggestions={loadFilterSuggestions}
       />
-      <PrimaryButton
+      <Button
+        intent="primary"
         className={submitButton()}
-        onClick={onSubmitSearch}
-        disabled={!hasFiltersSet || loading}
+        onPress={onSubmitSearch}
+        isDisabled={!hasFiltersSet || loading}
       >
         {loading && <Icon icon={faSpinner} className="text-white" />}
         {t("history.searchEntitiesButton")}
-      </PrimaryButton>
+      </Button>
     </div>
   );
 };

frontend/src/js/error-fallback/ErrorFallback.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
-
-import { TransparentButton } from "../button/TransparentButton";
+import { Button } from "../ui-components/Button";
 
 const root = tv({
   base: [
@@ -36,20 +35,25 @@ const ErrorFallback = ({
       {allowFullRefresh && (
         <>
           <p className={description()}>{t("error.reloadDescription")}</p>
-          <TransparentButton
+          <Button
+            intent="secondary"
             className={reloadButton()}
-            onClick={() => window.location.reload()}
+            onPress={() => window.location.reload()}
           >
             {t("error.reload")}
-          </TransparentButton>
+          </Button>
         </>
       )}
       {onReset && (
         <>
           <p className={description()}>{t("error.resetDescription")}</p>
-          <TransparentButton className={reloadButton()} onClick={onReset}>
+          <Button
+            intent="secondary"
+            className={reloadButton()}
+            onPress={onReset}
+          >
             {t("error.reset")}
-          </TransparentButton>
+          </Button>
         </>
       )}
     </div>

frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx

@@ -2,13 +2,11 @@ import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
-
 import type { SelectOptionT } from "../../api/types";
-import PrimaryButton from "../../button/PrimaryButton";
-import { TransparentButton } from "../../button/TransparentButton";
 import { exists } from "../../common/helpers/exists";
 import { useActiveLang } from "../../localization/useActiveLang";
 import Modal from "../../modal/Modal";
+import { Button } from "../../ui-components/Button";
 import InputCheckbox from "../../ui-components/InputCheckbox";
 import InputSelect from "../../ui-components/InputSelect/InputSelect";
 import { useVisibleConceptListFields } from "../stateSelectors";
@@ -163,12 +161,16 @@ const FormConceptCopyModal = ({
         )}
       </div>
       <div className={buttons()}>
-        <TransparentButton onClick={onClose}>
+        <Button intent="secondary" onPress={onClose}>
           {t("common.cancel")}
-        </TransparentButton>
-        <PrimaryButton onClick={onSubmit} disabled={isAcceptDisabled}>
+        </Button>
+        <Button
+          intent="primary"
+          onPress={onSubmit}
+          isDisabled={isAcceptDisabled}
+        >
           {t("externalForms.copyModal.accept")}
-        </PrimaryButton>
+        </Button>
       </div>
     </Modal>
   );

frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx

@@ -1,10 +1,8 @@
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
-
 import { usePostPrefixForSuggestions } from "../../api/api";
 import type { SelectorResultType } from "../../api/types";
-import { TransparentButton } from "../../button/TransparentButton";
 import { DNDType } from "../../common/constants/dndTypes";
 import { exists } from "../../common/helpers/exists";
 import {
@@ -16,6 +14,7 @@ import {
   nodeHasNonDefaultSettings,
 } from "../../model/node";
 import type { DragItemConceptTreeNode } from "../../standard-query-editor/types";
+import { Button } from "../../ui-components/Button";
 import {
   isMovedObject,
   type PossibleDroppableObject,
@@ -309,13 +308,14 @@ const FormConceptGroup = (props: Props) => {
           <>
             {props.label}
             {allowExtendedCopying && (
-              <TransparentButton
+              <Button
+                intent="secondary"
                 className="ml-[10px] shrink-0"
-                tiny
-                onClick={() => setIsCopyModalOpen(true)}
+                size="sm"
+                onPress={() => setIsCopyModalOpen(true)}
               >
                 {t("externalForms.common.concept.copyFrom")}
-              </TransparentButton>
+              </Button>
             )}
           </>
         }

frontend/src/js/external-forms/form/fields/DisclosureListField.tsx

@@ -8,9 +8,9 @@ import { type ComponentProps, useEffect, useState } from "react";
 import { useFieldArray } from "react-hook-form";
 import { tv } from "tailwind-variants";
 import IconButton from "../../../button/IconButton";
-import { TransparentButton } from "../../../button/TransparentButton";
 import { exists } from "../../../common/helpers/exists";
 import { usePrevious } from "../../../common/helpers/usePrevious";
+import { Button } from "../../../ui-components/Button";
 import { Icon } from "../../../ui-components/Icon";
 import InfoTooltip from "../../../ui-components/InfoTooltip";
 import type { DisclosureListField as DisclosureListFieldT } from "../../config-types";
@@ -222,10 +222,11 @@ export const DisclosureListField = ({
         />
       ))}
       {field.creatable && (
-        <TransparentButton
-          className="w-full flex items-center justify-center gap-2"
-          small
-          onClick={() => {
+        <Button
+          intent="secondary"
+          className="w-full"
+          size="sm"
+          onPress={() => {
             append(
               Object.fromEntries(
                 field.fields.filter(isFormFieldWithValue).map((f) => [
@@ -242,7 +243,7 @@ export const DisclosureListField = ({
         >
           <Icon icon={faAdd} />
           {field.createNewLabel ? field.createNewLabel[locale] : undefined}
-        </TransparentButton>
+        </Button>
       )}
     </div>
   );