From e6ca374d0713752e050544760820dd424dd48085 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Wed, 23 Jul 2025 15:25:59 -0300
Subject: [PATCH] fix: updated design of info button on files component (#9146)

* Updated design of info button

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
---
 .../components/dragFilesComponent/index.tsx   | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/modals/fileManagerModal/components/dragFilesComponent/index.tsx b/src/frontend/src/modals/fileManagerModal/components/dragFilesComponent/index.tsx
index 5cc21229c..fc330df2c 100644
--- a/src/frontend/src/modals/fileManagerModal/components/dragFilesComponent/index.tsx
+++ b/src/frontend/src/modals/fileManagerModal/components/dragFilesComponent/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import useUploadFile from "@/hooks/files/use-upload-file";
 import useAlertStore from "@/stores/alertStore";
@@ -103,19 +104,21 @@ export default function DragFilesComponent({
         <h3 className="text-sm font-semibold">
           {isDragging ? "Drop files here" : "Click or drag files here"}
         </h3>
-        <p className="flex items-center gap-1 text-xs text-muted-foreground">
-          <span>{types.slice(0, 3).join(", ")}</span>
-          {types.length > 3 && (
-            <ShadTooltip content={types.slice(3).join(", ")}>
-              <span className="text-accent-pink-foreground underline">
-                +{types.length - 3} more
-              </span>
-            </ShadTooltip>
-          )}
+        <p className="flex items-center gap-2 text-xs text-muted-foreground">
+          <div className="flex items-center gap-1">
+            <span>{types.slice(0, 3).join(", ")}</span>
+            {types.length > 3 && (
+              <ShadTooltip content={types.slice(3).join(", ")}>
+                <span className="text-muted-foreground flex items-center gap-1">
+                  +{types.length - 3} more
+                  <ForwardedIconComponent name="info" className="w-3 h-3" />
+                </span>
+              </ShadTooltip>
+            )}
+          </div>
           <span className="font-semibold">
-            {formatFileSize(maxFileSizeUpload)}
+            {formatFileSize(maxFileSizeUpload)} max
           </span>
-          <span>max</span>
         </p>
         <div className="pointer-events-none absolute inset-0 h-full w-full">
           <svg