Upgrade icons, spacing, and default component themes

airflow-core/src/airflow/ui/src/components/AdvancedSearchToggle.tsx

@@ -16,10 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, IconButton, Stack, Text } from "@chakra-ui/react";
+import { Box, Stack, Text } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { LuRegex } from "react-icons/lu";
 
+import { IconButton } from "src/components/ui";
 import { Tooltip } from "src/components/ui";
 
 export type AdvancedSearchToggleProps = {
@@ -65,7 +66,6 @@ export const AdvancedSearchToggle = ({
       <IconButton
         aria-label="Toggle match-anywhere search"
         aria-pressed={enabled}
-        colorPalette="brand"
         data-testid="advanced-search-toggle"
         flexShrink={0}
         onClick={() => onToggle(!enabled)}

airflow-core/src/airflow/ui/src/components/AssetProgressCell.tsx

@@ -51,7 +51,7 @@ export const AssetProgressCell = ({ dagId, partitionKey, totalReceived, totalReq
     // eslint-disable-next-line jsx-a11y/no-autofocus
     <Popover.Root autoFocus={false} lazyMount positioning={{ placement: "bottom-end" }} unmountOnExit>
       <Popover.Trigger asChild>
-        <Button loading={isLoading} paddingInline={0} size="sm" variant="ghost">
+        <Button loading={isLoading} paddingInline={0} variant="ghost">
           <FiDatabase style={{ display: "inline" }} />
           {`${String(totalReceived)} / ${String(totalRequired)}`}
         </Button>

airflow-core/src/airflow/ui/src/components/Assets/TriggeredRuns.tsx

@@ -47,7 +47,7 @@ export const TriggeredRuns = ({ dagRuns }: Props) => {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     <Popover.Root autoFocus={false} lazyMount unmountOnExit>
       <Popover.Trigger asChild>
-        <Button size="sm" variant="outline">
+        <Button variant="outline">
           {`${dagRuns.length} ${translate("triggered")} ${translate("dagRun_other", { count: dagRuns.length })}`}
         </Button>
       </Popover.Trigger>

airflow-core/src/airflow/ui/src/components/AttrSelectFilterMulti.tsx

@@ -60,7 +60,7 @@ export const AttrSelectFilterMulti = ({
       onValueChange={handleValueChange}
       value={selectedValues}
     >
-      <Select.Trigger colorPalette="brand" dataTestId={dataTestId} minW="max-content">
+      <Select.Trigger dataTestId={dataTestId} minW="max-content">
         <Select.ValueText placeholder={placeholderText} width="auto">
           {() => displayValue}
         </Select.ValueText>

airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IconButton, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
 
 import type { DAGRunResponse } from "openapi/requests/types.gen";
-import { Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
 
 import ClearRunDialog from "./ClearRunDialog";
 
@@ -45,26 +45,16 @@ const ClearRunButton = ({ dagRun, isHotkeyEnabled = false }: Props) => {
 
   return (
     <>
-      <Tooltip
-        closeDelay={100}
-        content={
+      <IconButton
+        label={
           isHotkeyEnabled
             ? translate("dags:runAndTaskActions.clear.buttonTooltip")
             : translate("dags:runAndTaskActions.clear.button", { type: translate("dagRun_one") })
         }
-        openDelay={100}
+        onClick={onOpen}
       >
-        <IconButton
-          aria-label={translate("dags:runAndTaskActions.clear.button", { type: translate("dagRun_one") })}
-          colorPalette="brand"
-          onClick={onOpen}
-          size="md"
-          variant="ghost"
-        >
-          <CgRedo />
-        </IconButton>
-      </Tooltip>
-
+        <CgRedo />
+      </IconButton>
       {open ? <ClearRunDialog dagRun={dagRun} onClose={onClose} open={open} /> : undefined}
     </>
   );

airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx

@@ -93,7 +93,7 @@ const ClearRunDialog = ({ dagRun, onClose, open }: Props) => {
   const shouldShowBundleVersionOption = versionsDiffer && !onlyNew;
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
+    <Dialog.Root lazyMount onOpenChange={onClose} open={open}>
       <Dialog.Content backdrop>
         <Dialog.Header>
           <VStack align="start" gap={4}>
@@ -144,7 +144,6 @@ const ClearRunDialog = ({ dagRun, onClose, open }: Props) => {
               </Checkbox>
             ) : undefined}
             <Button
-              colorPalette="brand"
               disabled={affectedTasks.total_entries === 0}
               loading={isPending || isPendingPatchDagRun}
               onClick={() => {

airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog.tsx

@@ -126,7 +126,7 @@ export const ClearGroupTaskInstanceDialog = ({ onClose, open, taskInstance }: Pr
   }, [open, dagVersionsDiffer]);
 
   return (
-    <Dialog.Root lazyMount onOpenChange={onClose} open={open} size="xl">
+    <Dialog.Root lazyMount onOpenChange={onClose} open={open}>
       <Dialog.Content backdrop>
         <Dialog.Header>
           <VStack align="start" gap={4}>
@@ -193,7 +193,6 @@ export const ClearGroupTaskInstanceDialog = ({ onClose, open, taskInstance }: Pr
               </Checkbox>
             ) : undefined}
             <Button
-              colorPalette="brand"
               disabled={affectedTasks.total_entries === 0 || groupTaskIds.length === 0}
               loading={isPending}
               onClick={() => {

airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx

@@ -16,14 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IconButton, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { CgRedo } from "react-icons/cg";
 
 import type { LightGridTaskInstanceSummary, TaskInstanceResponse } from "openapi/requests/types.gen";
 import { ClearGroupTaskInstanceDialog } from "src/components/Clear/TaskInstance/ClearGroupTaskInstanceDialog";
-import { Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
 
 import ClearTaskInstanceDialog from "./ClearTaskInstanceDialog";
 
@@ -70,35 +70,22 @@ const ClearTaskInstanceButton = ({
     { enabled: isHotkeyEnabled },
   );
 
+  const label = allMapped
+    ? isHotkeyEnabled
+      ? translate("dags:runAndTaskActions.clearAllMapped.buttonTooltip")
+      : translate("dags:runAndTaskActions.clearAllMapped.button")
+    : isHotkeyEnabled
+      ? translate("dags:runAndTaskActions.clear.buttonTooltip")
+      : translate("dags:runAndTaskActions.clear.button", { type: translate("taskInstance_one") });
+
   return (
     <>
-      <Tooltip
-        closeDelay={100}
-        content={
-          allMapped
-            ? isHotkeyEnabled
-              ? translate("dags:runAndTaskActions.clearAllMapped.buttonTooltip")
-              : translate("dags:runAndTaskActions.clearAllMapped.button")
-            : isHotkeyEnabled
-              ? translate("dags:runAndTaskActions.clear.buttonTooltip")
-              : translate("dags:runAndTaskActions.clear.button", { type: translate("taskInstance_one") })
-        }
-        openDelay={100}
+      <IconButton
+        label={label}
+        onClick={() => (onOpen && selectedInstance ? onOpen(selectedInstance) : onOpenInternal())}
       >
-        <IconButton
-          aria-label={
-            allMapped
-              ? translate("dags:runAndTaskActions.clearAllMapped.button")
-              : translate("dags:runAndTaskActions.clear.button", { type: translate("taskInstance_one") })
-          }
-          colorPalette="brand"
-          onClick={() => (onOpen && selectedInstance ? onOpen(selectedInstance) : onOpenInternal())}
-          size="md"
-          variant="ghost"
-        >
-          <CgRedo />
-        </IconButton>
-      </Tooltip>
+        <CgRedo />
+      </IconButton>
 
       {useInternalDialog && open && isGroup ? (
         <ClearGroupTaskInstanceDialog onClose={onClose} open={open} taskInstance={groupTaskInstance} />

airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx

@@ -151,7 +151,7 @@ const ClearTaskInstanceDialog = (props: Props) => {
 
   return (
     <>
-      <Dialog.Root lazyMount onOpenChange={onCloseDialog} open={openDialog ? !open : false} size="xl">
+      <Dialog.Root lazyMount onOpenChange={onCloseDialog} open={openDialog ? !open : false}>
         <Dialog.Content backdrop>
           <Dialog.Header>
             <VStack align="start" gap={4}>
@@ -235,7 +235,6 @@ const ClearTaskInstanceDialog = (props: Props) => {
                 {translate("dags:runAndTaskActions.options.preventRunningTasks")}
               </Checkbox>
               <Button
-                colorPalette="brand"
                 disabled={affectedTasks.total_entries === 0}
                 loading={isPending || isPendingPatchDagRun}
                 onClick={onOpen}

airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx

@@ -53,7 +53,6 @@ export const ConfirmationModal = ({ children, header, onConfirm, onOpenChange, o
             </Button>
           </Dialog.ActionTrigger>
           <Button
-            colorPalette="brand"
             data-testid="confirmation-confirm-button"
             onClick={() => {
               onConfirm();

airflow-core/src/airflow/ui/src/components/DAGWarningsModal.tsx

@@ -44,13 +44,7 @@ export const DAGWarningsModal: React.FC<ImportDAGErrorModalProps> = ({ error, on
     : "";
 
   return (
-    <Dialog.Root
-      data-testid="dag-warnings-modal"
-      onOpenChange={onClose}
-      open={open}
-      scrollBehavior="inside"
-      size="xl"
-    >
+    <Dialog.Root data-testid="dag-warnings-modal" onOpenChange={onClose} open={open} scrollBehavior="inside">
       <Dialog.Content backdrop>
         <Dialog.Header>
           <HStack fontSize="xl">

airflow-core/src/airflow/ui/src/components/DagActions/DeleteDagButton.tsx

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IconButton, useDisclosure } from "@chakra-ui/react";
+import { useDisclosure } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiTrash2 } from "react-icons/fi";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import DeleteDialog from "src/components/DeleteDialog";
-import { Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
 import { useDeleteDag } from "src/queries/useDeleteDag";
 
 type DeleteDagButtonProps = {
@@ -48,27 +48,21 @@ export const DeleteDagButton = ({ dagDisplayName, dagId }: DeleteDagButtonProps)
     },
   });
 
+  const label = translate("dagActions.delete.button");
+
   return (
     <>
-      <Tooltip content={translate("dagActions.delete.button")}>
-        <IconButton
-          aria-label={translate("dagActions.delete.button")}
-          colorPalette="danger"
-          onClick={onOpen}
-          size="md"
-          variant="ghost"
-        >
-          <FiTrash2 />
-        </IconButton>
-      </Tooltip>
+      <IconButton colorPalette="danger" label={label} onClick={onOpen}>
+        <FiTrash2 />
+      </IconButton>
 
       <DeleteDialog
         isDeleting={isPending}
         onClose={onClose}
         onDelete={() => deleteDag({ dagId })}
         open={open}
         resourceName={dagDisplayName}
-        title={translate("dagActions.delete.button")}
+        title={label}
         warningText={translate("dagActions.delete.warning")}
       />
     </>

airflow-core/src/airflow/ui/src/components/DagActions/FavoriteDagButton.tsx

@@ -16,11 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IconButton } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { FiStar } from "react-icons/fi";
+import { MdStar, MdStarOutline } from "react-icons/md";
 
-import { Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
 import { useToggleFavoriteDag } from "src/queries/useToggleFavoriteDag";
 
 type FavoriteDagButtonProps = {
@@ -35,22 +34,8 @@ export const FavoriteDagButton = ({ dagId, isFavorite = false }: FavoriteDagButt
   const label = isFavorite ? translate("unfavoriteDag") : translate("favoriteDag");
 
   return (
-    <Tooltip content={label}>
-      <IconButton
-        aria-label={label}
-        colorPalette="brand"
-        loading={isLoading}
-        onClick={() => toggleFavorite(isFavorite)}
-        size="md"
-        variant="ghost"
-      >
-        <FiStar
-          style={{
-            fill: isFavorite ? "var(--chakra-colors-brand-solid)" : "none",
-            stroke: "var(--chakra-colors-brand-solid)",
-          }}
-        />
-      </IconButton>
-    </Tooltip>
+    <IconButton label={label} loading={isLoading} onClick={() => toggleFavorite(isFavorite)}>
+      {isFavorite ? <MdStar /> : <MdStarOutline />}
+    </IconButton>
   );
 };

airflow-core/src/airflow/ui/src/components/DagActions/ParseDagButton.tsx

@@ -16,11 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IconButton } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { AiOutlineFileSync } from "react-icons/ai";
 
-import { Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
 import { useDagParsing } from "src/queries/useDagParsing.ts";
 
 type Props = {
@@ -33,17 +32,8 @@ export const ParseDagButton = ({ dagId, fileToken }: Props) => {
   const { isPending, mutate } = useDagParsing({ dagId });
 
   return (
-    <Tooltip content={translate("reparseDag")}>
-      <IconButton
-        aria-label={translate("reparseDag")}
-        colorPalette="brand"
-        loading={isPending}
-        onClick={() => mutate({ fileToken })}
-        size="md"
-        variant="ghost"
-      >
-        <AiOutlineFileSync />
-      </IconButton>
-    </Tooltip>
+    <IconButton label={translate("reparseDag")} loading={isPending} onClick={() => mutate({ fileToken })}>
+      <AiOutlineFileSync />
+    </IconButton>
   );
 };