From dbf9cbdb90eefe31be6e2689313a3d877cf3102d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 19 Jun 2023 15:14:41 +0530
Subject: [PATCH] refactor: reduce the child list item size, modal size, add
 transition to icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/assets/style.scss                        | 2 +-
 .../virtual-cell/components/ListChildItems.vue           | 9 +++++----
 .../components/virtual-cell/components/ListItems.vue     | 5 +++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 25f17ff5e9..c5f36936aa 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -331,5 +331,5 @@ a {
 
 
 .nc-icon-transition {
-  @apply transform transition-transform !hover:(scale-115) !active:(scale-100)
+  @apply transform transition-transform !hover:(scale-115 text-shadow-sm) !active:(scale-100)
 }
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 7f2e195622..faaed6232c 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -107,6 +107,7 @@ const onClick = (row: Row) => {
     :footer="null"
     title="Child list"
     :body-style="{ padding: 0 }"
+    width="400px"
     wrap-class-name="nc-modal-child-list"
   >
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
@@ -143,7 +144,7 @@ const onClick = (row: Row) => {
           <a-card
             v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
             :key="i"
-            class="nc-nested-list-item !my-4 hover:(!bg-gray-200/50 shadow-md)"
+            class="nc-nested-list-item !my-2 hover:(!bg-gray-200/50 shadow-md)"
             @click="onClick(row)"
           >
             <div class="flex items-center">
@@ -159,14 +160,14 @@ const onClick = (row: Row) => {
               <div v-if="!readonly" class="flex gap-2">
                 <component
                   :is="iconMap.linkRemove"
-                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  class="!text-base text-grey hover:(!text-red-500) cursor-pointer nc-icon-transition"
                   data-testid="nc-child-list-icon-unlink"
                   @click.stop="unlinkRow(row)"
                 />
                 <component
                   :is="iconMap.delete"
                   v-if="!readonly && !isPublic"
-                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  class="!text-base text-grey hover:(!text-red-500) cursor-pointer nc-icon-transition"
                   data-testid="nc-child-list-icon-delete"
                   @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
                 />
@@ -214,6 +215,6 @@ const onClick = (row: Row) => {
 }
 
 :deep(.nc-nested-list-item .ant-card-body) {
-  @apply !px-2 !py-1;
+  @apply !px-1 !py-0;
 }
 </style>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index e0bf83886a..cd58eaac15 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -197,6 +197,7 @@ watch(vModel, (nextVal) => {
     :title="$t('activity.linkRecord')"
     :body-style="{ padding: 0 }"
     wrap-class-name="nc-modal-link-record"
+    width="400px"
   >
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
@@ -225,7 +226,7 @@ watch(vModel, (nextVal) => {
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
             :ref="selectedRowIndex === i ? activeRow : null"
-            class="nc-nested-list-item !my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            class="nc-nested-list-item !my-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
           >
@@ -284,6 +285,6 @@ watch(vModel, (nextVal) => {
 }
 
 :deep(.nc-nested-list-item .ant-card-body) {
-  @apply !px-2 !py-1;
+  @apply !px-1 !py-0;
 }
 </style>