fix: change add recipient and role ui design in mobile view and inconsistent font size and color combination in text widgets

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

@@ -19,7 +19,9 @@ function TextFontSetting(props) {
           <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
+              props.fontSize ||
+              props.currWidgetsDetails?.options?.fontSize ||
+              "12"
             }
             onChange={(e) => props.setFontSize(e.target.value)}
           >
@@ -35,7 +37,9 @@ function TextFontSetting(props) {
             <span>color: </span>
             <select
               value={
-                props.fontColor || props.currWidgetsDetails?.options?.fontColor
+                props.fontColor ||
+                props.currWidgetsDetails?.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"

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

@@ -37,11 +37,10 @@ function WidgetComponent({
   sendInOrder,
   isTemplateFlow,
   setBlockColor,
-  blockColor,
-  setIsAddSigner
+  setIsAddSigner,
+  blockColor
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
-
   const [, dropdown] = useDrag({
     type: "BOX",
     item: {
@@ -187,7 +186,6 @@ function WidgetComponent({
   const isMobile = window.innerWidth < 767;
   const scrollContainerRef = useRef(null);
   const [widget, setWidget] = useState([]);
-
   const color = [
     "#93a3db",
     "#e6c3db",
@@ -245,86 +243,70 @@ function WidgetComponent({
       ? textWidgetData
       : widget;
 
+  const handleSelectRecipient = () => {
+    if (
+      signersdata[isSelectListId]?.Email ||
+      signersdata[isSelectListId]?.Role
+    ) {
+      const userData =
+        signersdata[isSelectListId]?.Name || signersdata[isSelectListId]?.Role;
+      const name =
+        userData?.length > 20 ? `${userData.slice(0, 20)}...` : userData;
+      return name;
+    }
+  };
+
   return (
     <>
       {isMobile ? (
         !isMailSend && (
-          <div
-            id="navbar"
-            className="fixed z-[99] bottom-0 right-0"
-            style={{ width: window.innerWidth + "px" }}
-          >
-            <div className="mx-1">
-              {isSigners && (
-                <div
-                  data-tut="recipientArea"
-                  className="py-[10px] flex justify-center items-center op-card"
-                  style={{
-                    background: blockColor
-                      ? blockColor
-                      : isSelectListId
-                        ? color[isSelectListId % color.length]
-                        : color[0]
-                  }}
-                  onClick={() => handleModal()}
-                >
-                  <span className="text-[13px] font-bold flex items-center">
-                    {title ? title : "Recipient"}
-                    {signersdata[isSelectListId]?.Role && (
-                      <div>
-                        {signersdata[isSelectListId]?.Name ? (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Name?.length > 12
-                              ? `${signersdata[isSelectListId].Name.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Name}
-                          </>
-                        ) : (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Role?.length > 12
-                              ? `${signersdata[isSelectListId].Role.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Role}
-                          </>
-                        )}
-                      </div>
-                    )}
-                    <div className="ml-[6px] text-[16px]">
-                      <i className="fa-light fa-angle-down"></i>
-                    </div>
-                  </span>
-                </div>
-              )}
-            </div>
-            <div className="mx-1">
-              {handleAddSigner ? (
-                <div
-                  data-tut="reactourAddbtn"
-                  className="op-btn op-btn-accent w-full my-[2px]"
-                  onClick={() => handleAddSigner()}
-                >
-                  <i className="fa-light fa-plus"></i>
-                  <span>Add role</span>
-                </div>
-              ) : (
-                setIsAddSigner && (
-                  <div
-                    data-tut="addRecipient"
-                    className="op-btn op-btn-accent w-full my-[2px]"
-                    onClick={() => setIsAddSigner(true)}
+          <div id="navbar" className="fixed z-[99] bottom-0 right-0 w-full">
+            {isSigners && (
+              <div className="w-full m-[2px] flex justify-center items-center gap-2">
+                <div className="w-full" onClick={() => handleModal()}>
+                  <select
+                    className="w-full op-select op-select-bordered  pointer-events-none"
+                    value={handleSelectRecipient()}
+                    style={{
+                      backgroundColor: blockColor
+                        ? blockColor
+                        : isSelectListId
+                          ? color[isSelectListId % color.length]
+                          : color[0]
+                    }}
                   >
-                    <i className="fa-light fa-plus"></i>
-                    <span>Add recipients</span>
-                  </div>
-                )
-              )}
-            </div>
+                    <option value={handleSelectRecipient()}>
+                      {handleSelectRecipient()}
+                    </option>
+                  </select>
+                </div>
+
+                <div className="w-[30%]">
+                  {handleAddSigner ? (
+                    <button
+                      data-tut="reactourAddbtn"
+                      onClick={() => handleAddSigner()}
+                      className="op-btn op-btn-accent"
+                    >
+                      <i className="fa-light fa-plus text-xs"></i>
+                      Add
+                    </button>
+                  ) : (
+                    setIsAddSigner && (
+                      <button
+                        data-tut="addRecipient"
+                        onClick={() => setIsAddSigner(true)}
+                        className="op-btn op-btn-accent"
+                      >
+                        <i className="fa-light fa-plus text-xs"></i>
+                        <span> Add</span>
+                      </button>
+                    )
+                  )}
+                </div>
+              </div>
+            )}
+
             <div
               data-tut="addWidgets"
               ref={scrollContainerRef}

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -74,8 +74,8 @@ function PlaceHolderSign() {
   const [isSend, setIsSend] = useState(false);
   const [copied, setCopied] = useState(false);
   const [isAddSigner, setIsAddSigner] = useState(false);
-  const [fontSize, setFontSize] = useState();
-  const [fontColor, setFontColor] = useState();
+  const [fontSize, setFontSize] = useState("12");
+  const [fontColor, setFontColor] = useState("black");
   const [isLoading, setIsLoading] = useState({
     isLoad: true,
     message: "This might take some time"
@@ -634,18 +634,6 @@ function PlaceHolderSign() {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (
-          [
-            textInputWidget,
-            textWidget,
-            "name",
-            "company",
-            "job title",
-            "email"
-          ].includes(dragTypeValue)
-        ) {
-          setFontSize(12);
-          setFontColor("black");
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         }
@@ -751,7 +739,6 @@ function PlaceHolderSign() {
       setIsDragging(false);
     }, 200);
   };
-
   //function for delete signature block
   const handleDeleteSign = (key, Id) => {
     const updateData = [];
@@ -1708,8 +1695,10 @@ function PlaceHolderSign() {
               ...position,
               options: {
                 ...position.options,
-                fontSize: fontSize || currWidgetsDetails?.options?.fontSize,
-                fontColor: fontColor || currWidgetsDetails?.options?.fontColor
+                fontSize:
+                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                fontColor:
+                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
               }
             };
           }

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -149,8 +149,8 @@ const TemplatePlaceholder = () => {
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [widgetName, setWidgetName] = useState(false);
   const [isAddRole, setIsAddRole] = useState(false);
-  const [fontSize, setFontSize] = useState();
-  const [fontColor, setFontColor] = useState();
+  const [fontSize, setFontSize] = useState("12");
+  const [fontColor, setFontColor] = useState("black");
   const [zoomPercent, setZoomPercent] = useState(0);
   const [scale, setScale] = useState(1);
   const senderUser =
@@ -389,7 +389,6 @@ const TemplatePlaceholder = () => {
               (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
             key: key,
             scale: containerScale,
-            // isMobile: isMobile,
             zIndex: posZIndex,
             type: dragTypeValue,
             options: addWidgetOptions(dragTypeValue),
@@ -501,13 +500,6 @@ const TemplatePlaceholder = () => {
           setShowDropdown(true);
         } else if (dragTypeValue === "checkbox") {
           setIsCheckbox(true);
-        } else if (
-          [textInputWidget, "name", "company", "job title", "email"].includes(
-            dragTypeValue
-          )
-        ) {
-          setFontSize(12);
-          setFontColor("black");
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
         }
@@ -1266,8 +1258,10 @@ const TemplatePlaceholder = () => {
               ...position,
               options: {
                 ...position.options,
-                fontSize: fontSize || currWidgetsDetails?.options?.fontSize,
-                fontColor: fontColor || currWidgetsDetails?.options?.fontColor
+                fontSize:
+                  fontSize || currWidgetsDetails?.options?.fontSize || "12",
+                fontColor:
+                  fontColor || currWidgetsDetails?.options?.fontColor || "black"
               }
             };
           }