chore(gui-v2): update attachment cell styles

packages/nc-gui-v2/components/cell/attachment/Modal.vue

@@ -70,10 +70,10 @@ onKeyDown('Escape', () => {
       <div
         v-if="!isReadonly && !dragging"
         :class="[isOverDropZone ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-blue-100/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
+        class="transition-all duration-150 ease-in-out ring ring-pink-500 rounded bg-gray-700/75 flex items-center justify-center gap-4 z-99 absolute top-0 bottom-0 left-0 right-0 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
-        <div class="text-3xl text-primary">Drop here</div>
+        <div class="text-white text-3xl">Drop here</div>
       </div>
 
       <div ref="sortableRef" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -60,18 +60,17 @@ onKeyDown('Escape', () => {
 </script>
 
 <template>
-  <div ref="dropZoneRef" class="nc-attachment-cell flex-1 color-transition flex items-center justify-between gap-1">
+  <div ref="dropZoneRef" class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
     <template v-if="!isReadonly && !dragging && isOverDropZone">
       <div
-        class="w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gradient-to-t from-primary/10 via-primary/25 to-primary/10 !text-primary"
+        class="z-100 absolute top-0 bottom-0 left-0 right-0 w-full h-full flex items-center justify-center p-1 rounded gap-1 bg-gray-700/75 text-white"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
       </div>
     </template>
 
-    <template v-else>
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
@@ -95,13 +94,13 @@ onKeyDown('Escape', () => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-          class="h-full w-full flex flex-wrap flex-col gap-2 content-start py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
+        class="flex gap-2 py-1 overflow-x-scroll overflow-y-hidden scrollbar-thin-primary"
       >
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
           :key="item.url || item.title"
-            class="nc-attachment flex-auto flex items-center justify-center w-[45px] border-1"
+          class="nc-attachment flex-auto flex items-center justify-center min-w-[45px] w-[45px] border-1"
         >
           <a-tooltip placement="bottom">
             <template #title>
@@ -132,7 +131,6 @@ onKeyDown('Escape', () => {
         </a-tooltip>
       </div>
     </template>
-    </template>
 
     <Modal />
   </div>