refactor(frontend): IconButton folded into Button

frontend/src/js/app/About.tsx

@@ -11,8 +11,9 @@ import {
 import { useHotkeys } from "react-hotkeys-hook";
 import { useSelector } from "react-redux";
 import type { GetFrontendConfigResponseT } from "../api/types";
-import IconButton from "../button/IconButton";
 import Modal from "../modal/Modal";
+import { Button } from "../ui-components/Button";
+import { Icon } from "../ui-components/Icon";
 import type { StateT } from "./reducers";
 
 const initialState = {
@@ -90,9 +91,10 @@ export const About = memo(() => {
             {frontendGitDescribe} – {frontendTimestamp}
           </code>
         </div>
-        <IconButton frame icon={faCopy} onClick={copyVersionToClipboard}>
+        <Button intent="secondary" onPress={copyVersionToClipboard}>
+          <Icon icon={faCopy} />
           Copy version info
-        </IconButton>
+        </Button>
       </div>
     </Modal>
   );

frontend/src/js/authorization/LoginPage.tsx

@@ -21,7 +21,7 @@ const wrap = tv({
 });
 
 const logo = tv({
-  base: ["h-[35px]", "bg-no-repeat", "[background-position-y:50%]"],
+  base: ["h-9", "bg-no-repeat", "[background-position-y:50%]"],
 });
 
 const headline = tv({

frontend/src/js/button/DownloadButton.tsx

@@ -13,8 +13,8 @@ import { tv } from "tailwind-variants";
 import type { ResultUrlWithLabel } from "../api/types";
 import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import { getEnding } from "../query-runner/DownloadResultsDropdownButton";
-
-import IconButton, { type IconButtonPropsT } from "./IconButton";
+import { Button, type ButtonProps } from "../ui-components/Button";
+import { Icon } from "../ui-components/Icon";
 
 const link = tv({ base: "leading-none" });
 
@@ -43,12 +43,11 @@ export function getFileIcon(url: string): FileIcon {
   return { icon: faFileDownload };
 }
 
-interface Props extends Omit<IconButtonPropsT, "icon" | "onClick"> {
+interface Props extends Omit<ButtonProps, "children" | "className"> {
   resultUrl: ResultUrlWithLabel;
   className?: string;
   children?: ReactNode;
   simpleIcon?: boolean;
-  onClick?: () => void;
   showColoredIcon?: boolean;
 }
 
@@ -58,7 +57,6 @@ const DownloadButton = ({
   resultUrl,
   className,
   children,
-  onClick,
   showColoredIcon,
   ...restProps
 }: Props & { ref?: Ref<HTMLAnchorElement> }) => {
@@ -70,16 +68,13 @@ const DownloadButton = ({
 
   return (
     <a href={href} className={link({ className })} ref={ref}>
-      <IconButton
-        {...restProps}
-        className="whitespace-nowrap"
-        large
-        icon={simpleIcon ? faDownload : icon}
-        onClick={onClick}
-        iconColor={showColoredIcon ? color : undefined}
-      >
+      <Button intent="tertiary" className="whitespace-nowrap" {...restProps}>
+        <Icon
+          icon={simpleIcon ? faDownload : icon}
+          style={{ color: showColoredIcon ? color : undefined }}
+        />
         {children}
-      </IconButton>
+      </Button>
     </a>
   );
 };

frontend/src/js/button/HistoryButton.tsx

@@ -2,12 +2,11 @@ import { faListUl } from "@fortawesome/free-solid-svg-icons";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
-
 import { openHistory } from "../entity-history/actions";
+import { Button } from "../ui-components/Button";
+import { Icon } from "../ui-components/Icon";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 
-import IconButton from "./IconButton";
-
 export const HistoryButton = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -18,7 +17,13 @@ export const HistoryButton = () => {
 
   return (
     <TooltipTrigger>
-      <IconButton className="p-[7px]" frame icon={faListUl} onClick={onClick} />
+      <Button
+        aria-label={t("history.history")}
+        intent="secondary"
+        onPress={onClick}
+      >
+        <Icon icon={faListUl} />
+      </Button>
       <Tooltip>{t("history.history")}</Tooltip>
     </TooltipTrigger>
   );

frontend/src/js/button/PreviewButton.tsx

@@ -5,19 +5,13 @@ import {
 import { useMemo, useState } 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 { openPreview, useLoadPreviewData } from "../preview/actions";
-import IconButton, { type IconButtonPropsT } from "./IconButton";
-
-const previewButton = tv({
-  base: ["whitespace-nowrap", "h-[35px]", "px-3 py-[5px]"],
-});
+import { Button, type ButtonProps } from "../ui-components/Button";
+import { Icon } from "../ui-components/Icon";
 
-const PreviewButton = ({
-  className,
-  ...buttonProps
-}: Partial<IconButtonPropsT>) => {
+const PreviewButton = (props: ButtonProps) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
@@ -33,11 +27,9 @@ const PreviewButton = ({
   );
 
   return (
-    <IconButton
-      className={previewButton({ className })}
-      frame
-      icon={icon}
-      onClick={async () => {
+    <Button
+      intent="secondary"
+      onPress={async () => {
         if (queryId) {
           setLoading(true);
           setTimeout(async () => {
@@ -47,10 +39,11 @@ const PreviewButton = ({
           });
         }
       }}
-      {...buttonProps}
+      {...props}
     >
+      <Icon icon={icon} />
       {t("preview.preview")}
-    </IconButton>
+    </Button>
   );
 };
 

frontend/src/js/button/QueryResultHistoryButton.tsx

@@ -5,7 +5,8 @@ import type { ColumnDescription } from "../api/types";
 import type { StateT } from "../app/reducers";
 import { useGetAuthorizedUrl } from "../authorization/useAuthorizedUrl";
 import { openHistory, useNewHistorySession } from "../entity-history/actions";
-import IconButton from "./IconButton";
+import { Button } from "../ui-components/Button";
+import { Icon } from "../ui-components/Icon";
 
 export const QueryResultHistoryButton = ({
   url,
@@ -26,16 +27,16 @@ export const QueryResultHistoryButton = ({
   const newHistorySession = useNewHistorySession();
 
   return (
-    <IconButton
-      className="h-[35px] whitespace-nowrap"
-      icon={isLoading ? faSpinner : faListUl}
-      frame
-      onClick={async () => {
+    <Button
+      intent="secondary"
+      onPress={async () => {
         await newHistorySession(getAuthorizedUrl(url), columns, label);
         dispatch(openHistory());
       }}
+      className="whitespace-nowrap"
     >
+      <Icon icon={isLoading ? faSpinner : faListUl} />
       {t("history.history")}
-    </IconButton>
+    </Button>
   );
 };