fix: dragging icon is not visible and css change

Author: prafull-opensignlabs

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>
   );
 }

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",

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"
         >

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>

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;