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 <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-09-05 15:23:18 +01:00 · 2022-09-05 15:23:18 +01:00 · 8602a0a6e1
parent 7b0d4f0f78
commit 8602a0a6e1
7 changed files with 55 additions and 53 deletions
--- a/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/v2/eventtype/CustomInputTypeForm.tsx
@ -40,8 +40,8 @@ const CustomInputTypeForm: FC<Props> = (props) => {
  };

  return (
-    <form onSubmit={handleSubmit(props.onSubmit)}>
-      <div className="mb-2">
+    <form onSubmit={handleSubmit(props.onSubmit)} className="flex flex-col space-y-4">
+      <div>
        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
          {t("input_type")}
        </label>
--- 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 (
-    <div className="flex mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
+    <div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
      <ul className="w-full divide-y divide-neutral-200" data-testid="event-types">
        {types.map((type, index) => {
          const embedLink = `${group.profile.slug}/${type.slug}`;
@ -249,7 +246,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                )}>
                <div
                  className={classNames(
-                    "flex group w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
+                    "group flex w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
                    type.$disabled && "hover:bg-white"
                  )}>
                  {types.length > 1 && !type.$disabled && (
@ -390,7 +387,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                    </div>
                  </div>
                </div>
-                <div className="flex mr-5 flex-shrink-0 sm:hidden">
+                <div className="mr-5 flex flex-shrink-0 sm:hidden">
                  <Dropdown>
                    <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
                      <Button
@ -511,9 +508,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 };

 const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => {
-  console.log(profile.slug);
  return (
-    <div className="flex mb-4">
+    <div className="mb-4 flex">
      <Link href="/settings/teams">
        <a>
          <Avatar
@ -557,7 +553,7 @@ const CreateFirstEventTypeView = () => {

  return (
    <EmptyScreen
-      Icon={Icon.FiCalendar}
+      Icon={Icon.FiLink}
      headline={t("new_event_type_heading")}
      description={t("new_event_type_description")}
    />
--- a/apps/web/pages/v2/settings/my-account/appearance.tsx
+++ b/apps/web/pages/v2/settings/my-account/appearance.tsx
@ -139,7 +139,7 @@ const AppearanceView = (props: inferSSRProps<typeof getServerSideProps>) => {
        defaultValue={user.hideBranding}
        render={({ field: { value } }) => (
          <>
-            <div className="flex items-center">
+            <div className="flex w-full items-center justify-between">
              <div>
                <div className="flex items-center">
                  <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>{" "}
--- a/packages/features/ee/workflows/components/v2/DeleteDialog.tsx
+++ b/packages/features/ee/workflows/components/v2/DeleteDialog.tsx
@ -3,9 +3,9 @@ import { Dispatch, SetStateAction } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2";
 import { showToast } from "@calcom/ui/v2";
+import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";

 interface IDeleteDialog {
  isOpenDialog: boolean;
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@ -96,8 +96,8 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
        {props.type === "creation" && (
          <div>
            {props.title && <DialogHeader title={props.title} />}
-            {props.description && <p className="pb-8 text-sm text-gray-500">{props.description}</p>}
-            <div className="flex flex-col gap-6">{children}</div>
+            {props.description && <p className="pb-5 text-sm text-gray-500">{props.description}</p>}
+            <div className="flex flex-col space-y-6">{children}</div>
          </div>
        )}
        {props.type === "confirmation" && (
@ -115,21 +115,23 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
        )}
        {!props.useOwnActionButtons && (
          <DialogFooter>
-            <DialogClose asChild>
-              {/* This will require the i18n string passed in */}
-              <Button color="minimal" onClick={props.actionOnClose}>
-                {props.closeText ?? "Close"}
-              </Button>
-            </DialogClose>
-            {props.actionOnClick ? (
-              <Button color="primary" disabled={props.actionDisabled} onClick={props.actionOnClick}>
-                {props.actionText}
-              </Button>
-            ) : (
-              <Button color="primary" type="submit" disabled={props.actionDisabled}>
-                {props.actionText}
-              </Button>
-            )}
+            <div className="mt-2">
+              <DialogClose asChild>
+                {/* This will require the i18n string passed in */}
+                <Button color="minimal" onClick={props.actionOnClose}>
+                  {props.closeText ?? "Close"}
+                </Button>
+              </DialogClose>
+              {props.actionOnClick ? (
+                <Button color="primary" disabled={props.actionDisabled} onClick={props.actionOnClick}>
+                  {props.actionText}
+                </Button>
+              ) : (
+                <Button color="primary" type="submit" disabled={props.actionDisabled}>
+                  {props.actionText}
+                </Button>
+              )}
+            </div>
          </DialogFooter>
        )}
      </DialogPrimitive.Content>
@ -145,7 +147,7 @@ type DialogHeaderProps = {
 export function DialogHeader(props: DialogHeaderProps) {
  return (
    <>
-      <h3 className="leading-20 text-semibold text-xl text-black" id="modal-title">
+      <h3 className="leading-20 text-semibold font-cal pb-1 text-xl text-gray-900" id="modal-title">
        {props.title}
      </h3>
      {props.subtitle && <div className="text-sm text-gray-400">{props.subtitle}</div>}
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@ -25,7 +25,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(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<HTMLTextAreaElement, TextAreaProps>(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
      )}
    />
--- 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) {
        </Dropdown>
      )}

-      <DialogContent type="creation" className="overflow-y-auto" useOwnActionButtons>
-        <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
-          </h3>
-          <div>
-            <p className="text-sm text-gray-500">{t("new_event_type_to_book_description")}</p>
-          </div>
-        </div>
+      <DialogContent
+        type="creation"
+        className="overflow-y-auto"
+        useOwnActionButtons
+        title={teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
+        description={t("new_event_type_to_book_description")}>
        <Form
          form={form}
          handleSubmit={(values) => {
            createMutation.mutate(values);
          }}>
-          <div className="mt-3 space-y-4">
+          <div className="mt-3 space-y-6">
            {teamId && (
              <TextField
                type="hidden"
@ -203,7 +209,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
              <TextField
                label={`${t("url")}: ${process.env.NEXT_PUBLIC_WEBSITE_URL}`}
                required
-                addOnLeading={<InputLeading>/{pageSlug}/</InputLeading>}
+                addOnLeading={<>/{pageSlug}/</>}
                {...register("slug")}
              />
            ) : (
@ -211,9 +217,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
                label={t("url")}
                required
                addOnLeading={
-                  <InputLeading>
+                  <>
                    {process.env.NEXT_PUBLIC_WEBSITE_URL}/{pageSlug}/
-                  </InputLeading>
+                  </>
                }
                {...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")}
              />
-              <div className="absolute inset-y-0 right-0 mt-1.5 flex items-center pt-4 pr-3 text-sm text-gray-400">
-                {t("minutes")}
-              </div>
            </div>

            {teamId && (