From 34b0753f8de3b019a0c8d1080d55ff579ee68fc1 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 18 Dec 2024 11:50:19 +0000
Subject: [PATCH] feat: match edit user sheet designs (#18243)

* edit sheet design changes

* remove attribute header
---
 .../UserTable/EditSheet/EditUserForm.tsx      | 21 +++++++++----------
 packages/ui/components/button/Button.tsx      |  2 +-
 .../image-uploader/ImageUploader.tsx          |  5 ++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
index 5aa9c0590a..322f189381 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
@@ -26,6 +26,7 @@ import {
   SheetFooter,
   Button,
   SheetTitle,
+  Divider,
 } from "@calcom/ui";
 
 import type { UserTableAction } from "../types";
@@ -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 });
                       }}
@@ -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
@@ -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>
@@ -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)}
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index effcb7240d..2458742a15 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -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 ",
       },
diff --git a/packages/ui/components/image-uploader/ImageUploader.tsx b/packages/ui/components/image-uploader/ImageUploader.tsx
index ad2cc4d0c8..ba6a637110 100644
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/packages/ui/components/image-uploader/ImageUploader.tsx
@@ -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";
@@ -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;
@@ -78,6 +79,7 @@ export default function ImageUploader({
   uploadInstruction,
   disabled = false,
   testId,
+  buttonSize,
 }: ImageUploaderProps) {
   const { t } = useLocale();
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
@@ -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}