From 8602a0a6e16b25cdeae6d5466a4201a678a94ce4 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Mon, 5 Sep 2022 15:23:18 +0100 Subject: [PATCH] V2 Fixes (#4156) * Remove shadow * Empty screen * V2 Create event type * Fix switch not being right alligned * Fix modal anatomy * Fix layouts across app Co-authored-by: Peer Richelsen Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../v2/eventtype/CustomInputTypeForm.tsx | 4 +- apps/web/pages/v2/event-types/index.tsx | 18 ++++----- .../v2/settings/my-account/appearance.tsx | 2 +- .../workflows/components/v2/DeleteDialog.tsx | 2 +- packages/ui/v2/core/Dialog.tsx | 38 +++++++++--------- packages/ui/v2/core/form/fields.tsx | 4 +- .../modules/event-types/CreateEventType.tsx | 40 ++++++++++--------- 7 files changed, 55 insertions(+), 53 deletions(-) diff --git a/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx b/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx index 11243528a1..9676abb12d 100644 --- a/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx +++ b/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx @@ -40,8 +40,8 @@ const CustomInputTypeForm: FC = (props) => { }; return ( -
-
+ +
diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx index cc7ed08bd4..784ae186fc 100644 --- a/apps/web/pages/v2/event-types/index.tsx +++ b/apps/web/pages/v2/event-types/index.tsx @@ -10,11 +10,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui"; import { Alert } from "@calcom/ui/Alert"; -import Badge from "@calcom/ui/Badge"; -import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; -import { Dialog } from "@calcom/ui/Dialog"; -import EmptyScreen from "@calcom/ui/EmptyScreen"; -import { Button, Tooltip, Switch, showToast } from "@calcom/ui/v2"; +import { Dialog, EmptyScreen, Badge, Button, Tooltip, Switch, showToast } from "@calcom/ui/v2"; +import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent"; import Dropdown, { DropdownItem, DropdownMenuContent, @@ -232,7 +229,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]); return ( -
+
    {types.map((type, index) => { const embedLink = `${group.profile.slug}/${type.slug}`; @@ -249,7 +246,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL )}>
    {types.length > 1 && !type.$disabled && ( @@ -390,7 +387,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
-
+
- - {props.actionOnClick ? ( - - ) : ( - - )} +
+ + {/* This will require the i18n string passed in */} + + + {props.actionOnClick ? ( + + ) : ( + + )} +
)} @@ -145,7 +147,7 @@ type DialogHeaderProps = { export function DialogHeader(props: DialogHeaderProps) { return ( <> - {props.subtitle &&
{props.subtitle}
} diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx index f1db746b68..ba956ad108 100644 --- a/packages/ui/v2/core/form/fields.tsx +++ b/packages/ui/v2/core/form/fields.tsx @@ -25,7 +25,7 @@ export const Input = forwardRef(function Input(pro {...props} ref={ref} className={classNames( - "mb-[7px] block h-9 w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm", + "mb-[7px] block h-9 w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm", props.className )} /> @@ -283,7 +283,7 @@ export const TextArea = forwardRef(function ref={ref} {...props} className={classNames( - "my-2 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm", + "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm", props.className )} /> diff --git a/packages/ui/v2/modules/event-types/CreateEventType.tsx b/packages/ui/v2/modules/event-types/CreateEventType.tsx index c0aad9df68..0cf2eaaad5 100644 --- a/packages/ui/v2/modules/event-types/CreateEventType.tsx +++ b/packages/ui/v2/modules/event-types/CreateEventType.tsx @@ -15,8 +15,17 @@ import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype"; import { trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/Alert"; import { Icon } from "@calcom/ui/Icon"; -import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields"; -import { Dialog, DialogClose, DialogContent, Button, Avatar, showToast } from "@calcom/ui/v2"; +import { + Dialog, + DialogClose, + DialogContent, + Button, + Avatar, + showToast, + Form, + TextAreaField, + TextField, +} from "@calcom/ui/v2"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, @@ -173,21 +182,18 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) { )} - -
- -
-

{t("new_event_type_to_book_description")}

-
-
+ { createMutation.mutate(values); }}> -
+
{teamId && ( /{pageSlug}/} + addOnLeading={<>/{pageSlug}/} {...register("slug")} /> ) : ( @@ -211,9 +217,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) { label={t("url")} required addOnLeading={ - + <> {process.env.NEXT_PUBLIC_WEBSITE_URL}/{pageSlug}/ - + } {...register("slug")} /> @@ -234,10 +240,8 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) { label={t("length")} className="pr-20" {...register("length", { valueAsNumber: true })} + addOnSuffix={t("minutes")} /> -
- {t("minutes")} -
{teamId && (