From 64e450262d70b8a4659f5cba045a367e0ea4e084 Mon Sep 17 00:00:00 2001
From: Andy Chen <44120813+achen5671@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:08:00 -0400
Subject: [PATCH] studio: polish asset grid (#10788)

* update asset grid

* add padding

* set bg color for selected asset

---------

Co-authored-by: Rahul Ghosh <ghoshr698@gmail.com>
---
 .../editor/panels/Assets/container/index.tsx       | 14 ++++++++------
 .../components/editor/panels/Files/icon/index.tsx  |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
index 88a880ba32..532fc54810 100644
--- a/packages/ui/src/components/editor/panels/Assets/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -175,16 +175,18 @@ const ResourceFile = (props: {
         })
       }
       onContextMenu={handleContextMenu}
-      className={`flex cursor-pointer flex-col items-center justify-center align-middle ${
-        selected ? 'border border-gray-100' : ''
-      }`}
+      className="mb-2 flex cursor-pointer flex-col items-center justify-center align-middle"
     >
-      <span className="mb-[5px] h-[70px] w-[70px] text-[70px]">
+      <span
+        className={`mb-[5px] h-40 w-40 text-[70px] ${
+          selected ? 'rounded-lg border border-blue-primary bg-theme-studio-surface' : ''
+        }`}
+      >
         <FileIcon thumbnailURL={resource.thumbnailURL} type={assetType} />
       </span>
 
       <Tooltip title={name}>
-        <span className="line-clamp-1 w-full text-wrap break-all text-sm text-white">{name}</span>
+        <span className="line-clamp-1 w-full text-wrap break-all text-sm text-[#F5F5F5]">{name}</span>
       </Tooltip>
 
       <ContextMenu anchorEvent={anchorEvent} onClose={() => setAnchorEvent(undefined)} className="gap-1">
@@ -624,7 +626,7 @@ const AssetPanel = () => {
           onSelectCategory={handleSelectCategory}
         />
         <div className="flex h-full w-full flex-col overflow-auto">
-          <div className="grid flex-1 grid-cols-3 gap-2 overflow-auto p-2">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(170px,1fr))] gap-2 p-2">
             <ResourceItems />
           </div>
           <div className="mx-auto mb-10">
diff --git a/packages/ui/src/components/editor/panels/Files/icon/index.tsx b/packages/ui/src/components/editor/panels/Files/icon/index.tsx
index 11735441a5..6cf8f3231a 100644
--- a/packages/ui/src/components/editor/panels/Files/icon/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/icon/index.tsx
@@ -90,7 +90,7 @@ export const FileIcon = ({
           alt=""
         />
       ) : FallbackIcon ? (
-        <FallbackIcon className={`${color}`} />
+        <FallbackIcon className={`${color} h-full w-full p-4`} />
       ) : (
         <>
           <TbFileDescription className={`${color}`} />