fix: dropdown font size issue using pdf-lib

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -4,6 +4,8 @@ import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
   defaultWidthHeight,
+  fontColorArr,
+  fontsizeArr,
   getContainerScale,
   handleCopyNextToWidget,
   isTabAndMobile,
@@ -15,6 +17,8 @@ import {
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
+import ModalUi from "../../primitives/ModalUi";
+import { useTranslation } from "react-i18next";
 
 const selectFormat = (data) => {
   switch (data) {
@@ -89,9 +93,10 @@ const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
 const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
 
 function Placeholder(props) {
+  const { t } = useTranslation();
   const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
-  const [isShowDateFormat, setIsShowDateFormat] = useState(false);
+  const [isDateModal, setIsDateModal] = useState(false);
   const [containerScale, setContainerScale] = useState();
   const [selectDate, setSelectDate] = useState({
     date:
@@ -200,20 +205,6 @@ function Placeholder(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectDate]);
 
-  //it detect outside click of date dropdown menu
-  useEffect(() => {
-    const closeMenuOnOutsideClick = (e) => {
-      if (isShowDateFormat && !e.target.closest("#menu-container")) {
-        setIsShowDateFormat(!isShowDateFormat);
-      }
-    };
-    document.addEventListener("click", closeMenuOnOutsideClick);
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", closeMenuOnOutsideClick);
-    };
-  }, [isShowDateFormat]);
-
   //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
   const handleWidgetIdandPopup = () => {
     if (props.setSelectWidgetId) {
@@ -430,7 +421,11 @@ function Placeholder(props) {
       props.setXyPostion,
       props.data && props.data.Id,
       false,
-      data?.format
+      data?.format,
+      null,
+      null,
+      props.fontSize || props.pos?.options?.fontSize || "12",
+      props.fontColor || props.pos?.options?.fontColor || "black"
     );
     setSelectDate({ date: date, format: data?.format });
   };
@@ -522,16 +517,10 @@ function Placeholder(props) {
           )}
           {/* setting icon only for date widgets */}
           {props.pos.type === "date" && selectDate && (
-            <div
-              id="menu-container"
-              style={{
-                zIndex: "99",
-                top: "-19px",
-                right: props.isPlaceholder ? "60px" : "44px"
-              }}
-              className={`${isShowDateFormat ? "show" : ""} dropdown icon`}
+            <i
               onClick={(e) => {
-                setIsShowDateFormat(!isShowDateFormat);
+                props.setCurrWidgetsDetails(props.pos);
+                setIsDateModal(!isDateModal);
                 e.stopPropagation();
                 if (props.data) {
                   props.setSignKey(props.pos.key);
@@ -543,8 +532,9 @@ function Placeholder(props) {
                 }
               }}
               onTouchEnd={(e) => {
+                props.setCurrWidgetsDetails(props.pos);
                 e.stopPropagation();
-                setIsShowDateFormat(!isShowDateFormat);
+                setIsDateModal(!isDateModal);
                 if (props.data) {
                   props.setSignKey(props.pos.key);
                   props.setUniqueId(props.data.Id);
@@ -554,44 +544,15 @@ function Placeholder(props) {
                   props.setIsSelectId(checkIndex || 0);
                 }
               }}
-            >
-              <i
-                className="fa-light fa-gear icon"
-                style={{
-                  color: "#188ae2",
-                  fontSize: "14px"
-                }}
-              ></i>
-              <div
-                className={
-                  isShowDateFormat ? "dropdown-menu show" : "dropdown-menu"
-                }
-                aria-labelledby="dropdownMenuButton"
-                aria-expanded={isShowDateFormat ? "true" : "false"}
-              >
-                {dateFormat.map((data, ind) => {
-                  return (
-                    <span
-                      key={ind}
-                      onTouchEnd={(e) => {
-                        e.stopPropagation();
-                        setIsShowDateFormat(!isShowDateFormat);
-                        setSelectDate(data);
-                        handleSaveDate(data);
-                      }}
-                      onClick={() => {
-                        setIsShowDateFormat(!isShowDateFormat);
-                        setSelectDate(data);
-                        handleSaveDate(data);
-                      }}
-                      className="dropdown-item text-[13px]"
-                    >
-                      {data?.date ? data?.date : "nodata"}
-                    </span>
-                  );
-                })}
-              </div>
-            </div>
+              style={{
+                zIndex: "99",
+                top: "-18px",
+                right: props.isPlaceholder ? "50px" : "44px",
+                color: "#188ae2",
+                fontSize: "14px"
+              }}
+              className="fa-light fa-gear icon"
+            ></i>
           )}
           {/* copy icon for all widgets */}
           <i
@@ -705,228 +666,323 @@ function Placeholder(props) {
       return "all-scroll";
     }
   };
+
   return (
-    <Rnd
-      id={props.pos.key}
-      data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-      key={props.pos.key}
-      lockAspectRatio={
-        ![
-          textWidget,
-          "email",
-          "name",
-          "company",
-          "job title",
-          textInputWidget
-        ].includes(props.pos.type) &&
-        (props.pos.Width
-          ? props.pos.Width / props.pos.Height
-          : defaultWidthHeight(props.pos.type).width /
-            defaultWidthHeight(props.pos.type).height)
-      }
-      enableResizing={{
-        top: false,
-        right: false,
-        bottom: false,
-        left: false,
-        topRight: false,
-        bottomRight:
-          props.data && props.isNeedSign
-            ? props.data?.signerObjId === props.signerObjId &&
-              props.pos.type !== "checkbox" &&
-              props.pos.type !== radioButtonWidget
-              ? true
-              : false
-            : props.pos.type !== radioButtonWidget &&
-              props.pos.type !== "checkbox" &&
-              props.pos.key === props.selectWidgetId &&
-              true,
-        bottomLeft: false,
-        topLeft: false
-      }}
-      bounds="parent"
-      className="signYourselfBlock"
-      style={{
-        border: "1px solid #007bff",
-        borderRadius: "2px",
-        textAlign:
-          props.pos.type !== "name" &&
-          props.pos.type !== "company" &&
-          props.pos.type !== "job title" &&
-          "center",
-        cursor: getCursor(),
-        zIndex:
-          props.pos.type === "date"
-            ? props.pos.key === props.selectWidgetId
-              ? 99 + 1
-              : 99
-            : props?.pos?.zIndex
-              ? props.pos.zIndex
-              : "5",
-        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
-      }}
-      onDrag={() => {
-        setDraggingEnabled(true);
-        props.handleTabDrag && props.handleTabDrag(props.pos.key);
-      }}
-      size={{
-        width:
-          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
-            ? "auto"
-            : props.posWidth(props.pos, props.isSignYourself),
-        height:
-          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
-            ? "auto"
-            : props.posHeight(props.pos, props.isSignYourself)
-      }}
-      onResizeStart={() => {
-        setDraggingEnabled(true);
-        props.setIsResize && props.setIsResize(true);
-      }}
-      onResizeStop={(e, direction, ref) => {
-        props.setIsResize && props.setIsResize(false);
-        props.handleSignYourselfImageResize &&
-          props.handleSignYourselfImageResize(
-            ref,
-            props.pos.key,
-            props.xyPostion,
-            props.setXyPostion,
-            props.index,
-            containerScale,
-            props.scale,
-            props.data && props.data.Id,
-            props.isResize
-          );
-      }}
-      disableDragging={
-        props.isNeedSign
-          ? true
-          : props.isPlaceholder && ![textWidget].includes(props.pos.type)
-            ? false
-            : !isDraggingEnabled
-      }
-      onDragStop={(event, dragElement) =>
-        props.handleStop &&
-        props.handleStop(event, dragElement, props.data?.Id, props.pos?.key)
-      }
-      position={{
-        x: xPos(props.pos, props.isSignYourself),
-        y: yPos(props.pos, props.isSignYourself)
-      }}
-      onResize={(e, direction, ref) => {
-        setPlaceholderBorder({
-          w: ref.offsetWidth / (props.scale * containerScale),
-          h: ref.offsetHeight / (props.scale * containerScale)
-        });
-      }}
-      onClick={() => handleOnClickPlaceholder()}
-    >
-      {props.isShowBorder &&
-      props.pos.type !== radioButtonWidget &&
-      props.pos.type !== "checkbox" &&
-      props.pos.key === props.selectWidgetId ? (
-        <BorderResize right={-12} top={-11} />
-      ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
-        props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== radioButtonWidget &&
-        props.pos.type !== "checkbox" ? (
-          <BorderResize />
-        ) : (
-          <></>
-        )
-      ) : (
+    <>
+      <Rnd
+        id={props.pos.key}
+        data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
+        key={props.pos.key}
+        lockAspectRatio={
+          ![
+            textWidget,
+            "email",
+            "name",
+            "company",
+            "job title",
+            textInputWidget
+          ].includes(props.pos.type) &&
+          (props.pos.Width
+            ? props.pos.Width / props.pos.Height
+            : defaultWidthHeight(props.pos.type).width /
+              defaultWidthHeight(props.pos.type).height)
+        }
+        enableResizing={{
+          top: false,
+          right: false,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight:
+            props.data && props.isNeedSign
+              ? props.data?.signerObjId === props.signerObjId &&
+                props.pos.type !== "checkbox" &&
+                props.pos.type !== radioButtonWidget
+                ? true
+                : false
+              : props.pos.type !== radioButtonWidget &&
+                props.pos.type !== "checkbox" &&
+                props.pos.key === props.selectWidgetId &&
+                true,
+          bottomLeft: false,
+          topLeft: false
+        }}
+        bounds="parent"
+        className="signYourselfBlock"
+        style={{
+          border: "1px solid #007bff",
+          borderRadius: "2px",
+          textAlign:
+            props.pos.type !== "name" &&
+            props.pos.type !== "company" &&
+            props.pos.type !== "job title" &&
+            "center",
+          cursor: getCursor(),
+          zIndex:
+            props.pos.type === "date"
+              ? props.pos.key === props.selectWidgetId
+                ? 99 + 1
+                : 99
+              : props?.pos?.zIndex
+                ? props.pos.zIndex
+                : "5",
+          background: props.data ? props.data.blockColor : "rgb(203 233 237)"
+        }}
+        onDrag={() => {
+          setDraggingEnabled(true);
+          props.handleTabDrag && props.handleTabDrag(props.pos.key);
+        }}
+        size={{
+          width:
+            props.pos.type === radioButtonWidget ||
+            props.pos.type === "checkbox"
+              ? "auto"
+              : props.posWidth(props.pos, props.isSignYourself),
+          height:
+            props.pos.type === radioButtonWidget ||
+            props.pos.type === "checkbox"
+              ? "auto"
+              : props.posHeight(props.pos, props.isSignYourself)
+        }}
+        onResizeStart={() => {
+          setDraggingEnabled(true);
+          props.setIsResize && props.setIsResize(true);
+        }}
+        onResizeStop={(e, direction, ref) => {
+          props.setIsResize && props.setIsResize(false);
+          props.handleSignYourselfImageResize &&
+            props.handleSignYourselfImageResize(
+              ref,
+              props.pos.key,
+              props.xyPostion,
+              props.setXyPostion,
+              props.index,
+              containerScale,
+              props.scale,
+              props.data && props.data.Id,
+              props.isResize
+            );
+        }}
+        disableDragging={
+          props.isNeedSign
+            ? true
+            : props.isPlaceholder && ![textWidget].includes(props.pos.type)
+              ? false
+              : !isDraggingEnabled
+        }
+        onDragStop={(event, dragElement) =>
+          props.handleStop &&
+          props.handleStop(event, dragElement, props.data?.Id, props.pos?.key)
+        }
+        position={{
+          x: xPos(props.pos, props.isSignYourself),
+          y: yPos(props.pos, props.isSignYourself)
+        }}
+        onResize={(e, direction, ref) => {
+          setPlaceholderBorder({
+            w: ref.offsetWidth / (props.scale * containerScale),
+            h: ref.offsetHeight / (props.scale * containerScale)
+          });
+        }}
+        onClick={() => handleOnClickPlaceholder()}
+      >
+        {props.isShowBorder &&
         props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
-        props.pos.key === props.selectWidgetId && <BorderResize />
-      )}
+        props.pos.key === props.selectWidgetId ? (
+          <BorderResize right={-12} top={-11} />
+        ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
+          props.data?.signerObjId === props.signerObjId &&
+          props.pos.type !== radioButtonWidget &&
+          props.pos.type !== "checkbox" ? (
+            <BorderResize />
+          ) : (
+            <></>
+          )
+        ) : (
+          props.pos.type !== radioButtonWidget &&
+          props.pos.type !== "checkbox" &&
+          props.pos.key === props.selectWidgetId && <BorderResize />
+        )}
 
-      {props.isShowBorder && props.pos.key === props.selectWidgetId && (
-        <PlaceholderBorder
-          setDraggingEnabled={setDraggingEnabled}
-          pos={props.pos}
-          isPlaceholder={props.isPlaceholder}
-          getCheckboxRenderWidth={getCheckboxRenderWidth}
-          scale={props.scale}
-          containerScale={containerScale}
-          placeholderBorder={placeholderBorder}
-        />
-      )}
-      {isTabAndMobile ? (
-        <div
-          className="flex items-stretch"
-          style={{
-            left: xPos(props.pos, props.isSignYourself),
-            top: yPos(props.pos, props.isSignYourself),
-            width:
-              props.pos.type === radioButtonWidget ||
-              props.pos.type === "checkbox"
-                ? "auto"
-                : props.posWidth(props.pos, props.isSignYourself),
-            height:
-              props.pos.type === radioButtonWidget ||
-              props.pos.type === "checkbox"
-                ? "auto"
-                : props.posHeight(props.pos, props.isSignYourself),
-            zIndex: "10"
-          }}
-          onTouchEnd={() => handleOnClickPlaceholder()}
-          onClick={() => handleOnClickPlaceholder()}
-        >
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
-
-          <PlaceholderType
-            pos={props.pos}
-            xyPostion={props.xyPostion}
-            index={props.index}
-            setXyPostion={props.setXyPostion}
-            data={props.data}
-            setSignKey={props.setSignKey}
-            isShowDropdown={props?.isShowDropdown}
-            isPlaceholder={props.isPlaceholder}
-            isSignYourself={props.isSignYourself}
-            signerObjId={props.signerObjId}
-            handleUserName={props.handleUserName}
+        {props.isShowBorder && props.pos.key === props.selectWidgetId && (
+          <PlaceholderBorder
             setDraggingEnabled={setDraggingEnabled}
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
-            isNeedSign={props.isNeedSign}
-            setSelectDate={setSelectDate}
-            selectDate={selectDate}
-            setValidateAlert={props.setValidateAlert}
-            setStartDate={setStartDate}
-            startDate={startDate}
-            handleSaveDate={handleSaveDate}
-            xPos={props.xPos}
+            pos={props.pos}
+            isPlaceholder={props.isPlaceholder}
+            getCheckboxRenderWidth={getCheckboxRenderWidth}
+            scale={props.scale}
+            containerScale={containerScale}
+            placeholderBorder={placeholderBorder}
           />
+        )}
+        {isTabAndMobile ? (
+          <div
+            className="flex items-stretch"
+            style={{
+              left: xPos(props.pos, props.isSignYourself),
+              top: yPos(props.pos, props.isSignYourself),
+              width:
+                props.pos.type === radioButtonWidget ||
+                props.pos.type === "checkbox"
+                  ? "auto"
+                  : props.posWidth(props.pos, props.isSignYourself),
+              height:
+                props.pos.type === radioButtonWidget ||
+                props.pos.type === "checkbox"
+                  ? "auto"
+                  : props.posHeight(props.pos, props.isSignYourself),
+              zIndex: "10"
+            }}
+            onTouchEnd={() => handleOnClickPlaceholder()}
+            onClick={() => handleOnClickPlaceholder()}
+          >
+            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+
+            <PlaceholderType
+              pos={props.pos}
+              xyPostion={props.xyPostion}
+              index={props.index}
+              setXyPostion={props.setXyPostion}
+              data={props.data}
+              setSignKey={props.setSignKey}
+              isShowDropdown={props?.isShowDropdown}
+              isPlaceholder={props.isPlaceholder}
+              isSignYourself={props.isSignYourself}
+              signerObjId={props.signerObjId}
+              handleUserName={props.handleUserName}
+              setDraggingEnabled={setDraggingEnabled}
+              pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
+              isNeedSign={props.isNeedSign}
+              setSelectDate={setSelectDate}
+              selectDate={selectDate}
+              setValidateAlert={props.setValidateAlert}
+              setStartDate={setStartDate}
+              startDate={startDate}
+              handleSaveDate={handleSaveDate}
+              xPos={props.xPos}
+            />
+          </div>
+        ) : (
+          <>
+            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+            <PlaceholderType
+              pos={props.pos}
+              xyPostion={props.xyPostion}
+              index={props.index}
+              setXyPostion={props.setXyPostion}
+              data={props.data}
+              setSignKey={props.setSignKey}
+              isShowDropdown={props?.isShowDropdown}
+              isPlaceholder={props.isPlaceholder}
+              isSignYourself={props.isSignYourself}
+              signerObjId={props.signerObjId}
+              handleUserName={props.handleUserName}
+              setDraggingEnabled={setDraggingEnabled}
+              pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
+              isNeedSign={props.isNeedSign}
+              setSelectDate={setSelectDate}
+              selectDate={selectDate}
+              setValidateAlert={props.setValidateAlert}
+              setStartDate={setStartDate}
+              startDate={startDate}
+              handleSaveDate={handleSaveDate}
+              xPos={props.xPos}
+            />
+          </>
+        )}
+      </Rnd>
+      <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
+        <div className="h-[100%] p-[20px]">
+          <div className="flex flex-row items-center">
+            <span>{t("format")} : </span>
+            <div className="flex">
+              <select
+                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                defaultValue={""}
+                onChange={(e) => {
+                  const selectedIndex = e.target.value;
+                  e.stopPropagation();
+                  setSelectDate(dateFormat[selectedIndex]);
+                }}
+              >
+                <option value="" disabled>
+                  {t("select-date-format")}
+                </option>
+                {dateFormat.map((data, ind) => {
+                  return (
+                    <option className="text-[13px]" value={ind} key={ind}>
+                      {data?.date ? data?.date : "nodata"}
+                    </option>
+                  );
+                })}
+              </select>
+            </div>
+            <span className="text-xs text-gray-400 ml-1">
+              {selectDate.format}
+            </span>
+          </div>
+          <div className="flex items-center mt-2">
+            <span>{t("font-size")} :</span>
+            <select
+              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              value={
+                props.fontSize ||
+                props.currWidgetsDetails?.options?.fontSize ||
+                "12"
+              }
+              onChange={(e) => props.setFontSize(e.target.value)}
+            >
+              {fontsizeArr.map((size, ind) => {
+                return (
+                  <option className="text-[13px]" value={size} key={ind}>
+                    {size}
+                  </option>
+                );
+              })}
+            </select>
+            <div className="flex flex-row gap-1 items-center ml-4">
+              <span>{t("color")}: </span>
+              <select
+                value={
+                  props.fontColor || props.pos.options?.fontColor || "black"
+                }
+                onChange={(e) => props.setFontColor(e.target.value)}
+                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              >
+                {fontColorArr.map((color, ind) => {
+                  return (
+                    <option value={color} key={ind}>
+                      {t(`color-type.${color}`)}
+                    </option>
+                  );
+                })}
+              </select>
+              <span
+                style={{
+                  background: props.fontColor || props.pos.options?.fontColor
+                }}
+                className="w-5 h-[19px] ml-1"
+              ></span>
+            </div>
+          </div>
+
+          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+          <button
+            type="button"
+            className="op-btn op-btn-primary"
+            onClick={() => {
+              setIsDateModal(false);
+              handleSaveDate(selectDate);
+              props.setFontColor("");
+              props.setFontSize("");
+            }}
+          >
+            {t("save")}
+          </button>
         </div>
-      ) : (
-        <>
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
-          <PlaceholderType
-            pos={props.pos}
-            xyPostion={props.xyPostion}
-            index={props.index}
-            setXyPostion={props.setXyPostion}
-            data={props.data}
-            setSignKey={props.setSignKey}
-            isShowDropdown={props?.isShowDropdown}
-            isPlaceholder={props.isPlaceholder}
-            isSignYourself={props.isSignYourself}
-            signerObjId={props.signerObjId}
-            handleUserName={props.handleUserName}
-            setDraggingEnabled={setDraggingEnabled}
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
-            isNeedSign={props.isNeedSign}
-            setSelectDate={setSelectDate}
-            selectDate={selectDate}
-            setValidateAlert={props.setValidateAlert}
-            setStartDate={setStartDate}
-            startDate={startDate}
-            handleSaveDate={handleSaveDate}
-            xPos={props.xPos}
-          />
-        </>
-      )}
-    </Rnd>
+      </ModalUi>
+    </>
   );
 }
 

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -29,6 +29,8 @@ function PlaceholderType(props) {
   const [textValue, setTextValue] = useState();
   const [selectedCheckbox, setSelectedCheckbox] = useState([]);
   const years = range(1990, getYear(new Date()) + 16, 1);
+  const fontSize = (props.pos.options?.fontSize || "12") + "px";
+  const fontColor = props.pos.options?.fontColor || "black";
   const months = [
     "January",
     "February",
@@ -143,7 +145,12 @@ function PlaceholderType(props) {
 
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
-      className={`${selectWidgetCls} text-[12px] overflow-hidden`}
+      style={{
+        fontSize: fontSize,
+        color: fontColor,
+        fontFamily: "Arial, sans-serif"
+      }}
+      className={`${selectWidgetCls} overflow-hidden`}
       onClick={onClick}
       ref={ref}
     >
@@ -344,12 +351,8 @@ function PlaceholderType(props) {
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   style={{
-                    width: props.pos.options?.fontSize
-                      ? props.pos.options?.fontSize + "px"
-                      : "12px",
-                    height: props.pos.options?.fontSize
-                      ? props.pos.options?.fontSize + "px"
-                      : "12px"
+                    width: fontSize,
+                    height: fontSize
                   }}
                   className={`${
                     ind === 0 ? "mt-0" : "mt-[5px]"
@@ -389,10 +392,8 @@ function PlaceholderType(props) {
                 {!props.pos.options?.isHideLabel && (
                   <label
                     style={{
-                      fontSize: props.pos.options?.fontSize
-                        ? props.pos.options?.fontSize + "px"
-                        : "12px",
-                      color: props.pos.options?.fontColor || "black"
+                      fontSize: fontSize,
+                      color: fontColor
                     }}
                     className="text-xs mb-0 text-center"
                   >
@@ -428,20 +429,16 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           cols="50"
         />
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             overflow: "hidden"
           }}
         >
@@ -452,10 +449,8 @@ function PlaceholderType(props) {
       return props.data?.signerObjId === props.signerObjId ? (
         <select
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           className={`${selectWidgetCls} text-[12px] bg-inherit`}
           id="myDropdown"
@@ -476,10 +471,8 @@ function PlaceholderType(props) {
           {/* Default/Title option */}
           <option
             style={{
-              fontSize: props.pos.options?.fontSize
-                ? props.pos.options?.fontSize + "px"
-                : "12px",
-              color: props.pos.options?.fontColor || "black"
+              fontSize: fontSize,
+              color: fontColor
             }}
             value=""
             disabled
@@ -492,10 +485,8 @@ function PlaceholderType(props) {
             return (
               <option
                 style={{
-                  fontSize: props.pos.options?.fontSize
-                    ? props.pos.options?.fontSize + "px"
-                    : "12px",
-                  color: props.pos.options?.fontColor || "black"
+                  fontSize: fontSize,
+                  color: fontColor
                 }}
                 key={ind}
                 value={data}
@@ -508,10 +499,8 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           className=" overflow-hidden"
         >
@@ -562,20 +551,16 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           cols="50"
         />
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             fontFamily: "Arial, sans-serif",
             overflow: "hidden"
           }}
@@ -606,20 +591,16 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           cols="50"
         />
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             overflow: "hidden",
             fontFamily: "Arial, sans-serif"
           }}
@@ -650,20 +631,16 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           cols="50"
         />
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             fontFamily: "Arial, sans-serif",
             overflow: "hidden"
           }}
@@ -731,7 +708,14 @@ function PlaceholderType(props) {
           />
         </div>
       ) : (
-        <div className="text-[12px] text-black items-center overflow-hidden">
+        <div
+          style={{
+            fontSize: fontSize,
+            color: fontColor,
+            fontFamily: "Arial, sans-serif"
+          }}
+          className="items-center overflow-hidden"
+        >
           <span>
             {props.selectDate
               ? props.selectDate?.format
@@ -783,10 +767,8 @@ function PlaceholderType(props) {
           }}
           className={textWidgetCls}
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             fontFamily: "Arial, sans-serif"
           }}
           cols="50"
@@ -794,10 +776,8 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
             fontFamily: "Arial, sans-serif",
             overflow: "hidden"
           }}
@@ -813,12 +793,8 @@ function PlaceholderType(props) {
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   style={{
-                    width: props.pos.options?.fontSize
-                      ? props.pos.options?.fontSize + "px"
-                      : "12px",
-                    height: props.pos.options?.fontSize
-                      ? props.pos.options?.fontSize + "px"
-                      : "12px",
+                    width: fontSize,
+                    height: fontSize,
                     marginTop: ind > 0 ? "10px" : "0px"
                   }}
                   className={`flex justify-center op-radio`}
@@ -838,10 +814,8 @@ function PlaceholderType(props) {
                 {!props.pos.options?.isHideLabel && (
                   <label
                     style={{
-                      fontSize: props.pos.options?.fontSize
-                        ? props.pos.options?.fontSize + "px"
-                        : "12px",
-                      color: props.pos.options?.fontColor || "black"
+                      fontSize: fontSize,
+                      color: fontColor
                     }}
                     className="text-xs mb-0"
                   >
@@ -876,10 +850,8 @@ function PlaceholderType(props) {
           className={textWidgetCls}
           style={{
             fontFamily: "Arial, sans-serif",
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
           }}
           cols="50"
         />

apps/OpenSign/src/components/pdf/RenderAllPdfPage.js

@@ -95,16 +95,16 @@ function RenderAllPdfPage({
             >
               {signerPos && addSignatureBookmark(index)}
 
-              <div className="relative z-[1] overflow-hidden">
-                <Page
-                  key={`page_${index + 1}`}
-                  pageNumber={index + 1}
-                  width={pageWidth - 60}
-                  scale={1}
-                  renderAnnotationLayer={false}
-                  renderTextLayer={false}
-                />
-              </div>
+              {/* <div className="relative z-[1] overflow-hidden"> */}
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={pageWidth - 60}
+                scale={1}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+              />
+              {/* </div> */}
             </div>
           ))}
         </Document>

apps/OpenSign/src/components/pdf/RenderPdf.js

@@ -61,7 +61,11 @@ function RenderPdf({
   scale,
   setIsSelectId,
   ispublicTemplate,
-  handleUserDetails
+  handleUserDetails,
+  fontSize,
+  setFontSize,
+  fontColor,
+  setFontColor
 }) {
   const { t } = useTranslation();
   const isMobile = window.innerWidth < 767;
@@ -330,6 +334,10 @@ function RenderPdf({
                                         pdfOriginalWH={pdfOriginalWH}
                                         pageNumber={pageNumber}
                                         setIsSelectId={setIsSelectId}
+                                        fontSize={fontSize}
+                                        setFontSize={setFontSize}
+                                        fontColor={fontColor}
+                                        setFontColor={setFontColor}
                                       />
                                     </React.Fragment>
                                   );
@@ -383,6 +391,10 @@ function RenderPdf({
                                   scale={scale}
                                   pdfOriginalWH={pdfOriginalWH}
                                   pageNumber={pageNumber}
+                                  fontSize={fontSize}
+                                  setFontSize={setFontSize}
+                                  fontColor={fontColor}
+                                  setFontColor={setFontColor}
                                 />
                               )
                             );
@@ -507,6 +519,10 @@ function RenderPdf({
                                           pdfOriginalWH={pdfOriginalWH}
                                           pageNumber={pageNumber}
                                           setIsSelectId={setIsSelectId}
+                                          fontSize={fontSize}
+                                          setFontSize={setFontSize}
+                                          fontColor={fontColor}
+                                          setFontColor={setFontColor}
                                         />
                                       </React.Fragment>
                                     );
@@ -565,6 +581,10 @@ function RenderPdf({
                                     containerWH={containerWH}
                                     pdfOriginalWH={pdfOriginalWH}
                                     pageNumber={pageNumber}
+                                    fontSize={fontSize}
+                                    setFontSize={setFontSize}
+                                    fontColor={fontColor}
+                                    setFontColor={setFontColor}
                                   />
                                 </React.Fragment>
                               );

apps/OpenSign/src/constant/Utils.js

@@ -790,7 +790,9 @@ export const onChangeInput = (
   initial,
   dateFormat,
   isDefaultEmpty,
-  isRadio
+  isRadio,
+  fontSize,
+  fontColor
 ) => {
   const isSigners = xyPostion.some((data) => data.signerPtr);
   let filterSignerPos;
@@ -817,6 +819,8 @@ export const onChangeInput = (
                 options: {
                   ...position.options,
                   response: value,
+                  fontSize: fontSize,
+                  fontColor: fontColor,
                   validation: {
                     type: "date-format",
                     format: dateFormat // This indicates the required date format explicitly.
@@ -872,6 +876,8 @@ export const onChangeInput = (
             options: {
               ...positionData.options,
               response: value,
+              fontSize: fontSize,
+              fontColor: fontColor,
               validation: {
                 type: "date-format",
                 format: dateFormat // This indicates the required date format explicitly.
@@ -1407,7 +1413,7 @@ export const multiSignEmbed = async (
         "email"
       ].includes(position.type);
       if (position.type === "checkbox") {
-        let checkboxGapFromTop, isCheck, checkboxOptionGapTop;
+        let checkboxGapFromTop, isCheck;
         let y = yPos(position);
         const optionsFontSize = fontSize || 13;
         const checkboxSize = fontSize;
@@ -1429,10 +1435,8 @@ export const multiSignEmbed = async (
 
             if (ind > 0) {
               y = y + checkboxGapFromTop;
-              checkboxOptionGapTop = checkboxOptionGapTop + fontSize;
             } else {
               checkboxGapFromTop = fontSize + 5 || 26;
-              checkboxOptionGapTop = y - 7;
             }
 
             if (!position?.options?.isHideLabel) {
@@ -1440,7 +1444,7 @@ export const multiSignEmbed = async (
               const optionsPosition = compensateRotation(
                 page.getRotation().angle,
                 xPos(position) + checkboxTextGapFromLeft,
-                checkboxOptionGapTop,
+                y,
                 1,
                 page.getSize(),
                 optionsFontSize,
@@ -1563,7 +1567,10 @@ export const multiSignEmbed = async (
         } else if (position?.options?.defaultValue) {
           dropdown.select(position?.options?.defaultValue);
         }
-        dropdown.setFontSize(12);
+        const defaultAppearance = `/Helv ${fontsize} Tf 0 g`;
+        // Set the default appearance for the dropdown field
+        dropdown.acroField.setDefaultAppearance(defaultAppearance);
+        dropdown.setFontSize(fontsize);
         const dropdownObj = {
           x: xPos(position),
           y: yPos(position),
@@ -1579,16 +1586,16 @@ export const multiSignEmbed = async (
         const radioRandomId = "radio" + randomId();
         const radioGroup = form.createRadioGroup(radioRandomId);
         let radioOptionGapFromTop;
-        const optionsFontSize = fontSize || 16;
-        const radioTextGapFromLeft = 20;
-        const radioSize = 18;
+        const optionsFontSize = fontSize || 13;
+        const radioTextGapFromLeft = fontSize + 5 || 20;
+        const radioSize = fontSize;
         let y = yPos(position);
         if (position?.options?.values.length > 0) {
           position?.options?.values.forEach((item, ind) => {
             if (ind > 0) {
               y = y + radioOptionGapFromTop;
             } else {
-              radioOptionGapFromTop = 25;
+              radioOptionGapFromTop = fontSize + 10 || 25;
             }
             if (!position?.options?.isHideLabel) {
               // below line of code is used to embed label with radio button in pdf

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -642,7 +642,6 @@ function PdfRequestFiles(props) {
       });
     }
   };
-
   //function for embed signature or image url in pdf
   async function embedWidgetsData() {
     //for emailVerified data checking first in localstorage

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -1600,7 +1600,6 @@ function PlaceHolderSign() {
   const handleRecipientSign = () => {
     navigate(`/recipientSignPdf/${documentId}/${currentId}`);
   };
-
   const handleLinkUser = (id) => {
     setIsAddUser({ [id]: true });
   };
@@ -2057,6 +2056,10 @@ function PlaceHolderSign() {
                         setScale={setScale}
                         scale={scale}
                         setIsSelectId={setIsSelectId}
+                        fontSize={fontSize}
+                        setFontSize={setFontSize}
+                        fontColor={fontColor}
+                        setFontColor={setFontColor}
                       />
                     )}
                   </div>

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -1378,6 +1378,10 @@ function SignYourSelf() {
                       handleTextSettingModal={handleTextSettingModal}
                       setScale={setScale}
                       scale={scale}
+                      fontSize={fontSize}
+                      setFontSize={setFontSize}
+                      fontColor={fontColor}
+                      setFontColor={setFontColor}
                     />
                   )}
                 </div>

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -1528,6 +1528,10 @@ const TemplatePlaceholder = () => {
                         setScale={setScale}
                         scale={scale}
                         setIsSelectId={setIsSelectId}
+                        fontSize={fontSize}
+                        setFontSize={setFontSize}
+                        fontColor={fontColor}
+                        setFontColor={setFontColor}
                       />
                     )}
                   </div>

apps/OpenSign/src/script/locales/en/translation.json

@@ -91,6 +91,7 @@
       "API Token": "API Token",
       "Webhook": "Webhook",
       "Teams": "Teams",
+      "Team-update-successfully": "Team Updated successfully.",
       "Users": "Users"
     }
   },
@@ -592,5 +593,16 @@
   "expired-on-mssg": "This document expired on {{expiredDate}} and is no longer available to sign.",
   "signature-validate-alert": "Please confirm that you have selected at least {{minRequiredCount}} checkboxes.",
   "signature-validate-alert-2": "Ensure this field is accurately filled and meets all requirements.",
-  "user-name-exist": "user name already exist"
+  "remaing-users": "Remaining users",
+  "Role": "Role",
+  "additional-users": "Please purchase add-on users.",
+  "Quantity-of-users": "Quantity of users",
+  "Price": "Price",
+  "Total-price-for-next-time": "Total price for next time",
+  "Proceed": "Proceed",
+  "Select": "Select",
+  "Add-seats": "Add Seats",
+  "user-name-exist": "user name already exist",
+  "format": "format",
+  "select-date-format": "Select a date format"
 }

apps/OpenSign/src/script/locales/fr/translation.json

@@ -42,7 +42,7 @@
   "subscribe-card-plan": "Signez 100 documents à l'aide de l'API. Seulement 0,15 $/doc par la suite.",
   "user-name-limit-char": "Pour avoir un nom d'utilisateur de moins de 8 caractères s'il vous plaît s'abonner",
   "tour-content": "Ne plus afficher",
-  "team": "ÉQUIPE",
+  "team": "Équipe",
   "docs": "Documents",
   "session-expired": "Votre session a expiré.",
   "user": "Utilisateur",
@@ -91,6 +91,7 @@
       "API Token": "Jeton API",
       "Webhook": "Webhook",
       "Teams": "Équipe",
+      "Team-update-successfully": "Équipe mise à jour avec succès.",
       "Users": "Utilisateurs"
     }
   },
@@ -591,5 +592,16 @@
   "expired-on-mssg": "Ce document a expiré le {{expiredDate}} et n'est plus disponible pour signature.",
   "signature-validate-alert": "Veuillez confirmer que vous avez coché au moins {{minRequiredCount}} cases.",
   "signature-validate-alert-2": "Assurez-vous que ce champ est rempli avec précision et répond à toutes les exigences.",
-  "user-name-exist": "le nom d'utilisateur existe déjà"
+  "user-name-exist": "le nom d'utilisateur existe déjà",
+  "remaing-users": "Utilisateurs restants",
+  "Role": "Rôle",
+  "additional-users": "Veuillez acheter des utilisateurs supplémentaires.",
+  "Quantity-of-users": "Quantité d'utilisateurs",
+  "Price": "Prix",
+  "Total-price-for-next-time": "Prix ​​total pour la prochaine fois",
+  "Proceed": "Procéder",
+  "Select": "sélectionner",
+  "Add-seats": "Ajouter des sièges",
+  "format": "format",
+  "select-date-format": "Sélectionnez un format de date"
 }