adata-ui 2.1.40-beta.10 → 2.1.40-beta.12

package/components/navigation/header/AlmatyContacts.vue

@@ -1,16 +1,64 @@
+<script setup lang="ts">
+import { useContacts } from '#adata-ui/composables/projectState'
+import Clock from '#adata-ui/icons/clock.vue'
+import ExpandWindow from '#adata-ui/icons/expand-window.vue'
+import Location from '#adata-ui/icons/location.vue'
+import Mail from '#adata-ui/icons/mail.vue'
+import Phone from '#adata-ui/icons/phone.vue'
+import Whatsapp from '#adata-ui/icons/whatsapp.vue'
+
+const { t } = useI18n()
+const contacts = useContacts()
+const AlmatyItems = computed(() => ([
+  {
+    title: t('header.contacts.almaty.adress.title'),
+    subtitle: t('header.contacts.almaty.adress.subtitle'),
+    icon: Location,
+    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72',
+  },
+  {
+    title: t('header.contacts.almaty.email.title'),
+    subtitle: 'info@adata.kz',
+    icon: Mail,
+    to: 'mailto:info@adata.kz',
+  },
+  {
+    title: t('header.contacts.almaty.schedule.title'),
+    subtitle: t('header.contacts.almaty.schedule.subtitle'),
+    icon: Clock,
+  },
+]))
+
+const technicalSupport = computed(() => ([
+  {
+    subtitle: t('header.contacts.almaty.support.linkTitle'),
+    icon: ExpandWindow,
+    to: 'https://api.whatsapp.com/send/?phone=77712289041',
+  },
+]))
+
+const newContacts = computed(() => contacts.value.map(item => ({
+  subtitle: item.contact,
+  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
+  to: item.platform_code === 'telephone'
+    ? `tel:${item.contact}`
+    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/\D/g, '')}`,
+})))
+</script>
+
 <template>
-  <!--noindex-->
+  <!-- noindex -->
   <div class="h-[272px]" data-nosnippet>
-    <h2 class="heading-02 mb-4">
+    <h2 class="mb-4 text-h2">
       {{ t('header.contacts.almaty.title') }}
     </h2>
     <div class="flex gap-10">
       <div class="flex flex-col gap-4">
         <div
-          v-for="item in AlmatyItems.slice(0,3)"
+          v-for="item in AlmatyItems.slice(0, 3)"
           class="flex flex-col gap-2 "
         >
-          <div class="heading-04">
+          <div class="text-h5">
             {{ item.title }}
           </div>
           <a
@@ -21,46 +69,46 @@
               :is="item.icon"
               class="shrink-0"
             />
-            <div class=" body-400">
+            <div class="text-body-md">
               {{ item.subtitle }}
             </div>
           </a>
         </div>
       </div>
       <div class="flex flex-col gap-2 2xl:gap-4">
-        <div class="flex flex-col gap-4 h-full justify-between">
+        <div class="flex h-full flex-col justify-between gap-4">
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04">
+            <div class="text-h5">
               {{ t('header.contacts.almaty.contactUs.title') }}
             </div>
-            <div class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] max-w-[484px] gap-x-8 gap-y-2">
+            <div class="grid max-w-[484px] grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-x-8 gap-y-2">
               <a
                 v-for="link in newContacts"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 :target="link.icon === Whatsapp ? '_blank' : '_self'"
               >
                 <component :is="link.icon" />
-                <div class="body-400 line-clamp-1">
+                <div class="line-clamp-1 text-body-md">
                   {{ link.subtitle }}
                 </div>
               </a>
             </div>
           </div>
           <div class="flex flex-col gap-2 ">
-            <div class="heading-04 whitespace-nowrap">
+            <div class="whitespace-nowrap text-h5">
               {{ t('header.contacts.almaty.support.title') }}
             </div>
             <div class="flex flex-col lg:gap-y-5">
               <a
                 v-for="link in technicalSupport"
                 :key="link.subtitle"
-                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
+                class="flex gap-1 text-deepblue-900 dark:text-white 2xl:items-center"
                 :href="link.to"
                 target="_blank"
               >
-                <div class="body-400 line-clamp-1 text-blue-600">
+                <div class="line-clamp-1 text-body-md text-blue-600">
                   {{ link.subtitle }}
                 </div>
                 <component
@@ -72,74 +120,26 @@
           </div>
         </div>
       </div>
-<!--      Here is the financial department-->
-<!--      <div class="flex flex-col gap-2 self-end">-->
-<!--        <div class="heading-04 whitespace-nowrap">-->
-<!--          {{ t('header.contacts.almaty.financeDep.title') }}-->
-<!--        </div>-->
-<!--        <nuxt-link-->
-<!--          class="flex gap-1 items-center"-->
-<!--          to="https://api.whatsapp.com/send?phone=77713954561"-->
-<!--          target="_blank"-->
-<!--        >-->
-<!--          <div class="body-400 line-clamp-1 text-blue-600">-->
-<!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }}-->
-<!--          </div>-->
-<!--          <a-icon-expand-window class="stroke-blue-600"/>-->
-<!--        </nuxt-link>-->
-<!--      </div>-->
+      <!--      Here is the financial department -->
+      <!--      <div class="flex flex-col gap-2 self-end"> -->
+      <!--        <div class="heading-04 whitespace-nowrap"> -->
+      <!--          {{ t('header.contacts.almaty.financeDep.title') }} -->
+      <!--        </div> -->
+      <!--        <nuxt-link -->
+      <!--          class="flex gap-1 items-center" -->
+      <!--          to="https://api.whatsapp.com/send?phone=77713954561" -->
+      <!--          target="_blank" -->
+      <!--        > -->
+      <!--          <div class="body-400 line-clamp-1 text-blue-600"> -->
+      <!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }} -->
+      <!--          </div> -->
+      <!--          <a-icon-expand-window class="stroke-blue-600"/> -->
+      <!--        </nuxt-link> -->
+      <!--      </div> -->
     </div>
   </div>
-  <!--/noindex-->
+  <!-- /noindex -->
 </template>
 
-<script setup lang="ts">
-
-import Location from "#adata-ui/icons/location.vue";
-import Mail from "#adata-ui/icons/mail.vue";
-import Clock from "#adata-ui/icons/clock.vue";
-import Whatsapp from "#adata-ui/icons/whatsapp.vue";
-import Phone from "#adata-ui/icons/phone.vue";
-import ExpandWindow from "#adata-ui/icons/expand-window.vue";
-import {useContacts} from "#adata-ui/composables/projectState";
-
-const {t} = useI18n()
-const contacts = useContacts()
-const AlmatyItems = computed(() => ([
-  {
-    title: t('header.contacts.almaty.adress.title'),
-    subtitle: t('header.contacts.almaty.adress.subtitle'),
-    icon: Location,
-    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
-  },
-  {
-    title: t('header.contacts.almaty.email.title'),
-    subtitle: 'info@adata.kz',
-    icon: Mail,
-    to: 'mailto:info@adata.kz'
-  },
-  {
-    title: t('header.contacts.almaty.schedule.title'),
-    subtitle: t('header.contacts.almaty.schedule.subtitle'),
-    icon: Clock,
-  },
-]))
-
-const technicalSupport = computed(() => ([
-  {
-    subtitle: t('header.contacts.almaty.support.linkTitle'),
-    icon: ExpandWindow,
-    to: "https://api.whatsapp.com/send/?phone=77712289041"
-  }
-]))
-
-const newContacts = computed(()=> contacts.value.map(item => ({
-  subtitle: item.contact,
-  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
-  to: item.platform_code === 'telephone' ? `tel:${item.contact}`
-    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/[^0-9]/g, '')}`
-})))
-</script>
-
 <style scoped>
 </style>

package/components/navigation/header/CardGallery.vue

@@ -109,7 +109,7 @@ onUnmounted(() => clearTimer())
 
 <template>
   <div
-    class="overflow-hidden relative w-[320px] h-[480px] rounded-2xl"
+    class="overflow-hidden relative w-[320px] h-[480px] rounded-xl"
     @mouseover="handleMouseOver"
     @mouseout="handleMouseOut"
   >
@@ -120,14 +120,14 @@ onUnmounted(() => clearTimer())
       >
         <img
           :src="items[currentIndex].image"
-          class="size-full object-cover rounded-2xl"
+          class="size-full object-cover rounded-xl"
         />
         <nuxt-link-locale :to="items[currentIndex].to">
-          <div class="absolute bottom-0 rounded-2xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
+          <div class="absolute bottom-0 rounded-xl w-full bg-blue-700/80 dark:bg-blue-500/80 px-4 pt-4 pb-12 shadow-[0_-2px_4px_0_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col gap-6">
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-lg">
+                  <div class="flex items-center justify-center bg-white dark:bg-gray-900 text-blue-700 dark:text-blue-500 size-8 rounded-md">
                     <component
                       :is="items[currentIndex].icon"
                       class="size-6"

package/components/navigation/header/HeaderUsage.vue

@@ -16,14 +16,12 @@ interface Props {
   daysRemaining?: number
 }
 
-// Bar fill represents the remaining quota: full bar = plenty of requests left.
 const percent = computed(() => {
   if (props.maxLimit <= 0) return 0
   const ratio = (props.limitRemaining / props.maxLimit) * 100
   return Math.min(100, Math.max(0, ratio))
 })
 
-// Animate the fill from 0 on mount and on every value change.
 const displayPercent = ref(0)
 onMounted(() => {
   displayPercent.value = percent.value
@@ -69,7 +67,7 @@ const valueColorClass = computed(() =>
         </div>
 
         <span
-          class="text-sm tabular-nums leading-none"
+          class="text-body-md tabular-nums leading-none"
           data-test-id="header-usage-requests"
         >
           <span
@@ -79,7 +77,7 @@ const valueColorClass = computed(() =>
         </span>
 
         <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
             Лимит запросов: {{ limitRemaining }}
           </span>
         </template>
@@ -99,11 +97,11 @@ const valueColorClass = computed(() =>
           data-test-id="header-usage-days"
         >
           <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-          <span class="text-sm font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
+          <span class="text-body-md font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
         </div>
 
         <template #content>
-          <span class="whitespace-nowrap text-[11px] leading-none text-deepblue-900 dark:text-gray-100">
+          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
             Остаток дней: {{ daysRemaining }}
           </span>
         </template>

package/components/navigation/header/ListItem.vue

@@ -4,9 +4,9 @@
     @mouseenter="hover = true"
     @mouseleave="hover = false"
     :class="{'opacity-30' : !hover && someHovered}"
-    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-lg dark:hover:bg-gray-800 normal-case transition-all "
+    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-800 normal-case transition-all "
   >
-    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
+    <div class="min-w-8 h-8 rounded-md flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
       <component
         :is="item.icon"
         class="h-5 w-5"

package/components/navigation/header/NavCard.vue

@@ -29,7 +29,7 @@ const hover = ref(false)
       </p>
     </div>
     <div
-      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
+      class="flex items-center justify-center self-end rounded-md bg-gradient-blue  dark:text-gray-900 text-white"
       :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
     >
       <component

package/components/navigation/header/NavList.vue

@@ -34,7 +34,7 @@ function isActive(itemPath: string) {
         class="group/title flex min-w-0 items-center gap-2 text-base font-semibold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
       >
         <span
-          class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
+          class="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-500 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover/title:bg-blue-500">
           <component
             :is="icon"
             class="size-4"
@@ -53,7 +53,7 @@ function isActive(itemPath: string) {
           v-if="item.to"
           :to="item.to"
           itemprop="name"
-          class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
+          class="group/item flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-200/10"
           :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
         >
           <a-icon-chevron-right class="size-[14px] shrink-0 text-gray-300 group-hover/item:text-blue-500 dark:group-hover/item:text-blue-700" />

package/components/navigation/header/NotificationsMenu.vue

@@ -14,9 +14,8 @@ defineProps<{
 }>()
 </script>
 <template>
-  <div class="flex w-[423px] flex-col gap-4 rounded-lg bg-white p-4 dark:bg-gray-900">
+  <div class="flex w-[423px] flex-col gap-4 rounded-md bg-white p-4 dark:bg-gray-900">
     <div class="flex items-center justify-between">
-      <!--      <h4 class="heading-04">{{ $t('header.notifications.title') }}</h4>-->
       <h4 class="heading-04">Уведомления</h4>
       <ADigitBadge :value="`${notifications?.length} новых`" size="lg" />
     </div>
@@ -26,7 +25,7 @@ defineProps<{
       <li
         v-for="(notification, idx) in notifications"
         :key="idx"
-        class="flex items-center justify-between gap-2.5 rounded-md bg-gray-50 px-4 py-2 dark:bg-gray-950"
+        class="flex items-center justify-between gap-2.5 rounded-sm bg-gray-50 px-4 py-2 dark:bg-gray-950"
       >
         <div class="rounded-full bg-blue-500 p-2">
           <icon-user />

package/components/navigation/header/ProductMenu.vue

@@ -2,10 +2,10 @@
 import NavList from '#adata-ui/components/navigation/header/NavList.vue'
 import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { PAGES } from '#adata-ui/shared/constans/pages'
 import { useUrls } from '#adata-ui/composables/useUrls'
 import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
 import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
 
 defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
@@ -38,7 +38,7 @@ function handleExportClick() {
     <div class="relative bg-white dark:bg-gray-950">
       <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
         <div class="flex justify-between gap-5">
-          <div class="grid min-w-0 flex-1 grid-cols-5 gap-x-3 gap-y-3">
+          <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
             <div
               v-for="(column, index) in catalogColumns"
               :key="index"
@@ -62,10 +62,10 @@ function handleExportClick() {
                   v-if="module.key === 'edo'"
                   #bottom
                 >
-                  <div class="mt-4 flex flex-col gap-4 rounded-xl bg-blue-700 dark:bg-blue-500 p-4 text-white normal-case">
+                  <div class="mt-4 flex flex-col gap-4 rounded-lg bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
                     <div class="flex items-center gap-3">
-                      <span class="p-[10px] bg-white rounded-[10px] dark:bg-gray-950">
-                        <AIconDownloadRounded class="size-5 text-blue-700 dark:text-blue-500" />
+                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
+                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
                       </span>
                       <span class="font-semibold text-white dark:text-gray-950">
                         {{ t('header.products.exportCard.title') }}
@@ -78,14 +78,14 @@ function handleExportClick() {
 
                     <a-button-v2
                       view="soft"
-                      class="!h-9 w-fit !bg-white dark:!bg-gray-950 text-blue-700 dark:text-blue-500"
+                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
                       size="sm"
                       :icon="AIconArrowRight"
                       icon-right
                       @click="handleExportClick"
                     >
                       <span class="text-sm">
-                      {{ t('header.products.exportCard.receive') }}
+                        {{ t('header.products.exportCard.receive') }}
                       </span>
                     </a-button-v2>
                   </div>

package/components/navigation/header/ProfileMenu.vue

@@ -39,23 +39,20 @@ function onReplenish() {
 </script>
 
 <template>
-  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-xl lg:border lg:border-gray-200 lg:dark:border-gray-800">
-    <!-- Subscription & balance card -->
+  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
     <div class="p-2">
-      <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
-        <!-- decorative glow for a "living" feel -->
+      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
         <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
 
         <div class="relative">
-          <!-- Tariff -->
-          <p class="text-[11px] font-medium uppercase tracking-wide text-white/70">
+          <p class="text-overline-medium uppercase text-white/70">
             {{ t('header.profile.tariff') }}
           </p>
           <div class="mt-0.5 flex items-center justify-between gap-2">
-            <p class="truncate text-lg font-bold leading-tight">
+            <p class="truncate text-h4">
               {{ rate }}
             </p>
-            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-inset ring-white/20">
+            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
               <span class="relative flex size-1.5 items-center justify-center">
                 <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
                 <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
@@ -64,10 +61,9 @@ function onReplenish() {
             </span>
           </div>
 
-          <!-- Email (mobile only — desktop shows it in the header trigger) -->
           <p
             v-if="email"
-            class="mt-1 truncate text-xs text-white/75 lg:hidden"
+            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
             data-test-id="profile-menu-email"
           >
             {{ email }}
@@ -75,42 +71,39 @@ function onReplenish() {
 
           <div class="my-2 h-px bg-white/15" />
 
-          <!-- Balance -->
           <div class="flex items-center justify-between gap-2">
-            <span class="text-xs text-white/80">{{ t('header.profile.currentBalance') }}</span>
-            <span class="text-base font-bold tabular-nums">{{ formattedBalance }} ₸</span>
+            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
+            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
           </div>
 
-          <!-- Usage stats (mobile only — desktop shows them in the header bar) -->
           <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
               <gauge class="size-4 shrink-0 text-white/80" />
               <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
                   {{ t('header.profile.requests') }}
                 </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
                   {{ limitRemaining }}
                 </p>
               </div>
             </div>
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
               <calendar class="size-4 shrink-0 text-white/80" />
               <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
                   {{ t('header.profile.daysLeft') }}
                 </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
                   {{ daysRemaining }}
                 </p>
               </div>
             </div>
           </div>
 
-          <!-- Top up -->
           <button
             type="button"
-            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-sm font-semibold text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
             @click="onReplenish"
           >
             <a-icon-plus-circle class="size-4" />
@@ -122,31 +115,29 @@ function onReplenish() {
       </div>
     </div>
 
-    <!-- Menu links -->
     <nav class="flex flex-col px-2 pb-2">
       <nuxt-link-locale
         v-for="item in items"
         :key="item.title"
-        class="group flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
         :to="item.to"
         :data-test-id="item?.dataTestId"
         target="_blank"
       >
-<!--        <span-->
-<!--          class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400"-->
-<!--        >-->
-<!--          <component-->
-<!--            :is="item.icon"-->
-<!--            class="size-4"-->
-<!--          />-->
-<!--        </span>-->
+        <!--        <span -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--        > -->
+        <!--          <component -->
+        <!--            :is="item.icon" -->
+        <!--            class="size-4" -->
+        <!--          /> -->
+        <!--        </span> -->
         <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
           {{ item.title }}
         </span>
       </nuxt-link-locale>
     </nav>
 
-    <!-- Footer: old version, theme (mobile), logout -->
     <div class="border-t border-gray-100 p-2 dark:border-gray-800">
       <a-change-version
         v-if="oldVersion"
@@ -156,7 +147,7 @@ function onReplenish() {
 
       <div
         v-if="!isLargeScreen"
-        class="flex items-center justify-between rounded-lg px-2.5 py-2 text-sm text-deepblue-900 dark:text-gray-200"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
       >
         <span>{{ t('header.profile.colorScheme') }}</span>
         <a-color-mode />
@@ -164,7 +155,7 @@ function onReplenish() {
 
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
         data-test-id="logout-button"
         @click="$emit('logout')"
       >

package/components/navigation/header/SystemNotification.vue

@@ -19,7 +19,6 @@ const message = useCookie('message')
 const systemMessage = ref<string | null>(null)
 const isOpen = ref(false)
 
-// API expects the legacy "counterparty" code instead of "pk".
 const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
 
 function localizedMessage(detail: SystemMessageDetail): string {
@@ -34,7 +33,6 @@ function localizedMessage(detail: SystemMessageDetail): string {
 }
 
 async function fetchNotification() {
-  // The cookie is set once the user dismisses the banner — skip the request afterwards.
   if (message.value !== undefined) return
 
   try {
@@ -74,7 +72,7 @@ onMounted(fetchNotification)
             <a-icon-info-circle
               class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
             />
-            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
+            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
           </div>
           <a-icon-x-mark
             class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"

package/components/navigation/pill-tabs/APillTabs.vue

@@ -115,14 +115,14 @@ const viewTypeValues: ViewType = {
 }
 
 const defaultClasses = (isDisabled: boolean) => [
-  'text-sm rounded-md outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm outline-none select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   isDisabled ? 'bg-deepblue-900/5 dark:bg-gray-200/5 text-gray-500 dark:text-gray-500' : '',
   props.view === 'transparent' && isDisabled ? 'bg-transparent' : '',
   viewTypeValues[props.view]['default'],
   props.block ? 'w-full' : ''
 ]
 const selectedClasses = () => [
-  'text-sm rounded-md select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
+  'text-sm rounded-sm select-none focus-visible:shadow-[0_0_0_4px#1B64B3]',
   viewTypeValues[props.view]['selected'],
   props.block ? 'w-full' : ''
 ]