adata-ui 2.1.40-beta.3 → 2.1.40-beta.5

package/components/elements/button/AButtonV2.vue

@@ -3,9 +3,11 @@ import type { Component } from 'vue'
 
 type View = 'solid' | 'outline' | 'ghost' | 'soft'
 type Size = 'sm' | 'md' | 'lg'
+type Color = 'blue' | 'green' | 'red' | 'gray'
 
 const props = withDefaults(defineProps<{
   view?: View
+  color?: Color
   size?: Size
   icon?: Component
   iconRight?: boolean
@@ -15,6 +17,7 @@ const props = withDefaults(defineProps<{
   type?: 'button' | 'submit' | 'reset'
 }>(), {
   view: 'solid',
+  color: 'blue',
   size: 'md',
   iconRight: false,
   loading: false,
@@ -25,11 +28,31 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
-const VIEW_CLASS: Record<View, string> = {
-  solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
-  outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
-  ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
-  soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+const VIEW_CLASS: Record<Color, Record<View, string>> = {
+  blue: {
+    solid: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow-md active:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-400',
+    outline: 'border border-blue-500 bg-white text-blue-700 hover:bg-blue-50 active:bg-blue-100 dark:border-blue-500 dark:bg-gray-900 dark:text-blue-300 dark:hover:bg-blue-950/40',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-blue-50 text-blue-700 hover:bg-blue-100 active:bg-blue-200/70 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-900/40',
+  },
+  green: {
+    solid: 'bg-green-600 text-white shadow-sm hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:bg-green-500 dark:hover:bg-green-400',
+    outline: 'border border-green-500 bg-white text-green-700 hover:bg-green-50 active:bg-green-100 dark:border-green-500 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-950/40',
+    ghost: 'text-green-700 hover:bg-green-50 active:bg-green-100 dark:text-green-300 dark:hover:bg-green-950/40',
+    soft: 'bg-green-50 text-green-700 hover:bg-green-100 active:bg-green-200/70 dark:bg-green-950/40 dark:text-green-300 dark:hover:bg-green-900/40',
+  },
+  red: {
+    solid: 'bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow-md active:bg-red-800 dark:bg-red-500 dark:hover:bg-red-400',
+    outline: 'border border-red-500 bg-white text-red-700 hover:bg-red-50 active:bg-red-100 dark:border-red-500 dark:bg-gray-900 dark:text-red-300 dark:hover:bg-red-950/40',
+    ghost: 'text-red-700 hover:bg-red-50 active:bg-red-100 dark:text-red-300 dark:hover:bg-red-950/40',
+    soft: 'bg-red-50 text-red-700 hover:bg-red-100 active:bg-red-200/70 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-900/40',
+  },
+  gray: {
+    solid: 'bg-gray-600 text-white shadow-sm hover:bg-gray-700 hover:shadow-md active:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-400',
+    outline: 'border border-gray-300 bg-white text-deepblue-900 hover:border-gray-400 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:bg-white/[0.06]',
+    ghost: 'text-deepblue-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-100 dark:hover:bg-white/[0.06] dark:active:bg-white/[0.1]',
+    soft: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-200/70 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-700/60',
+  },
 }
 
 const SIZE_CLASS: Record<Size, string> = {
@@ -56,7 +79,7 @@ function onClick(event: MouseEvent) {
     :disabled="disabled || loading"
     class="button-v2 inline-flex select-none items-center justify-center rounded-xl font-semibold transition-all duration-150 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
-      VIEW_CLASS[view],
+      VIEW_CLASS[color][view],
       SIZE_CLASS[size],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',

package/components/elements/leave-note/ALeaveNote.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import * as z from 'zod'
 import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+import AButtonV2 from '#adata-ui/components/elements/button/AButtonV2.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   isError?: boolean,
   errorText?: string
-}>()
+}>(), {
+  isError: false,
+  errorText: '',
+})
 
 const emit = defineEmits<{
+  (e: 'onCancel'): void
   (e: 'onSubmit'): void
 }>()
 
@@ -30,6 +35,12 @@ const { validation, getError } = useUIValidation(
   submitted,
 )
 
+function onCancel() {
+  submitted.value = false
+  note.value = ''
+  emit('onCancel')
+}
+
 async function onSubmit() {
   submitted.value = true
   if (validation.value) return
@@ -48,31 +59,41 @@ defineExpose({
     </p>
     <a-textarea
       v-model="note"
+      class="min-h-[120px]"
+      color-classes="bg-deepblue-900/5 outline outline-1 outline-gray-200 dark:outline-gray-600 dark:bg-gray-200/5 !rounded-[10px]"
+      size="sm"
+      resizeable="y"
       :label="t('forms.leaveNote.placeholder')"
       :error="getError('note')"
-      class="mb-2 min-h-[120px]"
-      resizeable="none"
-      clearable
-      required
     >
       <template #alert>
         <a-alert
-          v-if="isError || getError('note')"
+          v-if="isError"
           color="red"
           class="mt-1"
         >
-          {{ getError('note') || (isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '') }}
+          {{ isError ? (!!errorText ? errorText : t('forms.leaveNote.limit')) : '' }}
         </a-alert>
       </template>
     </a-textarea>
-    <a-button
-      :disabled="!note.trim() && isLoading"
-      class="w-full sm:w-auto"
-      size="lg"
-      :loading="isLoading"
-      @click="onSubmit"
-    >
-      {{ t('actions.send') }}
-    </a-button>
+    <div class="mt-2 flex w-full justify-end items-center gap-2 md:gap-[10px]">
+      <a-button-v2
+        class="w-full sm:w-auto"
+        view="outline"
+        size="md"
+        @click="onCancel"
+      >
+        {{ t('actions.cancel') }}
+      </a-button-v2>
+      <a-button-v2
+        :disabled="!note.trim() && isLoading"
+        class="w-full sm:w-auto"
+        size="md"
+        :loading="isLoading"
+        @click="onSubmit"
+      >
+        {{ t('actions.send') }}
+      </a-button-v2>
+    </div>
   </div>
 </template>

package/components/elements/star-rating/AStarRating.vue

@@ -18,6 +18,8 @@ interface Props {
   fontSize?: number;
   error?: string | boolean;
   errorSize?: 'sm' | 'lg';
+  hideValue?: boolean;
+  hideEmptyStars?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +34,9 @@ const props = withDefaults(defineProps<Props>(), {
   ratingPlacement: 'left',
   fontSize: 14,
   error: false,
-  errorSize: 'lg'
+  errorSize: 'lg',
+  hideValue: false,
+  hideEmptyStars: false
 })
 
 const fillLevel = ref<number[]>([])
@@ -51,6 +55,10 @@ const roundedRating = computed(() => {
 })
 const shouldRound = computed(() => ratingSelected.value || props.roundStartRating)
 
+const visibleStarsCount = computed(() => {
+  if (!props.hideEmptyStars) return props.max
+  return Math.min(props.max, Math.max(1, Math.ceil(currentRating.value)))
+})
 
 watch(modelValue, (e)=>{
   currentRating.value = e
@@ -105,7 +113,7 @@ createStars(shouldRound.value)
   <div>
     <div class="w-full flex items-center gap-2">
       <span
-        v-if="ratingPlacement === 'left'"
+        v-if="ratingPlacement === 'left' && !hideValue"
         class="text-gray-600 dark:text-gray-300 mt-px"
         :style="{fontSize: `${fontSize}px`}"
       >
@@ -118,7 +126,7 @@ createStars(shouldRound.value)
         @mouseleave="resetRating"
       >
         <star
-          v-for="n in max"
+          v-for="n in visibleStarsCount"
           :key="n"
           :fill="fillLevel[n-1]"
           :size="starSize"
@@ -127,7 +135,7 @@ createStars(shouldRound.value)
         />
       </div>
       <span
-        v-if="ratingPlacement === 'right'"
+        v-if="ratingPlacement === 'right' && !hideValue"
         class="text-sm text-gray-600 dark:text-gray-300 mt-px"
       >
         {{ modelValue }}

package/components/elements/status-badge-v2/StatusBadgeV2.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ name: 'StatusBadgeV2', inheritAttrs: false })
+
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'inverted',
+  size: 'sm',
+})
+
+const base
+  = 'inline-flex w-fit items-center justify-center gap-1.5 rounded-full font-semibold select-none'
+
+const sizeClasses: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[11px] leading-none',
+  sm: 'px-2.5 py-1 text-xs leading-none',
+  md: 'px-3 py-1.5 text-sm',
+  lg: 'px-4 py-2 text-base',
+}
+
+const typeClasses: Record<BadgeView, Partial<Record<BadgeType, string>>> = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:text-gray-100',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-deepblue-900 text-white dark:bg-gray-200/10 dark:text-gray-200',
+    orange: 'bg-orange-600 text-white dark:text-gray-100',
+  },
+  inverted: {
+    primary: 'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500',
+    success: 'bg-green-500/15 text-green-600 dark:bg-green-400/15 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400',
+    warning: 'bg-yellow-400/15 text-yellow-500 dark:bg-yellow-400/15 dark:text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:bg-gray-200/10 dark:text-gray-300',
+    orange: 'bg-orange-600/10 text-orange-600 dark:text-orange-500',
+  },
+  transparent: {
+    primary: 'bg-transparent text-blue-700 dark:text-blue-500',
+    success: 'bg-transparent text-green-600 dark:text-green-400',
+    danger: 'bg-transparent text-red-500 dark:text-red-400',
+    warning: 'bg-transparent text-yellow-500 dark:text-yellow-400',
+    gray: 'bg-transparent text-gray-600 dark:text-gray-300',
+    orange: 'bg-transparent text-orange-600 dark:text-orange-500',
+  },
+}
+
+const attrs = useAttrs()
+
+// twMerge resolves Tailwind conflicts: any class passed via `class` wins over
+// the defaults below, so padding / rounded / bg / text can all be overridden.
+const classes = computed(() =>
+  twMerge(
+    base,
+    sizeClasses[props.size],
+    typeClasses[props.view][props.type],
+    attrs.class as string,
+  ),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="{ ...$attrs, class: undefined }">
+    <slot name="point" />
+    <slot />
+  </div>
+</template>

package/components/forms/feedback-form/FeedbackForm.vue

@@ -152,26 +152,26 @@ onMounted(() => {
     </AButton>
   </section>
 
-  <a-modal
+  <a-modal-v2
     v-model="isModalOpen"
     width="424px"
     @close="isModalOpen = false"
   >
-    <div class="flex flex-col items-center gap-5">
-      <h4 class="heading-04">
+    <div class="flex flex-col items-center gap-4 px-6 py-4">
+      <a-ill-mail />
+      <h4 class="text-[18px] font-semibold">
         {{ t('forms.feedback.modalTitle') }}
       </h4>
-      <a-ill-mail />
       <p class="body-400 max-[352xp]">
         {{ t('forms.feedback.modalSubtitle') }}
       </p>
-      <AButton
-        block
+      <a-button-v2
         view="outline"
+        block
         @click="isModalOpen = false"
       >
         {{ t('forms.feedback.close') }}
-      </AButton>
+      </a-button-v2>
     </div>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/forms/input/AInputV2.vue

@@ -257,7 +257,7 @@ const layoutClass = computed(() => {
   if (!props.label) {
     return props.size === 'md' ? 'h-10 py-1.5' : 'h-9 py-1.5'
   }
-  return props.size === 'md' ? 'h-10 pt-3 pb-1' : 'h-9 pt-2 pb-1'
+  return props.size === 'md' ? 'h-10 pt-4 pb-0.5' : 'h-9 pt-3 pb-0.5'
 })
 
 const iconOffsetClass = computed(() => {

package/components/forms/input/textarea/ATextareaV2.vue

@@ -0,0 +1,248 @@
+<script lang="ts" setup>
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  readonly: false,
+  error: undefined,
+  size: 'md',
+  variant: 'default',
+  rows: 4,
+  resize: 'vertical',
+  maxlength: undefined,
+  autoResize: false,
+  inputId: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'focus', ev: FocusEvent): void
+  (e: 'blur', ev: FocusEvent): void
+}>()
+
+interface Props {
+  label?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  error?: string | string[]
+  size?: 'sm' | 'md'
+  variant?: 'default' | 'gray' | 'blue'
+  rows?: number
+  resize?: 'none' | 'vertical' | 'both'
+  maxlength?: number
+  autoResize?: boolean
+  inputId?: string
+}
+
+const modelValue = defineModel<string>({ default: '' })
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const isFocused = ref(false)
+
+const internalId = useId()
+const inputId = computed(() => props.inputId ?? `textarea-v2-${internalId}`)
+
+const hasValue = computed(() => modelValue.value != null && modelValue.value !== '')
+const hasError = computed(() => Array.isArray(props.error) ? props.error.length > 0 : !!props.error)
+const isLabelFloated = computed(() => hasValue.value || isFocused.value)
+
+const errorMessages = computed(() => {
+  if (!props.error) return [] as string[]
+  return Array.isArray(props.error) ? props.error : [props.error]
+})
+
+const fieldClass = computed(() => {
+  if (props.disabled) {
+    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
+  }
+  if (props.variant === 'gray') {
+    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
+  }
+  if (props.variant === 'blue') {
+    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
+  }
+  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
+})
+
+const resizeClass = computed(() => {
+  if (props.autoResize) return 'resize-none'
+  switch (props.resize) {
+    case 'none': return 'resize-none'
+    case 'both': return 'resize'
+    case 'vertical':
+    default: return 'resize-y'
+  }
+})
+
+const paddingClass = computed(() => {
+  // Паддинг постоянный (не зависит от фокуса/значения) — textarea не меняет размер при фокусе.
+  const pt = !props.label ? 'pt-2.5' : (props.size === 'md' ? 'pt-4' : 'pt-3.5')
+  const pb = props.maxlength ? 'pb-6' : (!props.label ? 'pb-2.5' : (props.size === 'md' ? 'pb-2' : 'pb-1.5'))
+  return `px-4 ${pt} ${pb}`
+})
+
+const attrs = useAttrs()
+const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+const inputAttrs = computed(() => {
+  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
+  return rest
+})
+
+function adjustHeight() {
+  const el = textareaRef.value
+  if (!props.autoResize || !el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onFocus(ev: FocusEvent) {
+  isFocused.value = true
+  emit('focus', ev)
+}
+function onBlur(ev: FocusEvent) {
+  isFocused.value = false
+  emit('blur', ev)
+}
+
+function focus() {
+  textareaRef.value?.focus()
+}
+function blur() {
+  textareaRef.value?.blur()
+}
+
+watch(modelValue, () => nextTick(adjustHeight))
+onMounted(adjustHeight)
+
+defineExpose({ focus, blur, textareaRef })
+</script>
+
+<template>
+  <div class="textarea-v2 relative w-full text-sm" v-bind="wrapperAttrs">
+    <div
+      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
+      :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
+    >
+      <label
+        v-if="label"
+        :for="inputId"
+        :data-size="size"
+        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-gray-500 dark:text-gray-400"
+        :class="{ 'textarea-v2__label--floated': isLabelFloated }"
+      >
+        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
+      </label>
+
+      <textarea
+        :id="inputId"
+        ref="textareaRef"
+        v-model="modelValue"
+        :rows="rows"
+        :maxlength="maxlength"
+        :placeholder="(isLabelFloated || !label) ? placeholder : ''"
+        :disabled="disabled"
+        :readonly="readonly"
+        :tabindex="disabled ? -1 : 0"
+        class="textarea-v2__input text-deepblue-900 block w-full bg-transparent leading-snug outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
+        :class="[resizeClass, paddingClass]"
+        v-bind="inputAttrs"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+
+      <span
+        v-if="maxlength"
+        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-[10px] text-gray-400 dark:text-gray-500"
+      >
+        {{ modelValue?.length ?? 0 }}/{{ maxlength }}
+      </span>
+    </div>
+
+    <transition
+      enter-active-class="textarea-v2__error-enter-active"
+      enter-from-class="textarea-v2__error-enter-from"
+      enter-to-class="textarea-v2__error-enter-to"
+      leave-active-class="textarea-v2__error-leave-active"
+      leave-from-class="textarea-v2__error-leave-from"
+      leave-to-class="textarea-v2__error-leave-to"
+    >
+      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
+        <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.textarea-v2__field--error {
+  border-color: theme('colors.red.500');
+}
+
+.textarea-v2__field--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.textarea-v2__field--disabled .textarea-v2__input {
+  cursor: not-allowed;
+}
+
+.textarea-v2__input {
+  scrollbar-width: thin;
+}
+
+.textarea-v2__label {
+  top: 26px;
+  transform: translateY(-50%);
+  font-size: 14px;
+  line-height: 1.3;
+  transition:
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    color 300ms ease-out;
+}
+
+.textarea-v2__label[data-size="sm"] {
+  top: 24px;
+}
+
+.textarea-v2__label--floated {
+  font-size: 10px;
+  transform: translateY(-21px);
+}
+
+.textarea-v2__label--floated[data-size="sm"] {
+  transform: translateY(-19px);
+}
+
+.textarea-v2__error-enter-active {
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.textarea-v2__error-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.textarea-v2__error-leave-active {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.textarea-v2__error-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .textarea-v2__label,
+  .textarea-v2__error-enter-active,
+  .textarea-v2__error-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/modals/AnotherDeviceModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAnotherDeviceModal } from '#adata-ui/composables/modalsState'
 import { useUrls } from '#adata-ui/composables/useUrls'
+
 const { t, locale } = useI18n()
 const localePath = useLocalePath()
 
@@ -14,47 +14,46 @@ function onClose() {
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    :title="t('modals.another_device_modal.title')"
+    width="424px"
     @close="onClose"
   >
-    <div class="flex flex-col items-center justify-center gap-5">
+    <div class="flex flex-col items-center justify-center gap-4 px-6 pb-4">
       <a-ill-phone-check />
       <p class="body-400 text-center">
         {{ t('modals.another_device_modal.info') }}
       </p>
       <div
-        class="body-400 flex gap-2 rounded-lg border border-red-500 dark:border-red-400 bg-[#FDECEB] dark:bg-red-400/10 p-4 text-red-500 dark:text-red-400"
+        class="body-400 flex gap-2 rounded-lg border border-red-500 bg-[#FDECEB] p-3 text-red-500 dark:border-red-400 dark:bg-red-400/10 dark:text-red-400"
       >
         <a-icon-warning-triangle
-          class="shrink-0"
-          width="24"
-          height="24"
+          class="size-4 shrink-0"
         />
-        <p>
+        <span class="text-xs">
           {{ t('modals.another_device_modal.alert') }}
-        </p>
+        </span>
       </div>
     </div>
     <template #footer>
       <div class="flex w-full gap-2">
-        <a-button
+        <a-button-v2
           view="outline"
-          class="w-full"
+          color="blue"
+          block
           @click="onClose"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button
-          class="w-full"
+        </a-button-v2>
+        <a-button-v2
+          block
           :to="buildLocalizedUrl(locale, landing)"
         >
           {{ t('modals.buttons.toMain') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped></style>