From 1c4c2e87b4a4b56c6ec4777f56377726d7a6d8d7 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Fri, 15 Mar 2024 19:30:33 +0530
Subject: [PATCH] refactor: change design of widgets in mobile

---
 .../src/components/pdf/WidgetComponent.js     | 12 +++----
 .../OpenSign/src/components/pdf/WidgetList.js |  2 +-
 apps/OpenSign/src/constant/Utils.js           | 32 ++++++-------------
 apps/OpenSign/src/styles/signature.css        |  4 ++-
 4 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 101095648..f59ca7117 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/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
diff --git a/apps/OpenSign/src/components/pdf/WidgetList.js b/apps/OpenSign/src/components/pdf/WidgetList.js
index aa0c9aba5..1fb284977 100644
--- a/apps/OpenSign/src/components/pdf/WidgetList.js
+++ b/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={() => {
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index ba6556930..11fa10f74 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/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) {
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index 8229cdb05..246c82ffd 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/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;