feat(unocss): add overrides and update components

mnenie · Jan 24, 2025 · 718519f · 718519f
1 parent 707ce93
commit 718519f
Show file tree

Hide file tree

Showing 64 changed files with 158 additions and 207 deletions.
diff --git a/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
@@ -23,8 +23,8 @@ exports[`tests for HeaderWelcome.vue > should be render correctly 1`] = `
       </div>
     </div>
     <div data-v-8da6c939="" class="flex items-center gap-1.5 btns">
-      <ui-button-stub data-v-8da6c939="" class="bg-main bg-transparent" variant="ghost" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button" style="font-weight: 500;"></ui-button-stub>
-      <ui-button-stub data-v-8da6c939="" variant="default" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+      <ui-button-stub data-v-8da6c939="" class="bg-main bg-transparent" variant="ghost" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button" style="font-weight: 500;"></ui-button-stub>
+      <ui-button-stub data-v-8da6c939="" variant="default" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
     </div>
   </section>
 </header>"

diff --git a/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
-"<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-34px 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
+"<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-9 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
       <!--v-if-->
-      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-15px !h-15px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
+      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-16px !h-16px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-default !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
       <!--v-if-->
     </button></a></div>"
 `;
diff --git a/apps/client/src/core/components/headers/HeaderMain.vue b/apps/client/src/core/components/headers/HeaderMain.vue
@@ -48,7 +48,7 @@ const { active } = useLayoutPaths(links, _projects)
     class="sticky top-0 left-0 right-0 z-999 w-full flex items-center justify-between px-15px py-8px min-h-52px max-h-52px
     border-b border-b-solid border-layout"
   >
-    <div class="inline-flex items-center gap-3">
+    <div class="inline-flex items-center gap-2">
       <Icon
         v-if="active.extendedAttrs.icon"
         :icon="active.extendedAttrs.icon"
@@ -70,7 +70,7 @@ const { active } = useLayoutPaths(links, _projects)
         <ShimmerButton shimmer-size="2px">
           <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 w-16px h-16px 2xl:(w-4 h-4)" />
           <span
-            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
+            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-base 2xl:text-sm fw500"
           >
             {{ $t('header.share') }}
           </span>
@@ -79,14 +79,14 @@ const { active } = useLayoutPaths(links, _projects)
       <div
         v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
         i-hugeicons-message-multiple-01
-        class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+        class="text-large text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
         style="margin-right: 2px"
       />
       <HotkeysDialog>
         <div
           v-tooltip="{ content: $t('header.navigator.question'), trigger: ['hover'], distance: 7 }"
           i-hugeicons-book-open-01
-          class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+          class="text-large text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
           style="margin-right: -1px;"
         />
       </HotkeysDialog>

diff --git a/apps/client/src/core/components/headers/HeaderWelcome.vue b/apps/client/src/core/components/headers/HeaderWelcome.vue
@@ -90,13 +90,14 @@ const { width } = useWindowSize()
       <div v-if="width >= 1152" class="flex items-center gap-1.5 btns">
         <UiButton
           variant="ghost"
+          size="lg"
           class="bg-main bg-transparent"
           style="font-weight: 500"
           @click="$router.push({ name: 'sign-in' })"
         >
           {{ t('welcome.header.login') }}
         </UiButton>
-        <UiButton @click="$router.push({ name: 'sign-up' })">
+        <UiButton size="lg" @click="$router.push({ name: 'sign-up' })">
           {{ t('welcome.header.reg') }}
         </UiButton>
       </div>

diff --git a/apps/client/src/core/components/headers/UserMenu.vue b/apps/client/src/core/components/headers/UserMenu.vue
@@ -7,8 +7,6 @@ import {
   UiDropdownMenuContent,
   UiDropdownMenuGroup,
   UiDropdownMenuItem,
-  UiDropdownMenuLabel,
-  UiDropdownMenuSeparator,
   UiDropdownMenuShortcut,
   UiDropdownMenuTrigger,
 } from '@/shared/ui'
@@ -32,22 +30,18 @@ watch([meta_x, ctrl_x], () => {
       <div class="flex items-center justify-center h-16px">
         <div
           i-lucide-ellipsis-vertical
-          class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
+          class="cursor-pointer text-large text-neutral-500 dark:text-neutral-400"
         />
       </div>
     </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent align="end" class="w-[200px] mt-6px">
-      <UiDropdownMenuLabel class="text-sm">
-        [email protected]
-      </UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
+    <UiDropdownMenuContent align="end" class="w-[200px] mt-12px">
       <UiDropdownMenuGroup>
         <UiDropdownMenuItem @click="router.push({ name: 'welcome' })">
-          <span class="2xl:text-13px text-sm font-medium">{{ $t('header.user.welcome') }}</span>
+          <span class="text-default font-medium">{{ $t('header.user.welcome') }}</span>
           <UiDropdownMenuShortcut>⇧P</UiDropdownMenuShortcut>
         </UiDropdownMenuItem>
         <UiDropdownMenuItem>
-          <span class="2xl:text-13px text-sm font-medium text-red-500">{{ $t('header.user.logout') }}</span>
+          <span class="text-default font-medium text-red-500">{{ $t('header.user.logout') }}</span>
           <UiDropdownMenuShortcut>⌘X</UiDropdownMenuShortcut>
         </UiDropdownMenuItem>
       </UiDropdownMenuGroup>

diff --git a/apps/client/src/core/components/headers/system/LanguageSelect.vue b/apps/client/src/core/components/headers/system/LanguageSelect.vue
@@ -36,7 +36,7 @@ const { setLanguage } = useLanguage(locales, language)
         class="p-1.5 px-2.5 h-fit gap-1 text-neutral-400 hover:text-neutral-700 dark:!text-neutral-400 dark:hover:!text-neutral-200"
       >
         <div i-hugeicons-globe-02 text-base />
-        <span text-sm fw400>{{ i18nLanguage }}</span>
+        <span class="text-default">{{ i18nLanguage }}</span>
       </UiButton>
     </UiSelectTrigger>
     <UiSelectContent class="w-fit min-w-2" align="center">

diff --git a/apps/client/src/core/components/headers/system/ThemeSwitcher.vue b/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
@@ -13,7 +13,7 @@ const toggleDark = useToggle(isDark)
     class="p-2 gap-1 text-neutral-400 hover:text-neutral-700 dark:!text-neutral-400 dark:hover:!text-neutral-200"
     @click="toggleDark()"
   >
-    <div v-if="!isDark" i-hugeicons-moon-02 text-base />
-    <div v-else i-lucide-sun text-base />
+    <div v-if="!isDark" i-hugeicons-moon-02 class="w-4.4 h-4.4 2xl:(w-4 h-4)" />
+    <div v-else i-lucide-sun class="w-4.4 h-4.4 2xl:(w-4 h-4)" />
   </UiButton>
 </template>
diff --git a/apps/client/src/core/components/sidebar/InfoMenu.vue b/apps/client/src/core/components/sidebar/InfoMenu.vue
@@ -27,8 +27,8 @@ const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
 <template>
   <DifineTemplate v-slot="{ title, icon }">
     <UiDropdownMenuItem>
-      <span class="text-sm" :class="icon" />
-      <span class="2xl:text-13px text-sm font-medium">{{ title }}</span>
+      <span class="text-default" :class="icon" />
+      <span class="text-default font-medium">{{ title }}</span>
     </UiDropdownMenuItem>
   </DifineTemplate>
   <UiDropdownMenu direction="right">
@@ -45,15 +45,15 @@ const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
         :class="[isExpanded ? 'justify-between' : 'justify-center p-0']"
       >
         <div class="flex items-center gap-2">
-          <div i-hugeicons-mortarboard-02 class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
-          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">
+          <div i-hugeicons-mortarboard-02 class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
+          <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">
             {{ $t('sidebar.help.title') }}
           </span>
         </div>
         <UiBadge v-if="isShowPlan" variant="soft" class="w-10 px-1">
           <div class="flex items-center gap-0.5">
             <div i-lucide-stars />
-            <span class="!text-10px !fw500">1/3</span>
+            <span class="text-xs !fw500">1/3</span>
           </div>
         </UiBadge>
       </UiButton>

diff --git a/apps/client/src/core/components/sidebar/IntegrationItems.vue b/apps/client/src/core/components/sidebar/IntegrationItems.vue
@@ -20,7 +20,7 @@ const { isExpanded } = useExpandedContext()
     :class="[isExpanded ? 'px-2' : 'px-1']"
   >
     <p
-      class="text-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis
+      class="text-neutral-500 dark:text-neutral-400 text-small capitalize text-ellipsis
         whitespace-nowrap overflow-hidden"
     >
       {{ $t('sidebar.integrations') }}
@@ -42,10 +42,10 @@ const { isExpanded } = useExpandedContext()
         <Icon
           :inline="true"
           :icon="icon"
-          class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
+          class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
           :class="[idx === 2 && '!w-3.6 !h-3.6 !text-#fc4714']"
         />
-        <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
+        <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
       </div>
       <UiBadge v-if="name === 'Notion' && isExpanded" variant="outline" class="px-1 py-0 text-11px shadow-none">
         {{ $t('sidebar.soon') }}

diff --git a/apps/client/src/core/components/sidebar/WorkSpace.vue b/apps/client/src/core/components/sidebar/WorkSpace.vue
@@ -57,11 +57,11 @@ const contentPosition = computed(() => {
         :style="{ padding: !isExpanded ? '0px' : '', justifyContent: contentPosition }"
       >
         <div class="flex items-center gap-2">
-          <Icon :icon="link.icon" class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
-          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
+          <Icon :icon="link.icon" class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
+          <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
         </div>
         <UiBadge v-if="link.id === 1 && isExpanded" variant="solid" class="px-5px py-0 text-xs rounded-md">
-          <span class="text-[10px] text-white">3</span>
+          <span class="text-xs text-white">3</span>
         </UiBadge>
       </UiButton>
     </RouterLink>

diff --git a/apps/client/src/core/components/sidebar/plan/PlanCard.vue b/apps/client/src/core/components/sidebar/plan/PlanCard.vue
@@ -18,10 +18,12 @@ const { isExpanded } = useExpandedContext()
   >
     <div class="flex gap-1.5 w-full justify-between items-center">
       <div class="flex items-center gap-1">
-        <UiBadge variant="soft" class="rounded px-1.5 py-px text-xs">
+        <UiBadge variant="soft" class="rounded px-1.5 py-px text-small">
           5
         </UiBadge>
-        <span class="text-13px 2xl:text-sm text-neutral-800 dark:text-neutral-300 whitespace-nowrap"> {{ $t('sidebar.plan.description') }}</span>
+        <span class="text-default text-neutral-800 dark:text-neutral-300 whitespace-nowrap">
+          {{ $t('sidebar.plan.description') }}
+        </span>
       </div>
       <SubscribePlan />
     </div>
@@ -43,7 +45,7 @@ const { isExpanded } = useExpandedContext()
     </span>
     <div class="flex gap-1.5 w-full justify-center items-center">
       <div class="flex flex-col items-center h-7">
-        <UiBadge variant="outline" class="rounded px-1 py-1 text-10px bg-white dark:bg-neutral-700/10">
+        <UiBadge variant="outline" class="rounded px-1 py-1 text-xs 2xl:text-10px bg-white dark:bg-neutral-700/10">
           5/10
         </UiBadge>
       </div>

diff --git a/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue b/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
@@ -6,7 +6,7 @@ import { UiButton } from '@/shared/ui'
   <UiButton
     size="sm"
     variant="secondary"
-    class="shadow-none text-sm 2xl:text-xs px-2 py-px h-7 dark:(bg-neutral-700/30 hover:bg-neutral-700/20)"
+    class="shadow-none fw500 text-small px-2 py-px h-7 dark:(bg-neutral-700/30 hover:bg-neutral-700/20)"
   >
     {{ $t('sidebar.plan.btn') }}
   </UiButton>

diff --git a/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue b/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
@@ -53,8 +53,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         </ReuseTemplate>
         <ReuseTemplate field="url" :error="errors.url">
           <div class="relative w-full h-9 flex items-center">
-            <span class="text-sm pb-0.5px text-neutral-500 absolute left-3">workpaces/</span>
-            <UiInput id="url" v-model="url" class="pl-22" type="text" />
+            <span class="text-default pb-0.5px text-neutral-500 absolute left-3">workpaces/</span>
+            <UiInput id="url" v-model="url" class="pl-25 2xl:pl-22" type="text" />
           </div>
         </ReuseTemplate>
       </div>

diff --git a/apps/client/src/modules/boards/components/BoardsDataTable.vue b/apps/client/src/modules/boards/components/BoardsDataTable.vue
@@ -113,10 +113,11 @@ defineExpose({
             v-for="{ name, color } in cell.row.original.labels"
             :key="name"
             variant="soft"
-            class="shadow-none rounded-lg px-1.5 mr-1.5 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/80 text-neutral-100)"
+            class="shadow-none rounded-lg !text-12px 2xl:!text-xs font-medium px-1.5 mr-1.5 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/80 text-neutral-100)"
             :style="{
               background: color ? color.startsWith('#') ? `${color}33` : color : '',
               color: formatLabelColor(color, isDark ? 10 : 100) || '',
+              border: color ? `1px solid ${color}44 !important` : '1px solid rgba(128, 128, 128, 0.3) !important',
             }"
           >
             {{ name }}

diff --git a/apps/client/src/modules/boards/components/NewBoardDialog.vue b/apps/client/src/modules/boards/components/NewBoardDialog.vue
@@ -27,7 +27,7 @@ function toggleModalRoute() {
     :default-open="true"
     @update:open="toggleModalRoute"
   >
-    <UiDialogContent>
+    <UiDialogContent class="sm:max-w-xl">
       <div class="flex flex-col gap-8">
         <UiDialogHeader>
           <UiDialogTitle>

diff --git a/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue b/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
@@ -14,11 +14,10 @@ const emit = defineEmits<{
 <template>
   <UiButton
     :variant="variant"
-    size="sm"
-    class="px-2"
+    size="default"
     @click="emit('add')"
   >
     <span i-hugeicons-add-01 class="w-4 h-4" />
-    <span class="text-sm">{{ $t('boards.create', plural) }}</span>
+    <span class="text-default">{{ $t('boards.create', plural) }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue b/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
@@ -9,12 +9,11 @@ const emit = defineEmits<{
 <template>
   <UiButton
     variant="ghost"
-    size="sm"
-    class="px-2 !text-red-500"
+    size="default"
+    class="!text-red-500"
     @click="emit('remove')"
   >
     <span i-hugeicons-delete-03 class="w-4 h-4" />
-    <!-- <span class="text-sm">{{ $t('boards.remove') }}</span> -->
-    <span class="text-sm">Удалить</span>
+    <span class="text-default">{{ $t('boards.remove') }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue b/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
@@ -83,7 +83,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
   </DefineTemplate>
   <UiPopover>
     <UiPopoverTrigger as-child>
-      <UiButton size="sm" variant="dashed" class="px-2 shadow-sm border w-max fw400">
+      <UiButton size="sm" variant="dashed" class="px-2 h-default shadow-sm border w-max 2xl:fw400">
         <span>{{ t('boards.filters.advanced.title') }}</span>
         <div class="w-4 h-4 flex items-center justify-center text-neutral-600 dark:text-neutral-300 text-xs bg-neutral-100 dark:bg-neutral-700 rounded-full">
           {{ advancedModel.length }}

diff --git a/apps/client/src/modules/boards/components/filters/BoardsSort.vue b/apps/client/src/modules/boards/components/filters/BoardsSort.vue
@@ -16,7 +16,7 @@ const { sortModel } = useFilteredContext()
 <template>
   <UiSelect v-model:model-value="sortModel">
     <UiSelectTrigger as-child>
-      <UiButton size="sm" variant="dashed" class="gap-0 px-2 focus:ring-0 shadow-sm border fw400">
+      <UiButton size="sm" variant="dashed" class="gap-0 h-default px-2 focus:ring-0 shadow-sm border 2xl:fw400">
         <span i-hugeicons-sort-by-down-01 class="w-4 h-4 mr-2 text-neutral-500 dark:text-neutral-400" />
         <span class="text-neutral-600 dark:text-neutral-400 mr-1">
           {{ $t('boards.filters.sort.title') }}

diff --git a/apps/client/src/modules/boards/components/filters/SearchBoards.vue b/apps/client/src/modules/boards/components/filters/SearchBoards.vue
@@ -3,5 +3,5 @@ import { UiInput } from '@/shared/ui'
 </script>
 
 <template>
-  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px 2xl:h-8 focus:ring-0" />
+  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px h-default focus:ring-0" />
 </template>
diff --git a/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue b/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
@@ -62,7 +62,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
               id="name"
               v-model="name"
               :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
-              class="shadow-none focus:ring-0"
+              class="shadow-none h-default focus:ring-0"
             />
           </ReuseTemplate>
           <UiAlert
@@ -72,24 +72,26 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
           />
           <ReuseTemplate field="labels">
             <TagsChooser id="labels" v-model="labels" />
-            <span class="text-xs text-neutral-500">
+            <span class="text-small text-neutral-500">
               {{ $t('boards.forms.creating.labels.description') }}
             </span>
           </ReuseTemplate>
         </div>
         <div class="flex items-center justify-end gap-3">
           <UiButton
             variant="secondary"
-            size="sm"
+            size="default"
             type="button"
+            class="px-4"
             @click="router.back()"
           >
             {{ $t('boards.forms.creating.btns', 1) }}
           </UiButton>
           <UiButton
             variant="solid"
-            size="sm"
+            size="default"
             type="submit"
+            class="px-4"
           >
             {{ $t('boards.forms.creating.btns', 2) }}
           </UiButton>

diff --git a/apps/client/src/modules/common/components/EmptyContainer.vue b/apps/client/src/modules/common/components/EmptyContainer.vue
@@ -8,14 +8,14 @@ defineProps<{
 </script>
 
 <template>
-  <div class="absolute top-1/2 left-1/2 translate-x--1/2 translate-y--1/2 flex flex-col items-center justify-center gap-2">
+  <div class="absolute top-1/2 left-1/2 translate-x--1/2 translate-y--1/2 flex flex-col items-center justify-center gap-1">
     <div class="w-12 h-12 rounded-full flex items-center justify-center bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700">
       <Icon :icon="icon" class="w-6 h-6 text-blue-500" />
     </div>
-    <p class="text-base fw500 text-neutral-800 dark:text-neutral-200">
+    <p class="text-16px 2xl:text-base fw-590 text-neutral-800 dark:text-neutral-200">
       {{ $t(`${tPrefix}.empty.title`) }}
     </p>
-    <span class="text-sm text-neutral-600 dark:text-neutral-200">
+    <span class="text-default mb-1 text-neutral-600 dark:text-neutral-400">
       {{ $t(`${tPrefix}.empty.description`) }}
     </span>
     <slot />