diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 579ba8b770..ecdfb2cd8d 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -84,7 +84,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo `} -
+
*]:flex-1"}> {children}
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx index 6ffa6f293d..f1755445ed 100644 --- a/apps/web/pages/_document.tsx +++ b/apps/web/pages/_document.tsx @@ -87,7 +87,7 @@ class MyDocument extends Document { div { - width: 100%; -} - -html.todesktop.dark nav a:hover{ - background: inherit; -} - -html.todesktop.light nav a:hover{ - background: none; -} - -html.todesktop nav a svg{ - color: #229CFF !important -} - /* Adds Utility to hide scrollbar to tailwind https://github.com/tailwindlabs/tailwindcss/discussions/2394 diff --git a/packages/config/package.json b/packages/config/package.json index 14d083319c..3001d202e7 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -11,6 +11,7 @@ ], "dependencies": { "@calcom/eslint-plugin-eslint": "*", + "@todesktop/tailwind-variants": "^1.0.0", "eslint-config-next": "^13.2.1", "eslint-config-prettier": "^8.6.0", "eslint-config-turbo": "^0.0.7", diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js index 6e70d0c465..b72727f7f9 100644 --- a/packages/config/tailwind-preset.js +++ b/packages/config/tailwind-preset.js @@ -150,6 +150,7 @@ module.exports = { }, }, plugins: [ + require("@todesktop/tailwind-variants"), require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("tailwind-scrollbar")({ nocompatible: true }), diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx index 0477141a3c..cdc1fa7cc6 100644 --- a/packages/features/kbar/Kbar.tsx +++ b/packages/features/kbar/Kbar.tsx @@ -273,7 +273,7 @@ export const KBarTrigger = () => { diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx index 333a0c493a..704bdd52d8 100644 --- a/packages/features/settings/layouts/SettingsLayout.tsx +++ b/packages/features/settings/layouts/SettingsLayout.tsx @@ -175,7 +175,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => { return ( diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx index 10f7292007..5f3d015314 100644 --- a/packages/features/shell/Shell.tsx +++ b/packages/features/shell/Shell.tsx @@ -421,7 +421,7 @@ function UserDropdown({ small }: UserDropdownProps) { setMenuOpen((menuOpen) => !menuOpen)}> {!!orgBranding && ( @@ -1041,7 +1043,7 @@ export function ShellMain(props: LayoutProps) { props.backPath ? "relative" : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0", - "flex-shrink-0 md:relative md:bottom-auto md:right-auto" + "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto" )}> {isLocaleReady && props.CTA}
diff --git a/packages/ui/components/data-table/DataTableToolbar.tsx b/packages/ui/components/data-table/DataTableToolbar.tsx index 0b9be001a7..2c63ef20c0 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 cd3e6e3b56..b0d43a5ef2 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 ( -
)} -
+