Use regular mantine buttons for filter and summarize buttons in query builder (#46106)

* use mantine buttons for filter and summarize

* Restore fancy color hover states

* Add css modules

* oh the cleverness of me

* better var name

---------

Co-authored-by: Oisin Coveney <oisin@metabase.com>

frontend/src/metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.module.css

+.FilterButton {
+  transition: background 300ms linear, border 300ms linear;
+
+  &:hover:not([data-css-specifity-hack="🤣"]) {
+    color: var(--mb-color-filter);
+    border-color: color-mix(in srgb, var(--mb-color-filter) 30%, white);
+    background-color: color-mix(in srgb, var(--mb-color-filter) 10%, white);
+  }
+}
+
+.SummarizeButton {
+  transition: background 300ms linear, border 300ms linear;
+
+  &:hover:not([data-active="true"]) {
+    color: var(--mb-color-summarize);
+    border-color: color-mix(in srgb, var(--mb-color-summarize) 40%, white);
+    background-color: color-mix(in srgb, var(--mb-color-summarize) 15%, white);
+  }
+}

frontend/src/metabase/query_builder/components/view/ViewHeader/components/FilterHeaderButton.tsx

+import cx from "classnames";
 import { t } from "ttag";
 
-import { color } from "metabase/lib/colors";
 import type { QueryModalType } from "metabase/query_builder/constants";
 import { MODAL_TYPES } from "metabase/query_builder/constants";
+import { Button } from "metabase/ui";
 import * as Lib from "metabase-lib";
 import type Question from "metabase-lib/v1/Question";
 import type { QueryBuilderMode } from "metabase-types/store";
 
-import { HeaderButton } from "../ViewTitleHeader.styled";
+import ViewTitleHeaderS from "../ViewTitleHeader.module.css";
 
 interface FilterHeaderButtonProps {
   className?: string;
@@ -19,17 +20,14 @@ export function FilterHeaderButton({
   onOpenModal,
 }: FilterHeaderButtonProps) {
   return (
-    <HeaderButton
-      className={className}
-      active={false}
-      large
-      labelBreakpoint="sm"
-      color={color("filter")}
+    <Button
+      color="filter"
+      className={cx(className, ViewTitleHeaderS.FilterButton)}
       onClick={() => onOpenModal(MODAL_TYPES.FILTERS)}
       data-testid="question-filter-header"
     >
       {t`Filter`}
-    </HeaderButton>
+    </Button>
   );
 }
 

frontend/src/metabase/query_builder/components/view/ViewHeader/components/QuestionSummarizeWidget.jsx

 /* eslint-disable react/prop-types */
+import cx from "classnames";
 import { t } from "ttag";
 
-import { color } from "metabase/lib/colors";
+import { Button } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
-import { HeaderButton } from "../ViewTitleHeader.styled";
+import ViewTitleHeaderS from "../ViewTitleHeader.module.css";
 
 export function QuestionSummarizeWidget({
   isShowingSummarySidebar,
   onEditSummary,
   onCloseSummary,
-  ...props
+  className,
 }) {
   return (
-    <HeaderButton
-      large
-      color={color("summarize")}
-      labelBreakpoint="sm"
+    <Button
+      color="summarize"
+      variant={isShowingSummarySidebar ? "filled" : "default"}
       onClick={async () => {
         if (isShowingSummarySidebar) {
           onCloseSummary();
@@ -24,11 +24,11 @@ export function QuestionSummarizeWidget({
           onEditSummary();
         }
       }}
-      active={isShowingSummarySidebar}
-      {...props}
+      data-active={isShowingSummarySidebar}
+      className={cx(className, ViewTitleHeaderS.SummarizeButton)}
     >
       {t`Summarize`}
-    </HeaderButton>
+    </Button>
   );
 }