From 8a8e2875d6696ec7410715ede113f5637105f7ad Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Wed, 9 Oct 2024 10:52:34 +0800
Subject: [PATCH] 1,570th Commit

---
 app/src/layouts/baseline/Baseline.vue                     | 2 +-
 .../data-display/table/dynamic-table/Draggable.vue        | 2 +-
 .../(library)/data-display/tree-table/+page.vue           | 8 ++++----
 ui/src/components/button/Button.vue                       | 6 +++---
 ui/src/components/checkbox/Checkbox.vue                   | 2 +-
 ui/src/components/pagination/Pagination.vue               | 6 +++---
 ui/src/components/radio-group/RadioGroup.vue              | 2 +-
 ui/src/components/range-slider/RangeSlider.vue            | 2 +-
 ui/src/components/select/Select.vue                       | 8 ++------
 ui/src/components/slider/Slider.vue                       | 2 +-
 ui/src/components/table/Cell.vue                          | 2 +-
 ui/src/components/table/Column.vue                        | 2 +-
 ui/src/components/tag/Tag.vue                             | 4 ++--
 ui/src/components/tree-select/TreeSelect.vue              | 4 +---
 14 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/app/src/layouts/baseline/Baseline.vue b/app/src/layouts/baseline/Baseline.vue
index 0791a89d..b58a77e0 100644
--- a/app/src/layouts/baseline/Baseline.vue
+++ b/app/src/layouts/baseline/Baseline.vue
@@ -173,7 +173,7 @@ function changeLang(lang: string) {
         <XButton
           variant="text"
           size="small"
-          class="!h-38px !text-slate-400 !rounded-md !border-slate-900/10 !hover:bg-slate-100 !dark:hover:bg-slate-700"
+          class="!h-9.5 !text-slate-400 !rounded-md !border-slate-900/10 !hover:bg-slate-100 !dark:hover:bg-slate-700"
           @click="flux.searchDialog = true"
         >
           <div class="i-material-symbols-search-rounded w-5 h-5"></div>
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Draggable.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Draggable.vue
index fd2fa923..6542aa6a 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Draggable.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Draggable.vue
@@ -76,7 +76,7 @@ const flux = reactive({
               <XTable.Row>
                 <XTable.Cell>
                   <div
-                    class="min-h-38px i-ic-baseline-drag-indicator handle w-6 h-6 cursor-move"
+                    class="min-h-9.5 i-ic-baseline-drag-indicator handle w-6 h-6 cursor-move"
                   ></div>
                 </XTable.Cell>
 
diff --git a/app/src/routes/(backstage)/(library)/data-display/tree-table/+page.vue b/app/src/routes/(backstage)/(library)/data-display/tree-table/+page.vue
index 30cc1122..b3a63dc5 100644
--- a/app/src/routes/(backstage)/(library)/data-display/tree-table/+page.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/tree-table/+page.vue
@@ -114,13 +114,13 @@ function treeNode(item: TreeTableNode) {
       <thead>
         <tr>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Name</div>
+            <div class="inline-flex items-center min-h-9.5">Name</div>
           </XTable.Column>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Size</div>
+            <div class="inline-flex items-center min-h-9.5">Size</div>
           </XTable.Column>
           <XTable.Column>
-            <div class="inline-flex items-center min-h-38px">Type</div>
+            <div class="inline-flex items-center min-h-9.5">Type</div>
           </XTable.Column>
         </tr>
       </thead>
@@ -143,7 +143,7 @@ function treeNode(item: TreeTableNode) {
                 variant="text"
                 @click="treeNode(node)"
               />
-              <div v-else class="w-38px h-38px"></div>
+              <div v-else class="size-9.5"></div>
               <div class="ml-2">{{ node.name }} - {{ node.level }}</div>
             </div>
           </XTable.Cell>
diff --git a/ui/src/components/button/Button.vue b/ui/src/components/button/Button.vue
index 59e2a778..0e592ffd 100644
--- a/ui/src/components/button/Button.vue
+++ b/ui/src/components/button/Button.vue
@@ -212,14 +212,14 @@ function onClick(evt: MouseEvent) {
   }
 
   &.icon {
-    @apply p-0 rounded-full w-38px h-38px overflow-hidden;
+    @apply p-0 rounded-full size-9.5 overflow-hidden;
 
     &.small {
-      @apply w-34px h-34px;
+      @apply size-8.5;
     }
 
     &.large {
-      @apply w-42px h-42px;
+      @apply size-10.5;
     }
   }
 
diff --git a/ui/src/components/checkbox/Checkbox.vue b/ui/src/components/checkbox/Checkbox.vue
index e15b8139..4d7b6c46 100644
--- a/ui/src/components/checkbox/Checkbox.vue
+++ b/ui/src/components/checkbox/Checkbox.vue
@@ -75,7 +75,7 @@ const id = useId();
 }
 
 .Checkbox-Label {
-  @apply flex items-center min-h-38px cursor-pointer;
+  @apply flex items-center min-h-9.5 cursor-pointer;
 
   &.disabled {
     @apply cursor-not-allowed opacity-60;
diff --git a/ui/src/components/pagination/Pagination.vue b/ui/src/components/pagination/Pagination.vue
index 4df8a241..a421ace4 100644
--- a/ui/src/components/pagination/Pagination.vue
+++ b/ui/src/components/pagination/Pagination.vue
@@ -60,7 +60,7 @@ watch(
     <Button label="1" :variant="currentPage === 1 ? 'contained' : 'text'" @click="onPage(1)" />
 
     <template v-if="currentPage">
-      <div v-if="currentPage > 3" class="w-38px text-center">...</div>
+      <div v-if="currentPage > 3" class="w-9.5 text-center">...</div>
 
       <Button
         v-else
@@ -83,7 +83,7 @@ watch(
     />
 
     <template v-if="currentPage">
-      <div v-if="currentPage < pages - 3" class="w-38px text-center">...</div>
+      <div v-if="currentPage < pages - 3" class="w-9.5 text-center">...</div>
 
       <Button
         v-else
@@ -140,6 +140,6 @@ watch(
 
 <style lang="scss" scoped>
 :deep(.Button) {
-  @apply rounded-full p-2 min-w-38px;
+  @apply rounded-full p-2 min-w-9.5;
 }
 </style>
diff --git a/ui/src/components/radio-group/RadioGroup.vue b/ui/src/components/radio-group/RadioGroup.vue
index 1ce80d1f..cb924e3a 100644
--- a/ui/src/components/radio-group/RadioGroup.vue
+++ b/ui/src/components/radio-group/RadioGroup.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 
 <template>
   <FormControl v-slot="{ id }" :label :required :invalid :help>
-    <div class="flex flex-wrap items-center gap-4 min-h-38px">
+    <div class="flex flex-wrap items-center gap-4 min-h-9.5">
       <label
         v-for="(item, index) in options"
         :key="index"
diff --git a/ui/src/components/range-slider/RangeSlider.vue b/ui/src/components/range-slider/RangeSlider.vue
index 8ed8ab72..eea492ee 100644
--- a/ui/src/components/range-slider/RangeSlider.vue
+++ b/ui/src/components/range-slider/RangeSlider.vue
@@ -114,7 +114,7 @@ function onInput(evt: Event) {
   --range-slider-value-low-fallback: calc(var(--range-slider-value-low, 0) * 1%);
   --range-slider-value-high-fallback: calc(var(--range-slider-value-high, 100) * 1%);
 
-  @apply relative min-h-38px flex items-center;
+  @apply relative min-h-9.5 flex items-center;
 
   width: calc(100% - 1rem);
 
diff --git a/ui/src/components/select/Select.vue b/ui/src/components/select/Select.vue
index 5ce97ac4..9cf46f1f 100644
--- a/ui/src/components/select/Select.vue
+++ b/ui/src/components/select/Select.vue
@@ -258,7 +258,7 @@ if (popover.withinPopover) {
             ref="panel"
             class="shadow-lg rounded bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700"
           >
-            <div v-if="filterable" class="Select-FilterWrapper">
+            <div v-if="filterable" class="px-2 pt-2">
               <TextField
                 ref="filter"
                 v-model:value="filterValue"
@@ -299,12 +299,8 @@ if (popover.withinPopover) {
 </template>
 
 <style lang="scss" scoped>
-.Select-FilterWrapper {
-  @apply px-2 pt-2;
-}
-
 .Select-List {
-  @apply cursor-pointer max-h-40 overflow-auto p-2 empty:hidden;
+  @apply max-h-40 overflow-auto p-2 empty:hidden;
 }
 
 .Select-Item {
diff --git a/ui/src/components/slider/Slider.vue b/ui/src/components/slider/Slider.vue
index 38e540c7..6918b466 100644
--- a/ui/src/components/slider/Slider.vue
+++ b/ui/src/components/slider/Slider.vue
@@ -89,7 +89,7 @@ watch(
 
 <style lang="scss" scoped>
 .Slider-Wrapper {
-  @apply relative min-h-38px flex items-center;
+  @apply relative min-h-9.5 flex items-center;
 
   width: calc(100% - 1rem);
 }
diff --git a/ui/src/components/table/Cell.vue b/ui/src/components/table/Cell.vue
index f2efbee7..3cfb3e5c 100644
--- a/ui/src/components/table/Cell.vue
+++ b/ui/src/components/table/Cell.vue
@@ -6,7 +6,7 @@
 
 <style lang="scss" scoped>
 .Cell {
-  @apply h-38px px-4 py-0 align-middle whitespace-nowrap;
+  @apply h-9.5 px-4 py-0 align-middle whitespace-nowrap;
 
   > :deep(div) {
     @apply inline-flex items-center h-full;
diff --git a/ui/src/components/table/Column.vue b/ui/src/components/table/Column.vue
index 240e82ad..a02d33bd 100644
--- a/ui/src/components/table/Column.vue
+++ b/ui/src/components/table/Column.vue
@@ -6,7 +6,7 @@
 
 <style lang="scss" scoped>
 .Column {
-  @apply h-38px;
+  @apply h-9.5;
   @apply px-4 py-0 text-zinc-600 dark:text-zinc-400 bg-gray-200 dark:bg-gray-700;
   @apply border border-zinc-100 dark:border-zinc-600 border-l-0 border-r-0;
   @apply align-middle whitespace-nowrap font-semibold text-left;
diff --git a/ui/src/components/tag/Tag.vue b/ui/src/components/tag/Tag.vue
index 5f5726b3..f3a2cb92 100644
--- a/ui/src/components/tag/Tag.vue
+++ b/ui/src/components/tag/Tag.vue
@@ -8,9 +8,9 @@ defineProps<{
 <template>
   <div class="flex items-center">
     <div
-      class="border rounded text-10px px-10px py-2px mr-5px"
+      class="border rounded text-xs px-2.5 py-0.5"
       :class="{
-        'text-primary-500 border-primary-500': color === 'primary' || !color,
+        'text-primary-500 border-primary-500 bg-primary-50': color === 'primary' || !color,
         'text-secondary-500 border-secondary-500': color === 'secondary',
         'text-success-500 border-success-500': color === 'success',
         'text-danger-500 border-danger-500': color === 'danger',
diff --git a/ui/src/components/tree-select/TreeSelect.vue b/ui/src/components/tree-select/TreeSelect.vue
index e73fd053..8f0aa662 100644
--- a/ui/src/components/tree-select/TreeSelect.vue
+++ b/ui/src/components/tree-select/TreeSelect.vue
@@ -8,9 +8,7 @@ import FormControl, { type FormControlProps, formControlDefaults } from '../form
 import Popover from '../popover/Popover.vue';
 import Tree, { type Node } from '../tree';
 
-defineOptions({
-  inheritAttrs: false,
-});
+defineOptions({ inheritAttrs: false });
 
 const valueModel = defineModel<string[]>('value', { default: [] });