feat(nc-gui): revise kanban styles & apply windicss

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -130,7 +130,7 @@ openNewRecordFormHook?.on(async () => {
 <template>
   <!-- TODO: add loading component when formattedData is not ready -->
   <div v-if="formattedData" class="flex h-full">
-    <div class="nc-kanban-container flex grid gap-2 my-4 px-3">
+    <div class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-auto">
       <Draggable
         v-model="groupingFieldColOptions"
         class="flex gap-5"
@@ -139,16 +139,25 @@ openNewRecordFormHook?.on(async () => {
         draggable=".nc-kanban-stack"
       >
         <template #item="{ element: stack }">
-          <a-card :key="stack.id" class="nc-kanban-stack mx-4" head-style="padding-bottom: 0px;" body-style="padding: 0px 20px;">
-            <template #title>
-              <div class="nc-kanban-stack-head">
-                <span v-if="stack.order === 0" class="text-slate-500">{{ stack.title }}</span>
-                <a-tag v-else class="!px-[12px] !rounded-[12px]" :color="stack.color">
+          <a-card
+            :key="stack.id"
+            class="nc-kanban-stack mx-4 !bg-[#f0f2f5] flex flex-col min-w-[280px] h-full rounded-[12px]"
+            head-style="padding-bottom: 0px;"
+            body-style="padding: 0px 20px; height: 100%;"
+          >
+            <a-layout>
+              <a-layout-header>
+                <div class="nc-kanban-stack-head justify-center w-full items-center flex">
+                  <div v-if="stack.order === 0" class="text-slate-500 font-bold">{{ stack.title }}</div>
+                  <div v-else>
+                    <a-tag class="!rounded-[12px]" :color="stack.color">
                       <span class="text-slate-500">{{ stack.title }}</span>
                     </a-tag>
                   </div>
-            </template>
-            <div class="nc-kanban-list flex flex-col">
+                </div>
+              </a-layout-header>
+              <a-layout-content class="overflow-y-hidden">
+                <div class="nc-kanban-list h-full overflow-y-auto">
                   <Draggable
                     v-model="formattedData[stack.title]"
                     item-key="row.Id"
@@ -230,8 +239,8 @@ openNewRecordFormHook?.on(async () => {
                     </template>
                   </Draggable>
                 </div>
-            <a-card-meta>
-              <template #description>
+              </a-layout-content>
+              <a-layout-footer>
                 <div class="mt-5 text-center">
                   <mdi-plus class="text-pint-500 text-lg text-primary cursor-pointer" @click="openNewRecordFormHook.trigger()" />
                   <div class="nc-kanban-data-count">
@@ -239,8 +248,8 @@ openNewRecordFormHook?.on(async () => {
                     {{ formattedData[stack.title]?.length !== 1 ? $t('objects.records') : $t('objects.record') }}
                   </div>
                 </div>
-              </template>
-            </a-card-meta>
+              </a-layout-footer>
+            </a-layout>
           </a-card>
         </template>
       </Draggable>
@@ -257,31 +266,14 @@ openNewRecordFormHook?.on(async () => {
 </template>
 
 <style lang="scss" scoped>
-// TODO: windicss
-.nc-kanban-container {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  display: flex;
-}
-
-.nc-kanban-stack-head {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.nc-kanban-stack {
-  background-color: rgba(0, 0, 0, 0.05);
-  border-radius: 12px;
-  height: 100%;
-  min-width: 280px;
-  display: flex;
-  flex-direction: column;
+// override ant design style
+.a-layout,
+.ant-layout-header,
+.ant-layout-content {
+  @apply !bg-[#f0f2f5];
 }
 
-.nc-kanban-list {
-  overflow-y: scroll;
-  min-height: 500px;
-  height: 520px;
+.ant-layout-header {
+  @apply !h-[64px];
 }
 </style>