From 013a8fc41817919927dc512ea54111d315f24d53 Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Tue, 2 Jan 2024 19:09:22 +0000 Subject: [PATCH 1/3] installed todesktop tailwind variant --- apps/web/styles/globals.css | 11 ----------- packages/config/package.json | 1 + packages/config/tailwind-preset.js | 1 + packages/features/shell/Shell.tsx | 6 +++--- 4 files changed, 5 insertions(+), 14 deletions(-) diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index bcb55da410404f..69d471ffb9772b 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -150,17 +150,6 @@ html.todesktop .logo { display: none; } -.desktop-only { - display: none; -} - -html.todesktop .desktop-only { - display: block; -} - -html.todesktop .desktop-hidden { - display: none; -} html.todesktop header nav { margin-top: 8px; diff --git a/packages/config/package.json b/packages/config/package.json index 14d083319cd112..3001d202e75c45 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 6e70d0c465f6d6..b72727f7f9998f 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/shell/Shell.tsx b/packages/features/shell/Shell.tsx index ec9f75dd4a1c5d..57c3dcd6a075e6 100644 --- a/packages/features/shell/Shell.tsx +++ b/packages/features/shell/Shell.tsx @@ -525,7 +525,7 @@ function UserDropdown({ small }: UserDropdownProps) { {t("help")} - + {t("download_desktop_app")} @@ -917,13 +917,13 @@ function SideBar({ bannersHeight, user }: SideBarProps) { {!!orgBranding && ( From 2fd63e596009b615dc9d5a99b46744c581e49c95 Mon Sep 17 00:00:00 2001 From: Peer Richelsen Date: Wed, 3 Jan 2024 15:26:46 +0000 Subject: [PATCH 2/3] moved todesktop styles into tailwind classes --- apps/web/app/layout.tsx | 2 +- .../components/auth/layouts/AdminLayout.tsx | 2 +- apps/web/pages/_document.tsx | 2 +- apps/web/styles/globals.css | 51 +++---------------- packages/features/kbar/Kbar.tsx | 2 +- packages/features/shell/Shell.tsx | 22 ++++---- .../data-table/DataTableToolbar.tsx | 8 ++- .../ui/components/popover/AnimatedPopover.tsx | 6 +-- 8 files changed, 31 insertions(+), 64 deletions(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 579ba8b770b67d..ecdfb2cd8da185 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 6ffa6f293df260..f1755445ed0343 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 { + --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3); } -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/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx index 0477141a3cb717..cdc1fa7cc69bd8 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/shell/Shell.tsx b/packages/features/shell/Shell.tsx index 57c3dcd6a075e6..a3f2af899445d7 100644 --- a/packages/features/shell/Shell.tsx +++ b/packages/features/shell/Shell.tsx @@ -421,7 +421,7 @@ function UserDropdown({ small }: UserDropdownProps) { setMenuOpen((menuOpen) => !menuOpen)}>
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 ( -
)} -
+
Date: Wed, 3 Jan 2024 15:32:34 +0000 Subject: [PATCH 3/3] fixed back button in settings --- packages/features/settings/layouts/SettingsLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx index 333a0c493aa45f..704bdd52d8d879 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 (