refactor: update className syntax form orientation

Author: yordan-st

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx

@@ -45,7 +45,10 @@ export function DialogBody(
         <div
             className={classNames(
                 "widget-rich-text-modal-content",
-                formOrientation === "vertical" ? "form-vertical" : "form-horizontal",
+                {
+                    "form-vertical": formOrientation === "vertical",
+                    "form-horizontal": formOrientation !== "vertical"
+                },
                 className
             )}
         >
@@ -70,7 +73,7 @@ export function FormControl(props: FormControlProps): ReactElement {
                     <label
                         htmlFor={inputId}
                         id={`${inputId}-label`}
-                        className={classNames("control-label", formOrientation !== "vertical" && "col-sm-3")}
+                        className={classNames("control-label", { "col-sm-3": formOrientation !== "vertical" })}
                     >
                         {label}
                     </label>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx

@@ -131,7 +131,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
     }, [imageUploadElementRef.current]);
 
     return (
-        <DialogContent className={classNames("image-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={classNames("image-dialog", { "form-vertical": formOrientation === "vertical" })}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <div ref={imageUploadElementRef}>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/LinkDialog.tsx

@@ -24,7 +24,7 @@ export default function LinkDialog(props: LinkDialogProps): ReactElement {
     };
 
     return (
-        <DialogContent className={classNames("link-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={classNames("link-dialog", { "form-vertical": formOrientation === "vertical" })}>
             <DialogHeader onClose={onClose}>Insert/Edit Link</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <FormControl label="Text" formOrientation={formOrientation} inputId="rich-text-link-text-input">

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/VideoDialog.tsx

@@ -121,7 +121,7 @@ export default function VideoDialog(props: VideoDialogProps): ReactElement {
     // disable embed tab if it is about modifying current video
     const disableEmbed = defaultValue?.src && defaultValue.src.length > 0;
     return (
-        <DialogContent className={classNames("video-dialog", formOrientation === "vertical" ? "form-vertical" : "")}>
+        <DialogContent className={classNames("video-dialog", { "form-vertical": formOrientation === "vertical" })}>
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Media</DialogHeader>
             <DialogBody formOrientation={formOrientation}>
                 <div>