refactor: Setting redesign (#11124)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/ui/components/createButton/CreateButton.tsx

@@ -2,6 +2,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { ButtonColor } from "@calcom/ui";
 import {
   Avatar,
   Button,
@@ -30,6 +31,7 @@ export type CreateBtnProps = {
   isLoading?: boolean;
   disableMobileButton?: boolean;
   "data-testid"?: string;
+  color?: ButtonColor;
 };
 
 /**

packages/ui/components/form/switch/SettingsToggle.tsx

@@ -51,7 +51,7 @@ function SettingsToggle({
                     {title}
                     {LockedIcon}
                   </Label>
-                  {Badge}
+                  {Badge && <div className="mb-2">{Badge}</div>}
                 </div>
                 {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
               </div>

packages/ui/components/image-uploader/ImageUploader.tsx

@@ -5,6 +5,7 @@ import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import type { ButtonColor } from "../..";
 import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../..";
 import { showToast } from "../toast";
 
@@ -65,6 +66,7 @@ type ImageUploaderProps = {
   handleAvatarChange: (imageSrc: string) => void;
   imageSrc?: string;
   target: string;
+  triggerButtonColor?: ButtonColor;
 };
 
 interface FileEvent<T = Element> extends FormEvent<T> {
@@ -117,6 +119,7 @@ export default function ImageUploader({
   id,
   buttonMsg,
   handleAvatarChange,
+  triggerButtonColor,
   ...props
 }: ImageUploaderProps) {
   const { t } = useLocale();
@@ -169,7 +172,7 @@ export default function ImageUploader({
         (opened) => !opened && setFile(null) // unset file on close
       }>
       <DialogTrigger asChild>
-        <Button color="secondary" type="button" className="py-1 text-sm">
+        <Button color={triggerButtonColor ?? "secondary"} type="button" className="py-1 text-sm">
           {buttonMsg}
         </Button>
       </DialogTrigger>

packages/ui/components/list/List.tsx

@@ -18,7 +18,7 @@ export function List(props: ListProps) {
       data-testid="list"
       {...props}
       className={classNames(
-        "-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
+        "mx-0 rounded-sm sm:overflow-hidden ",
         // Add rounded top and bottome if roundContainer is true
         props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
         !props.noBorderTreatment &&

packages/ui/components/meta/Meta.tsx

@@ -9,6 +9,7 @@ type MetaType = {
   description: string;
   backButton?: boolean;
   CTA?: ReactNode;
+  borderInShellHeader?: boolean;
 };
 
 const initialMeta: MetaType = {
@@ -16,6 +17,7 @@ const initialMeta: MetaType = {
   description: "",
   backButton: false,
   CTA: null,
+  borderInShellHeader: true,
 };
 
 const MetaContext = createContext({
@@ -44,13 +46,13 @@ export function MetaProvider({ children }: { children: ReactNode }) {
  * elsewhere (ie. on a Heading, Title, Subtitle, etc.)
  * @example <Meta title="Password" description="Manage settings for your account passwords" />
  */
-export default function Meta({ title, description, backButton, CTA }: MetaType) {
+export default function Meta({ title, description, backButton, CTA, borderInShellHeader }: MetaType) {
   const { setMeta, meta } = useMeta();
 
   /* @TODO: maybe find a way to have this data on first render to prevent flicker */
   useEffect(() => {
     if (meta.title !== title || meta.description !== description || meta.CTA !== CTA) {
-      setMeta({ title, description, backButton, CTA });
+      setMeta({ title, description, backButton, CTA, borderInShellHeader });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [title, description, backButton, CTA]);