feat: match edit user sheet designs (#18243)

* edit sheet design changes

* remove attribute header

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)}

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 ",
       },

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}