From 723d0ddec2e16236d61ad7ef79facafbf7c5363a Mon Sep 17 00:00:00 2001
From: Hichem Fantar <hichemfantar2049@gmail.com>
Date: Sat, 1 Jun 2024 22:34:25 +0100
Subject: [PATCH] fix: Kbar component styles and improve transitions (#15283)

* fix: Kbar component styles

Fix Kbar styles on active state

* refactor: Add transition to event type list item

The commit refactors the event type list item component by adding a transition effect to improve the user experience.
---
 apps/web/modules/users/views/users-public-view.tsx | 2 +-
 packages/features/kbar/Kbar.tsx                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 91a50a9c85..fa78c86c1c 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -126,7 +126,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
               <div
                 key={type.id}
                 style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0">
                 <Icon
                   name="arrow-right"
                   className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 3c7409f0ae..6203d5b38d 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -313,10 +313,10 @@ function RenderResults() {
             // For seeing keyboard up & down navigation in action, we need visual feedback based on "active" prop
             style={{
               background: active ? "var(--cal-bg-subtle)" : `var(--cal-bg-default)`,
-              borderLeft: active ? "2px solid var(--cal-border-default)" : "2px solid transparent",
+              borderLeft: active ? "2px solid var(--cal-border)" : "2px solid transparent",
               color: "var(--cal-text)",
             }}
-            className="flex items-center justify-between px-4 py-2.5 text-sm hover:cursor-pointer">
+            className="flex items-center justify-between px-4 py-2.5 text-sm transition hover:cursor-pointer">
             <span>{t(item.name)}</span>
             <DisplayShortcuts shortcuts={item.shortcut} />
           </div>