chore: v3 fixed filters, new profile view (#19312)

* fixed filters with badge

* aligned recurrence in bookings

* removed new badge

* new profile view

* fixed try for free button

* fixed form input

apps/web/components/booking/BookingListItem.tsx

@@ -745,7 +745,7 @@ const BookingItemBadges = ({
         </Badge>
       ) : null}
       {recurringDates !== undefined && (
-        <div className="text-muted mt-2 text-sm">
+        <div className="text-muted -mt-1 text-sm">
           <RecurringBookingsTooltip
             userTimeFormat={userTimeFormat}
             userTimeZone={userTimeZone}

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -946,7 +946,6 @@ export default function Success(props: PageProps) {
                               placeholder="rick.astley@cal.com"
                             />
                             <Button
-                              size="lg"
                               type="submit"
                               className="min-w-max rounded-none rounded-r-md"
                               color="primary">

apps/web/modules/users/views/users-public-view.tsx

@@ -68,9 +68,9 @@ export function UserPage(props: PageProps) {
             isEmbed ? "border-booker border-booker-width  bg-default rounded-md" : "",
             "max-w-3xl px-4 py-24"
           )}>
-          <div className="mb-8 text-center">
+          <div className="border-subtle bg-default text-default mb-8 rounded-xl border p-4">
             <UserAvatar
-              size="xl"
+              size="lg"
               user={{
                 avatarUrl: user.avatarUrl,
                 profile: user.profile,
@@ -78,7 +78,7 @@ export function UserPage(props: PageProps) {
                 username: profile.username,
               }}
             />
-            <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
+            <h1 className="font-cal text-emphasis mb-1 mt-4 text-xl" data-testid="name-title">
               {profile.name}
               {!isOrg && user.verified && (
                 <Icon
@@ -96,7 +96,7 @@ export function UserPage(props: PageProps) {
             {!isBioEmpty && (
               <>
                 <div
-                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="text-default break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: props.safeBio }}
                 />

packages/app-store/routing-forms/components/react-awesome-query-builder/config/uiConfig.tsx

@@ -71,7 +71,7 @@ const EmailFactory = (props: WidgetProps | undefined) => {
         props.setValue(val);
       }}
       containerClassName="w-full"
-      className="dark:placeholder:text-darkgray-600 focus:border-brand border-subtle dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:placeholder:text-default focus:border-brand border-subtle dark:text-default disabled:dark:text-muted block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500"
       {...props}
     />
   );

packages/features/bookings/components/FilterToggle.tsx

@@ -20,14 +20,16 @@ export function FilterToggle({ setIsFiltersVisible }: FilterToggleProps) {
 
   return (
     <Button color="secondary" onClick={toggleFiltersVisibility} className="mb-4" StartIcon="filter">
-      <Tooltip content={t("filters")}>
-        <div className="mx-2">{t("filters")}</div>
-      </Tooltip>
-      {(teamIds || userIds || eventTypeIds) && (
-        <Badge variant="gray" rounded>
-          {(teamIds ? 1 : 0) + (userIds ? 1 : 0) + (eventTypeIds ? 1 : 0)}
-        </Badge>
-      )}
+      <div className="flex items-center">
+        <Tooltip content={t("filters")}>
+          <div className="mx-2">{t("filters")}</div>
+        </Tooltip>
+        {(teamIds || userIds || eventTypeIds) && (
+          <Badge variant="gray" rounded>
+            {(teamIds ? 1 : 0) + (userIds ? 1 : 0) + (eventTypeIds ? 1 : 0)}
+          </Badge>
+        )}
+      </div>
     </Button>
   );
 }

packages/features/shell/navigation/Navigation.tsx

@@ -9,7 +9,6 @@ import {
 } from "@calcom/features/ee/organizations/context/provider";
 import { KBarTrigger } from "@calcom/features/kbar/Kbar";
 import { classNames } from "@calcom/lib";
-import { Badge } from "@calcom/ui";
 
 import { TeamInviteBadge } from "../TeamInviteBadge";
 import type { NavigationItemType } from "./NavigationItem";
@@ -92,8 +91,6 @@ const getNavigationItems = (orgBranding: OrganizationBranding): NavigationItemTy
     name: "routing",
     href: "/routing",
     icon: "split",
-    badge: <Badge variant="green">NEW</Badge>,
-
     isCurrent: ({ pathname }) => pathname?.startsWith("/routing") ?? false,
     moreOnMobile: true,
   },

packages/ui/components/editor/Editor.tsx

@@ -77,7 +77,7 @@ export const Editor = (props: TextEditorProps) => {
   return (
     <div className="editor rounded-md">
       <LexicalComposer initialConfig={{ ...editorConfig }}>
-        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default rounded-[10px] p-0 transition focus-within:ring-2">
+        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default !rounded-lg p-0 transition focus-within:ring-2">
           <ToolbarPlugin
             getText={props.getText}
             setText={props.setText}