From 0a7244103994eba9aac01c7c622d11eb4da03c83 Mon Sep 17 00:00:00 2001
From: RainbowBird <rbxin2003@outlook.com>
Date: Wed, 30 Apr 2025 14:43:27 +0800
Subject: [PATCH] fix: airi-card style (#150)

---
 .../settings/airi-card/components/CardDetailDialog.vue      | 6 +++---
 .../pages/settings/airi-card/components/CardListItem.vue    | 2 +-
 .../settings/airi-card/components/DeleteCardDialog.vue      | 4 ++--
 .../stage-tamagotchi/src/pages/settings/airi-card/index.vue | 2 +-
 .../settings/airi-card/components/CardDetailDialog.vue      | 6 +++---
 .../pages/settings/airi-card/components/CardListItem.vue    | 2 +-
 .../settings/airi-card/components/DeleteCardDialog.vue      | 4 ++--
 apps/stage-web/src/pages/settings/airi-card/index.vue       | 2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
index 36da728e6..42664f46f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -166,8 +166,8 @@ const activeTab = computed({
 <template>
   <DialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
     <DialogPortal>
-      <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" />
-      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
+      <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
+      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
         <div v-if="selectedCard" class="w-full flex flex-col gap-5">
           <!-- Header with status indicator -->
           <div flex="~ col" gap-3>
@@ -177,7 +177,7 @@ const activeTab = computed({
                   <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
                     {{ selectedCard.name }}
                   </DialogTitle>
-                  <div v-if="isActive" class="bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-400 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+                  <div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
                     <div i-solar:check-circle-bold-duotone text-xs />
                     {{ t('settings.pages.card.active_badge') }}
                   </div>
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
index bff1ca951..c728cf398 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/CardListItem.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     transition="all ease-in-out duration-400"
     before="content-empty absolute inset-0 z-0 w-25% h-full transition-all duration-400 ease-in-out bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0 mask-image-[linear-gradient(120deg,white_100%)] opacity-0"
-    hover="before:(w-50% opacity-100 bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent)"
+    hover="before:(opacity-100 bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent)"
     @click="emit('select')"
   >
     <!-- Card content -->
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
index f2276f74e..1138e87b2 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -40,9 +40,9 @@ function handleConfirm() {
 <template>
   <AlertDialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
     <AlertDialogPortal>
-      <AlertDialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50" />
+      <AlertDialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50" />
       <AlertDialogContent
-        class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
+        class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
       >
         <AlertDialogTitle class="mb-4 text-xl font-bold">
           {{ t('settings.pages.card.delete_card') }}
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
index 885cbe891..1c73d75aa 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
@@ -168,7 +168,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
 
       <!-- Sort options -->
       <div class="relative flex flex-row justify-start gap-2 lg:flex-col">
-        <div class="top-[-32px] z-100 whitespace-nowrap text-sm text-neutral-500 leading-10 lg:absolute dark:text-neutral-400">
+        <div class="top-[-32px] whitespace-nowrap text-sm text-neutral-500 leading-10 lg:absolute dark:text-neutral-400">
           {{ t('settings.pages.card.sort_by') }}:
         </div>
         <Select
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
index 36da728e6..42664f46f 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -166,8 +166,8 @@ const activeTab = computed({
 <template>
   <DialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
     <DialogPortal>
-      <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" />
-      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
+      <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
+      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
         <div v-if="selectedCard" class="w-full flex flex-col gap-5">
           <!-- Header with status indicator -->
           <div flex="~ col" gap-3>
@@ -177,7 +177,7 @@ const activeTab = computed({
                   <DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
                     {{ selectedCard.name }}
                   </DialogTitle>
-                  <div v-if="isActive" class="bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-400 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+                  <div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
                     <div i-solar:check-circle-bold-duotone text-xs />
                     {{ t('settings.pages.card.active_badge') }}
                   </div>
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue b/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
index bff1ca951..c728cf398 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/CardListItem.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     transition="all ease-in-out duration-400"
     before="content-empty absolute inset-0 z-0 w-25% h-full transition-all duration-400 ease-in-out bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0 mask-image-[linear-gradient(120deg,white_100%)] opacity-0"
-    hover="before:(w-50% opacity-100 bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent)"
+    hover="before:(opacity-100 bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent)"
     @click="emit('select')"
   >
     <!-- Card content -->
diff --git a/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
index f2276f74e..1138e87b2 100644
--- a/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -40,9 +40,9 @@ function handleConfirm() {
 <template>
   <AlertDialogRoot :open="modelValue" @update:open="emit('update:modelValue', $event)">
     <AlertDialogPortal>
-      <AlertDialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-50 bg-black/50" />
+      <AlertDialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50" />
       <AlertDialogContent
-        class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-50 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
+        class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
       >
         <AlertDialogTitle class="mb-4 text-xl font-bold">
           {{ t('settings.pages.card.delete_card') }}
diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index 885cbe891..1c73d75aa 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -168,7 +168,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
 
       <!-- Sort options -->
       <div class="relative flex flex-row justify-start gap-2 lg:flex-col">
-        <div class="top-[-32px] z-100 whitespace-nowrap text-sm text-neutral-500 leading-10 lg:absolute dark:text-neutral-400">
+        <div class="top-[-32px] whitespace-nowrap text-sm text-neutral-500 leading-10 lg:absolute dark:text-neutral-400">
           {{ t('settings.pages.card.sort_by') }}:
         </div>
         <Select