From 23086476b3e9b0722164a4e42edda204a4984c47 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:19:12 +0000
Subject: [PATCH] Tailwind Merge (#6596)

* Tailwind Merge

* Fix merge classNames
---
 apps/web/components/Embed.tsx                     | 2 +-
 packages/lib/classNames.ts                        | 4 +++-
 packages/lib/package.json                         | 1 +
 packages/ui/components/avatar/AvatarGroup.tsx     | 2 +-
 packages/ui/components/divider/Divider.tsx        | 4 ++--
 packages/ui/components/form/dropdown/Dropdown.tsx | 2 +-
 packages/ui/form/fields.tsx                       | 2 +-
 7 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 38bec35fe0..b4df401e78 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -1163,7 +1163,7 @@ export const EmbedButton = <T extends React.ElementType>({
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const router = useRouter();
-  className = classNames(className, "hidden lg:inline-flex");
+  className = classNames("hidden lg:inline-flex", className);
   const openEmbedModal = () => {
     goto(router, {
       dialog: "embed",
diff --git a/packages/lib/classNames.ts b/packages/lib/classNames.ts
index fa17f266ab..f6b6874767 100644
--- a/packages/lib/classNames.ts
+++ b/packages/lib/classNames.ts
@@ -1,3 +1,5 @@
+import { twMerge } from "tailwind-merge";
+
 export default function classNames(...classes: unknown[]) {
-  return classes.filter(Boolean).join(" ");
+  return twMerge(classes.filter(Boolean).join(" "));
 }
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 6e2af2846f..fbe66029b1 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -22,6 +22,7 @@
     "next-i18next": "^11.3.0",
     "react-hot-toast": "^2.3.0",
     "rrule": "^2.7.1",
+    "tailwind-merge": "^1.8.1",
     "tsdav": "2.0.3",
     "tslog": "^3.2.1",
     "uuid": "^8.3.2"
diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
index af5bacd673..b6bc736153 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -20,7 +20,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
   const truncateAfter = props.truncateAfter || 4;
 
   return (
-    <ul className={classNames(props.className, "flex items-center")}>
+    <ul className={classNames("flex items-center", props.className)}>
       {avatars.map((item, enumerator) => {
         if (item.image != null) {
           if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) {
diff --git a/packages/ui/components/divider/Divider.tsx b/packages/ui/components/divider/Divider.tsx
index e9f39f5bb6..a14c191470 100644
--- a/packages/ui/components/divider/Divider.tsx
+++ b/packages/ui/components/divider/Divider.tsx
@@ -1,12 +1,12 @@
 import { classNames } from "@calcom/lib";
 
 export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
-  className = classNames(className, "gray-200");
+  className = classNames("gray-200", className);
   return <hr className={className} {...props} />;
 }
 
 export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
-  className = classNames(className, "mx-3");
+  className = classNames("mx-3", className);
   return (
     <svg
       className={className}
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index ed47b65660..004880f86a 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -16,7 +16,7 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={
         props.asChild
-          ? classNames(className, "rounded-md ring-0")
+          ? classNames("rounded-md ring-0", className)
           : `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 ring-0 hover:bg-gray-50 focus:bg-gray-100 group-hover:text-black ${className}`
       }
       ref={forwardedRef}
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index 244341fd4e..59a989264d 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -75,7 +75,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
           <Input
             id={id}
             placeholder={placeholder}
-            className={classNames(className, "mt-0", props.addOnLeading && "rounded-l-none")}
+            className={classNames("mt-0", props.addOnLeading && "rounded-l-none", className)}
             {...passThrough}
             ref={ref}
           />