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>
This commit is contained in:
Lucas Oliveira 2025-07-23 15:25:59 -03:00 • committed by GitHub
commit e6ca374d07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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