From afdde78bf0efae9ece23f3939c708d714635fcd1 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 20:46:51 +0300
Subject: [PATCH] refactor(gui-v2): curved labels

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue  | 11 +++++++++--
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 12 ++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index b80b76e870..1a45b0b389 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -54,12 +54,12 @@ const vModel = computed({
     :show-search="false"
   >
     <a-select-option v-for="op of options" :key="op.title" style="cursor: pointer">
-      <a-tag :color="op.color">
+      <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
     <template #tagRender="{ value: val, label, onClose }">
-      <a-tag :color="label[0].props.color" :closable="true" @close="onClose">
+      <a-tag class="rounded-tag" :color="label[0].props.color" :closable="true" @close="onClose">
         <span class="text-slate-500">{{ val }}</span>
       </a-tag>
     </template>
@@ -67,6 +67,13 @@ const vModel = computed({
 </template>
 
 <style scoped>
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 2fd15c71a4..27f19066de 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -39,14 +39,22 @@ const options = computed(() => {
     :bordered="false"
   >
     <a-select-option v-for="op of options" :key="op.title">
-      <a-tag :color="op.color">
+      <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
   </a-select>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
+</style>
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd