From 1f2298f19225980384a7d0864201a0daf206a0e3 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Mon, 24 Jun 2024 11:02:32 +0530
Subject: [PATCH] fix: dragging icon is not visible and css change

---
 apps/OpenSign/src/components/pdf/BorderResize.js      | 10 +++-------
 apps/OpenSign/src/components/pdf/PlaceholderBorder.js |  2 +-
 apps/OpenSign/src/components/pdf/RenderPdf.js         |  7 +++----
 apps/OpenSign/src/constant/Utils.js                   |  2 +-
 apps/OpenSign/src/styles/signature.css                | 11 -----------
 5 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/BorderResize.js b/apps/OpenSign/src/components/pdf/BorderResize.js
index 505c68d30..55f122ac9 100644
--- a/apps/OpenSign/src/components/pdf/BorderResize.js
+++ b/apps/OpenSign/src/components/pdf/BorderResize.js
@@ -3,13 +3,9 @@ import React from "react";
 function BorderResize({ right, top }) {
   return (
     <div
-      className="borderResize"
-      style={{
-        right: right ? right + "px" : "-1px",
-        bottom: top ? top + "px" : "-1px",
-        borderRight: "3px solid  #188ae2",
-        borderBottom: "3px solid #188ae2"
-      }}
+      className={`${right ? `-right-[12px]` : "-right-[1px]"} ${
+        top ? `-bottom-[11px]` : "-bottom-[1px]"
+      } absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
     ></div>
   );
 }
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
index 095ae58f8..8941a5fe5 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderBorder.js
@@ -47,7 +47,7 @@ function PlaceholderBorder(props) {
       onTouchEnd={() =>
         props.pos.type === textWidget && props?.setDraggingEnabled(true)
       }
-      className="borderResize"
+      className="absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize"
       style={{
         borderColor: themeColor,
         borderStyle: "dashed",
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 6c89d4969..abc105da7 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -246,10 +246,9 @@ function RenderPdf({
       {isMobile ? (
         <div
           data-tut="reactourForth"
-          style={{
-            border: "0.1px solid #ebe8e8",
-            marginTop: isGuestSigner && "30px"
-          }}
+          className={`${
+            isGuestSigner ? "30px" : ""
+          } border-[0.1px] border-[#ebe8e8]`}
           ref={drop}
           id="container"
         >
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 58e6941ee..7475fdd77 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -379,7 +379,7 @@ export const getWidgetType = (item) => {
     <div className="op-btn w-fit md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
       <div className="w-full h-full flex md:justify-between items-center">
         <div className="flex justify-start items-center text-[13px] ml-1">
-          {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
+          {!isMobile && <i className="fa-light fa-grip-vertical ml-[3px]"></i>}
           <span className="md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0">
             {item.type}
           </span>
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index 7f56b9245..2c6e8facf 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -50,17 +50,6 @@
   width: 460px;
 }
 
-.borderResize {
-  position: absolute;
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-}
-
-.borderResize :hover {
-  cursor: sw-resize;
-}
-
 .icon {
   position: absolute;
   font-size: 14px;