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

@@ -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"

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>