vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: EditLocationDialog footer positioning and structure (#19335)

Browse Source 
* fix: EditLocationDialog footer positioning and structure

* fix: make RescheduleDialog footer layout and button structure right

* fix: input dialogue glitch now works great

* made tests happy

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
amrit
2025-02-18 15:23:40 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent 649faf4ff6
commit 2d9a3bd741
4 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/dialog/AddGuestsDialog.tsx
+24 -23
View File
@@ -61,17 +61,19 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
<Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
<DialogContent enableOverflow>
<div className="flex flex-row space-x-3">
<div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
<div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
<Icon name="user-plus" className="m-auto h-6 w-6" />
</div>
<div className="w-full pt-1">
<DialogHeader title={t("additional_guests")} />
<MultiEmail
label={t("add_emails")}
value={multiEmailValue}
readOnly={false}
setValue={setMultiEmailValue}
/>
<div className="bg-default">
<MultiEmail
label={t("add_emails")}
value={multiEmailValue}
readOnly={false}
setValue={setMultiEmailValue}
/>
</div>
{isInvalidEmail && (
<div className="my-4 flex text-sm text-red-700">
@@ -83,24 +85,23 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
</div>
</div>
)}
<DialogFooter>
<Button
onClick={() => {
setMultiEmailValue([""]);
setIsInvalidEmail(false);
setIsOpenDialog(false);
}}
type="button"
color="secondary">
{t("cancel")}
</Button>
<Button data-testid="add_members" loading={addGuestsMutation.isPending} onClick={handleAdd}>
{t("add")}
</Button>
</DialogFooter>
</div>
</div>
<DialogFooter showDivider className="mt-8">
<Button
onClick={() => {
setMultiEmailValue([""]);
setIsInvalidEmail(false);
setIsOpenDialog(false);
}}
type="button"
color="secondary">
{t("cancel")}
</Button>
<Button data-testid="add_members" loading={addGuestsMutation.isPending} onClick={handleAdd}>
{t("add")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
apps/web/components/dialog/EditLocationDialog.tsx
+1 -2
View File
@@ -324,7 +324,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
}}
/>
{selectedLocation && SelectedLocationInput}
<DialogFooter className="relative">
<DialogFooter showDivider className="mt-8">
<Button
onClick={() => {
setShowLocationModal(false);
@@ -336,7 +336,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
color="secondary">
{t("cancel")}
</Button>
<Button data-testid="update-location" type="submit" disabled={isLocationUpdating}>
{t("update")}
</Button>
apps/web/components/dialog/RescheduleDialog.tsx
+17 -17
View File
@@ -6,7 +6,6 @@ import { trpc } from "@calcom/trpc/react";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
@@ -46,7 +45,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
<div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
<Icon name="clock" className="m-auto h-6 w-6" />
</div>
<div className="pt-1">
<div className="w-full pt-1">
<DialogHeader title={t("send_reschedule_request")} />
<p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
<p className="text-emphasis mb-2 mt-6 text-sm font-bold">
@@ -60,23 +59,24 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
onChange={(e) => setRescheduleReason(e.target.value)}
className="mb-5 sm:mb-6"
/>
<DialogFooter>
<DialogClose />
<Button
data-testid="send_request"
disabled={isPending}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
</DialogFooter>
</div>
</div>
<DialogFooter showDivider className="mt-8">
<Button color="secondary" onClick={() => setIsOpenDialog(false)}>
{t("cancel")}
</Button>
<Button
data-testid="send_request"
disabled={isPending}
onClick={() => {
rescheduleApi({
bookingId,
rescheduleReason,
});
}}>
{t("send_reschedule_request")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
packages/ui/form/MultiEmail.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ function MultiEmail({ value, readOnly, label, setValue, placeholder }: MultiEmai
const { t } = useLocale();
value = value || [];
const inputClassName =
"dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle bg-default";
"dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle";
return (
<>
{value.length ? (