Unified style for all clear filters buttons

samejr · samejr · commit f782a436df7f · 2026-04-19T17:17:57.000+01:00
diff --git a/apps/webapp/app/components/metrics/QueuesFilter.tsx b/apps/webapp/app/components/metrics/QueuesFilter.tsx
@@ -39,6 +39,7 @@ export function QueuesFilter() {
                 variant="secondary/small"
                 shortcut={shortcut}
                 tooltipTitle="Filter by queue"
+                className="pl-1.5"
               >
                 <span className="ml-1">Queues</span>
               </SelectTrigger>
diff --git a/apps/webapp/app/components/runs/v3/BatchFilters.tsx b/apps/webapp/app/components/runs/v3/BatchFilters.tsx
@@ -77,8 +77,14 @@ export function BatchFilters(props: BatchFiltersProps) {
       <PermanentBatchIdFilter />
       <TimeFilter shortcut={{ key: "d" }} />
       {hasFilters && (
-        <Form className="h-6">
-          <Button variant="minimal/small" LeadingIcon={XMarkIcon} tooltip="Clear all filters" />
+        <Form className="-ml-1 h-6">
+          <Button
+            variant="minimal/small"
+            LeadingIcon={XMarkIcon}
+            tooltip="Clear all filters"
+            className="group-hover/button:bg-transparent"
+            leadingIconClassName="group-hover/button:text-text-bright"
+          />
         </Form>
       )}
     </div>
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -369,11 +369,17 @@ export function RunsFilters(props: RunFiltersProps) {
       <AppliedFilters {...props} />
       <FilterMenu {...props} />
       {hasFilters && (
-        <Form className="h-6">
+        <Form className="-ml-1 h-6">
           {searchParams.has("rootOnly") && (
             <input type="hidden" name="rootOnly" value={searchParams.get("rootOnly") as string} />
           )}
-          <Button variant="minimal/small" LeadingIcon={XMarkIcon} tooltip="Clear all filters" />
+          <Button
+            variant="minimal/small"
+            LeadingIcon={XMarkIcon}
+            tooltip="Clear all filters"
+            className="group-hover/button:bg-transparent"
+            leadingIconClassName="group-hover/button:text-text-bright"
+          />
         </Form>
       )}
     </div>
diff --git a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
@@ -247,12 +247,14 @@ function ClearFiltersButton() {
   }, [location, navigate]);
 
   return (
-    <div className="h-6">
+    <div className="-ml-1 h-6">
       <Button
         variant="minimal/small"
         onClick={clearFilters}
         LeadingIcon={XMarkIcon}
         tooltip="Clear all filters"
+        className="group-hover/button:bg-transparent"
+        leadingIconClassName="group-hover/button:text-text-bright"
       />
     </div>
   );
diff --git a/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx b/apps/webapp/app/components/runs/v3/WaitpointTokenFilters.tsx
@@ -79,8 +79,14 @@ export function WaitpointTokenFilters(props: WaitpointTokenFiltersProps) {
       <PermanentIdempotencyKeyFilter />
       <TimeFilter shortcut={{ key: "d" }} />
       {hasFilters && (
-        <Form className="h-6">
-          <Button variant="minimal/small" LeadingIcon={XMarkIcon} tooltip="Clear all filters" />
+        <Form className="-ml-1 h-6">
+          <Button
+            variant="minimal/small"
+            LeadingIcon={XMarkIcon}
+            tooltip="Clear all filters"
+            className="group-hover/button:bg-transparent"
+            leadingIconClassName="group-hover/button:text-text-bright"
+          />
         </Form>
       )}
     </div>
@@ -193,9 +199,7 @@ function PermanentStatusFilter() {
                     label="Status"
                     icon={<StatusIcon className="size-3.5" />}
                     value={appliedSummary(
-                      selectedStatuses.map((v) =>
-                        waitpointStatusTitle(v as WaitpointTokenStatus)
-                      )
+                      selectedStatuses.map((v) => waitpointStatusTitle(v as WaitpointTokenStatus))
                     )}
                     onRemove={() => del(["statuses", "cursor", "direction"])}
                     variant="secondary/small"
@@ -391,7 +395,9 @@ function PermanentTagsFilter() {
   );
 }
 
-function WaitpointIdDropdown(props: Omit<IdFilterDropdownProps, "label" | "placeholder" | "paramKey" | "validate">) {
+function WaitpointIdDropdown(
+  props: Omit<IdFilterDropdownProps, "label" | "placeholder" | "paramKey" | "validate">
+) {
   return (
     <IdFilterDropdown
       {...props}
@@ -474,7 +480,9 @@ function PermanentWaitpointIdFilter() {
   );
 }
 
-function IdempotencyKeyDropdown(props: Omit<IdFilterDropdownProps, "label" | "placeholder" | "paramKey" | "validate">) {
+function IdempotencyKeyDropdown(
+  props: Omit<IdFilterDropdownProps, "label" | "placeholder" | "paramKey" | "validate">
+) {
   return (
     <IdFilterDropdown
       {...props}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
@@ -308,7 +308,13 @@ export function MetricDashboard({
           />
           {hasAppliedFilters && (
             <Form className="-ml-1 h-6">
-              <Button variant="minimal/small" LeadingIcon={XMarkIcon} tooltip="Clear all filters" />
+              <Button
+                variant="minimal/small"
+                LeadingIcon={XMarkIcon}
+                tooltip="Clear all filters"
+                className="group-hover/button:bg-transparent"
+                leadingIconClassName="group-hover/button:text-text-bright"
+              />
             </Form>
           )}
         </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx
@@ -432,11 +432,13 @@ function FiltersBar({
               shortcut={timeShortcut}
             />
             {hasFilters && (
-              <Form className="h-6">
+              <Form className="-ml-1 h-6">
                 <Button
-                  variant="secondary/small"
+                  variant="minimal/small"
                   LeadingIcon={XMarkIcon}
                   tooltip="Clear all filters"
+                  className="group-hover/button:bg-transparent"
+                  leadingIconClassName="group-hover/button:text-text-bright"
                 />
               </Form>
             )}
@@ -453,11 +455,13 @@ function FiltersBar({
               shortcut={timeShortcut}
             />
             {hasFilters && (
-              <Form className="h-6">
+              <Form className="-ml-1 h-6">
                 <Button
-                  variant="secondary/small"
+                  variant="minimal/small"
                   LeadingIcon={XMarkIcon}
                   tooltip="Clear all filters"
+                  className="group-hover/button:bg-transparent"
+                  leadingIconClassName="group-hover/button:text-text-bright"
                 />
               </Form>
             )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.logs/route.tsx
@@ -269,11 +269,13 @@ function FiltersBar({
             <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
             <LogsLevelFilter />
             {hasFilters && (
-              <Form className="h-6">
+              <Form className="-ml-1 h-6">
                 <Button
-                  variant="secondary/small"
+                  variant="minimal/small"
                   LeadingIcon={XMarkIcon}
                   tooltip="Clear all filters"
+                  className="group-hover/button:bg-transparent"
+                  leadingIconClassName="group-hover/button:text-text-bright"
                 />
               </Form>
             )}
@@ -286,11 +288,13 @@ function FiltersBar({
             <LogsLevelFilter />
             <SearchInput />
             {hasFilters && (
-              <Form className="h-6">
+              <Form className="-ml-1 h-6">
                 <Button
-                  variant="secondary/small"
+                  variant="minimal/small"
                   LeadingIcon={XMarkIcon}
                   tooltip="Clear all filters"
+                  className="group-hover/button:bg-transparent"
+                  leadingIconClassName="group-hover/button:text-text-bright"
                 />
               </Form>
             )}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
@@ -313,7 +313,13 @@ function FiltersBar({
         <FeaturesFilter features={allFeatures} />
         {hasFilters && (
           <Form className="-ml-1 h-6">
-            <Button variant="minimal/small" LeadingIcon={XMarkIcon} tooltip="Clear all filters" />
+            <Button
+              variant="minimal/small"
+              LeadingIcon={XMarkIcon}
+              tooltip="Clear all filters"
+              className="group-hover/button:bg-transparent"
+              leadingIconClassName="group-hover/button:text-text-bright"
+            />
           </Form>
         )}
       </div>

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ export function QueuesFilter() {`
`39`	`39`	`variant="secondary/small"`
`40`	`40`	`shortcut={shortcut}`
`41`	`41`	`tooltipTitle="Filter by queue"`
	`42`	`+ className="pl-1.5"`
`42`	`43`	`>`
`43`	`44`	`<span className="ml-1">Queues</span>`
`44`	`45`	`</SelectTrigger>`