[REFACTOR]: Add font-family in scss Tooltip and improve ripple on Dropzone component

Author: JinSSJ3

src/components/dropzone/components/Dropzone/Dropzone.tsx

@@ -11,7 +11,7 @@ import {
 } from "../utils/validation.utils";
 import { DropzoneProps, DropzonePropsDefault } from "./DropzoneProps";
 import {
-  createRipple,
+  //createRipple,
   createRippleFromElement,
 } from "../utils/dropzone-ui.utils";
 import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
@@ -326,7 +326,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
       localValidator
     );
     if (!disableRipple) {
-      createRippleFromElement(dz_ui_ripple_ref.current, color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current, evt,color as string);
 
      // createRipple(evt, color as string);
     }
@@ -417,7 +417,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     let referenceInput = inputRef.current;
     referenceInput?.click();
     if (!disableRipple) {
-      createRippleFromElement(dz_ui_ripple_ref.current, color as string);
+      createRippleFromElement(dz_ui_ripple_ref.current,e, color as string);
       //createRipple(e, color as string);
     }
     onClick?.(e);

src/components/dropzone/components/utils/dropzone-ui.utils.ts

@@ -31,7 +31,9 @@ export function createRipple<
 }
 
 
-export function createRippleFromElement(element: HTMLDivElement | null, color: string) {
+export function createRippleFromElement<
+T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement
+>(element: HTMLDivElement | null, event: React.MouseEvent<T, MouseEvent>,color: string) {
   if (!element) {
     return;
   }
@@ -46,9 +48,9 @@ export function createRippleFromElement(element: HTMLDivElement | null, color: s
   const radius: number = diameter / 2;
 
   circle.style.width = circle.style.height = `${diameter}px`;
-  circle.style.left = `${buttonAnchorDiv.offsetLeft - radius
+  circle.style.left = `${event.clientX - buttonAnchorDiv.offsetLeft - radius
     }px`;
-  circle.style.top = `${buttonAnchorDiv.offsetTop - radius}px`;
+  circle.style.top = `${event.clientY - buttonAnchorDiv.offsetTop - radius}px`;
   circle.classList.add("ripple");
 
   circle.style.backgroundColor = hexColorToRGB(

src/components/file-item/components/FileItem/FileItem.scss

@@ -313,6 +313,7 @@
       }
     }
     .dropzone-ui-tooltiptext {
+      font-family: "Poppins", sans-serif;
       font-size: 0.8rem;
       visibility: hidden;
       width: 133px;

src/components/tooltip/components/Tooltip.tsx

@@ -54,17 +54,12 @@ const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
   };
   useEffect(() => {
     handleChangeStatus(uploadStatus, valid);
+    // eslint-disable-next-line
   }, [uploadStatus, valid]);
   return (
     <Fragment>
       {open && message && statusClassName && (
-        <span
-          className={
-            statusClassName
-              ? `dropzone-ui-tooltiptext ${statusClassName}`
-              : "dropzone-ui-tooltiptext"
-          }
-        >
+        <span className={`dropzone-ui-tooltiptext ${statusClassName}`}>
           {
             /* !valid
               ? errors?.map((error, index) => (