+
diff --git a/packages/ui/components/data-table/DataTableToolbar.tsx b/packages/ui/components/data-table/DataTableToolbar.tsx
index 0b9be001a7dc8a..2c63ef20c01f96 100644
--- a/packages/ui/components/data-table/DataTableToolbar.tsx
+++ b/packages/ui/components/data-table/DataTableToolbar.tsx
@@ -4,6 +4,8 @@ import type { Table } from "@tanstack/react-table";
import type { LucideIcon } from "lucide-react";
import { X } from "lucide-react";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
import { Button } from "../button";
import { Input } from "../form";
import { DataTableFilter } from "./DataTableFilter";
@@ -35,8 +37,10 @@ export function DataTableToolbar
({
// If you select ALL filters for a column, the table is not filtered and we dont get a reset button
const isFiltered = table.getState().columnFilters.length > 0;
+ const { t } = useLocale();
+
return (
-
+
{searchKey && (
({
EndIcon={X}
onClick={() => table.resetColumnFilters()}
className="h-8 px-2 lg:px-3">
- Reset
+ {t("clear")}
)}
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index cd3e6e3b568a0a..b0d43a5ef2d281 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -24,7 +24,7 @@ export const AnimatedPopover = ({
prefix?: string;
}) => {
const [open, setOpen] = React.useState(defaultOpen ?? false);
- const ref = React.useRef
(null);
+ const ref = React.useRef(null);
// calculate which aligment to open the popover with based on which half of the screen it is on (left or right)
const [align, setAlign] = React.useState<"start" | "end">("start");
React.useEffect(() => {
@@ -50,7 +50,7 @@ export const AnimatedPopover = ({
return (
-
)}
-
+