From 015ed6d4f9969351b8676c41dc5da5cff7159b75 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Fri, 2 Sep 2022 22:16:36 +0100 Subject: [PATCH] Public Booking Pages (#4063) * Teams + /book * Consitant hoverstate across event-type cards * Fix darkmode hover on book a team member * Fix mobile wrapping * Fix mobile looking awful with long links * Fix storybook * Fix SB * Phone Input darkmode * Location radio styles darkmode * Off Topic: NIT add disable guests * Update highlights on /book and [user]/[type] * Fix preview URL * Fix hover state * Fix spacing for locations --- .../storybook/stories/AvatarGroup.stories.tsx | 5 +- .../storybook/stories/ButtonGroup.stories.tsx | 35 +- .../booking/AvailableEventLocations.tsx | 44 +- .../web/components/booking/AvailableTimes.tsx | 4 +- apps/web/components/booking/TimeOptions.tsx | 2 +- .../components/booking/pages/BookingPage.tsx | 88 +- apps/web/components/team/screens/Team.tsx | 60 +- .../v2/eventtype/EventAdvancedTab.tsx | 29 +- apps/web/pages/[user].tsx | 8 +- apps/web/pages/team/[slug].tsx | 43 +- apps/web/pages/v2/event-types/index.tsx | 1 + packages/ui/LogoAnimatedWhite.json | 3876 ++++++++++++++++- packages/ui/form/PhoneInput.tsx | 6 +- packages/ui/form/TimezoneSelect.tsx | 2 +- packages/ui/v2/core/Avatar.tsx | 2 +- packages/ui/v2/core/Switch.tsx | 13 +- packages/ui/v2/modules/booker/DatePicker.tsx | 4 +- 17 files changed, 4053 insertions(+), 169 deletions(-) diff --git a/apps/storybook/stories/AvatarGroup.stories.tsx b/apps/storybook/stories/AvatarGroup.stories.tsx index 23d27aef9a..385157afce 100644 --- a/apps/storybook/stories/AvatarGroup.stories.tsx +++ b/apps/storybook/stories/AvatarGroup.stories.tsx @@ -1,3 +1,4 @@ +import { TooltipProvider } from "@radix-ui/react-tooltip"; import { ComponentMeta } from "@storybook/react"; import AvatarGroup from "@calcom/ui/v2/core/AvatarGroup"; @@ -52,8 +53,8 @@ const IMAGES = [ export const Default = () => { return ( - <> + - + ); }; diff --git a/apps/storybook/stories/ButtonGroup.stories.tsx b/apps/storybook/stories/ButtonGroup.stories.tsx index 9085e78209..17309c92de 100644 --- a/apps/storybook/stories/ButtonGroup.stories.tsx +++ b/apps/storybook/stories/ButtonGroup.stories.tsx @@ -8,30 +8,33 @@ import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup"; export default { title: "Button Group", component: ButtonGroup, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; export const Default = () => ( - - - {(mutation.isError || recurringMutation.isError) && ( diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx index a0d92ec1ee..d59a75b1d1 100644 --- a/apps/web/components/team/screens/Team.tsx +++ b/apps/web/components/team/screens/Team.tsx @@ -1,4 +1,3 @@ -import classnames from "classnames"; import Link from "next/link"; import { TeamPageProps } from "pages/team/[slug]"; import React from "react"; @@ -6,11 +5,10 @@ import React from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import Button from "@calcom/ui/Button"; import { Icon } from "@calcom/ui/Icon"; +import { Avatar } from "@calcom/ui/v2"; import { useLocale } from "@lib/hooks/useLocale"; -import Avatar from "@components/ui/Avatar"; - type TeamType = TeamPageProps["team"]; type MembersType = TeamType["members"]; type MemberType = MembersType[number]; @@ -19,47 +17,20 @@ const Team = ({ team }: TeamPageProps) => { const { t } = useLocale(); const Member = ({ member }: { member: MemberType }) => { - const classes = classnames( - "group", - "relative", - "flex flex-col", - "space-y-4", - "p-4", - "min-w-full sm:min-w-64 sm:max-w-64", - "bg-white dark:bg-neutral-800 dark:border-neutral-700 dark:bg-opacity-8", - "border border-neutral-200", - "hover:cursor-pointer", - "hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600", - "rounded-sm", - "hover:shadow-md" - ); - return ( -
- + - -
- -
-

{member.name}

-

- {member.bio || t("user_from_team", { user: member.name, team: team.name })} -

-
-
+
+

{member.name}

+

+ {member.bio || t("user_from_team", { user: member.name, team: team.name })} +

+
); @@ -82,13 +53,6 @@ const Team = ({ team }: TeamPageProps) => { return (
- {team.eventTypes.length > 0 && ( - - )}
); }; diff --git a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx index 288b7cf543..20e9a32752 100644 --- a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx +++ b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx @@ -49,6 +49,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick { animationRef.current && autoAnimate(animationRef.current); @@ -172,7 +173,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick (
- onChange(e)} /> + onChange(e)} + disabled={seatsEnabled} + />
+ className="dark:bg-darkgray-100 group relative border-b border-neutral-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-600"> {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */} ) { }} className="block w-full p-5" data-testid="event-type-link"> -
-

+
+

{type.title}

-

{`/${user.username}/${type.slug}`}

+

{`/${user.username}/${type.slug}`}

 diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx index 39ba485364..1b5fffca32 100644 --- a/apps/web/pages/team/[slug].tsx +++ b/apps/web/pages/team/[slug].tsx @@ -12,6 +12,7 @@ import useTheme from "@calcom/lib/hooks/useTheme"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { Icon } from "@calcom/ui/Icon"; +import { Avatar } from "@calcom/ui/v2"; import { Button } from "@calcom/ui/v2/core"; import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription"; @@ -22,7 +23,6 @@ import { inferSSRProps } from "@lib/types/inferSSRProps"; import { HeadSeo } from "@components/seo/head-seo"; import Team from "@components/team/screens/Team"; -import Avatar from "@components/ui/Avatar"; import AvatarGroup from "@components/ui/AvatarGroup"; export type TeamPageProps = inferSSRProps; @@ -42,25 +42,27 @@ function TeamPage({ team }: TeamPageProps) { ); }, [telemetry, router.asPath]); - const eventTypes = ( + const EventTypes = () => (