refactor: change design of widgets in mobile

Author: prafull-opensignlabs

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

@@ -239,8 +239,8 @@ function WidgetComponent({
   const updateWidgets = isSignYourself
     ? filterWidgets
     : isTemplateFlow
-      ? textWidgetData
-      : widget;
+    ? textWidgetData
+    : widget;
 
   return (
     <>
@@ -264,11 +264,7 @@ function WidgetComponent({
                   alignItems: "center",
                   justifyContent: "center"
                 }}
-                onClick={() => {
-                  // if (signersdata?.length) {
-                  handleModal();
-                  // }
-                }}
+                onClick={() => handleModal()}
               >
                 <span
                   style={{
@@ -346,7 +342,7 @@ function WidgetComponent({
                   display: "flex",
                   overflowX: "scroll",
                   whiteSpace: "nowrap",
-                  padding: "10px"
+                  padding: "10px 5px 10px 1px"
                 }}
               >
                 <WidgetList

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

@@ -4,7 +4,7 @@ import { getWidgetType } from "../../constant/Utils";
 function WidgetList(props) {
   return props.updateWidgets.map((item, ind) => {
     return (
-      <div key={ind} style={{ marginBottom: "10px" }}>
+      <div key={ind} style={{ marginBottom: "5px" }}>
         <div
           className="widgets"
           onClick={() => {

apps/OpenSign/src/constant/Utils.js

@@ -288,26 +288,14 @@ export const getWidgetType = (item, marginLeft) => {
           marginLeft: marginLeft && `${marginLeft}px`
         }}
       >
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            marginLeft: "5px"
-          }}
-        >
-          <i
-            className="fa-sharp fa-solid fa-grip-vertical"
-            style={{ color: "#908d8d", fontSize: "13px" }}
-          ></i>
-          <span
-            style={{
-              fontWeight: "400",
-              fontSize: "15px",
-              // padding: "3px 20px 0px 20px",
-              color: "black",
-              marginLeft: "5px"
-            }}
-          >
+        <div className="flex items-center mr-1">
+          {!isMobile && (
+            <i
+              className="fa-sharp fa-solid fa-grip-vertical"
+              style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }}
+            ></i>
+          )}
+          <span className=" font-[400] text-[15px] text-black ml-[5px]">
             {item.type}
           </span>
         </div>
@@ -1090,8 +1078,8 @@ export const multiSignEmbed = async (
           position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
-              ? 10
-              : newUpdateHeight;
+            ? 10
+            : newUpdateHeight;
         const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
 
         if (signyourself) {

apps/OpenSign/src/styles/signature.css

@@ -163,7 +163,6 @@
 
 .signatureBtn {
   border: 1.5px solid #47a3ad;
-
   border-radius: 3px;
   display: flex;
   padding: 0px;
@@ -1192,6 +1191,9 @@ option {
     min-width: 90%;
     overflow-y: auto;
   }
+  .signatureBtn {
+    width: max-content;
+  }
 
   .dropdownModal {
     position: fixed;