Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: match edit user sheet designs #18243

Merged
merged 2 commits into from
Dec 18, 2024
Merged

feat: match edit user sheet designs #18243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40dc27c
edit sheet design changes
sean-brydon Dec 18, 2024
955ed9e
remove attribute header
sean-brydon Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
SheetFooter,
Button,
SheetTitle,
Divider,
} from "@calcom/ui";

import type { UserTableAction } from "../types";
Expand Down Expand Up @@ -168,19 +169,21 @@ export function EditForm({
}}>
<SheetHeader>
<SheetTitle>{t("update_profile")}</SheetTitle>

<div className="mt-6 flex flex-col gap-2">
</SheetHeader>
<SheetBody className="bg-muted border-subtle mt-6 gap-4 rounded-xl border p-4">
<div className="">
<Controller
control={form.control}
name="avatar"
render={({ field: { value } }) => (
<div className="flex items-center">
<Avatar alt={`${selectedUser?.name} avatar`} imageSrc={value} size="lg" />
<Avatar alt={`${selectedUser?.name} avatar`} imageSrc={value} size="mdLg" />
<div className="ml-4">
<ImageUploader
target="avatar"
id="avatar-upload"
buttonMsg={t("change_avatar")}
buttonSize="sm"
handleAvatarChange={(newAvatar) => {
form.setValue("avatar", newAvatar, { shouldDirty: true });
}}
Expand All @@ -191,14 +194,10 @@ export function EditForm({
)}
/>
</div>
</SheetHeader>
<SheetBody className="mt-4 flex h-full flex-col space-y-3 px-1">
<label className="text-emphasis mb-1 text-base font-bold">{t("profile")}</label>
<TextField label={t("username")} {...form.register("username")} />
<Divider />
<TextField label={t("name")} {...form.register("name")} />
<TextField label={t("email")} {...form.register("email")} />

<TextAreaField label={t("bio")} {...form.register("bio")} className="min-h-24" />
<TextField label={t("username")} {...form.register("username")} />
<TextAreaField label={t("about")} {...form.register("bio")} className="min-h-24" />
<div>
<Label>{t("role")}</Label>
<ToggleGroup
Expand All @@ -215,6 +214,7 @@ export function EditForm({
<Label>{t("timezone")}</Label>
<TimezoneSelect value={watchTimezone ?? "America/Los_Angeles"} />
</div>
<Divider />
<AttributesList selectedUserId={selectedUser?.id} />
</SheetBody>
<SheetFooter>
Expand Down Expand Up @@ -311,7 +311,6 @@ function AttributesList(props: { selectedUserId: number }) {
return (
<div className="flex flex-col overflow-visible">
<div className="flex flex-col gap-3 rounded-lg">
<label className="text-emphasis mb-1 mt-6 text-base font-bold">{t("attributes")}</label>
{attributeFieldState.error && (
<p className="text-error mb-2 block text-sm font-medium leading-none">
{JSON.stringify(attributeFieldState.error)}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/components/button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const buttonClasses = cva(
"border border-default text-emphasis hover:text-red-700 dark:hover:text-red-100 focus-visible:text-red-700 hover:border-red-100 focus-visible:border-red-100 hover:bg-error focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700 disabled:bg-red-100 disabled:border-red-200 disabled:text-red-700 disabled:hover:border-red-200 disabled:opacity-40",
},
size: {
sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,
sm: "px-3 py-2 leading-4 rounded-md" /** For backwards compatibility */,
base: "h-9 px-4 py-2.5 ",
lg: "h-[36px] px-4 py-2.5 ",
},
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/components/image-uploader/ImageUploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Cropper from "react-easy-crop";
import checkIfItFallbackImage from "@calcom/lib/checkIfItFallbackImage";
import { useLocale } from "@calcom/lib/hooks/useLocale";

import type { ButtonColor } from "../button";
import type { ButtonColor, ButtonProps } from "../button";
import { Button } from "../button";
import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../dialog";
import { showToast } from "../toast";
Expand All @@ -18,6 +18,7 @@ const MAX_IMAGE_SIZE = 512;
type ImageUploaderProps = {
id: string;
buttonMsg: string;
buttonSize?: ButtonProps["size"];
handleAvatarChange: (imageSrc: string) => void;
imageSrc?: string;
target: string;
Expand Down Expand Up @@ -78,6 +79,7 @@ export default function ImageUploader({
uploadInstruction,
disabled = false,
testId,
buttonSize,
}: ImageUploaderProps) {
const { t } = useLocale();
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
Expand Down Expand Up @@ -130,6 +132,7 @@ export default function ImageUploader({
color={triggerButtonColor ?? "secondary"}
type="button"
disabled={disabled}
size={buttonSize}
data-testid={testId ? `open-upload-${testId}-dialog` : "open-upload-avatar-dialog"}
className="cursor-pointer py-1 text-sm">
{buttonMsg}
Expand Down
Loading