From 687f7f4a3be39820d08a67f448527b4022ac4c06 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 7 Mar 2025 11:01:00 +0800
Subject: [PATCH] style(stage-web): updated design

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 apps/stage-web/src/App.vue                    |  4 +-
 .../src/components/Menu/IconItem.vue          | 26 +++++-----
 .../src/pages/settings/modules/index.vue      | 50 ++++++++-----------
 .../src/components/StageTransitionGroup.vue   |  2 +-
 4 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index 7dafc387e..df92f76d4 100644
--- a/apps/stage-web/src/App.vue
+++ b/apps/stage-web/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { StageTransitionGroup } from '@proj-airi/ui-transitions'
+import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -8,6 +9,7 @@ import { RouterView } from 'vue-router'
 
 const i18n = useI18n()
 const settings = storeToRefs(useSettings())
+const isDark = useDark()
 
 watch(settings.language, () => {
   i18n.locale.value = settings.language.value
@@ -19,7 +21,7 @@ watch(settings.language, () => {
     primary-color="#FF57C8"
     secondary-color="#946BFF"
     tertiary-color="#121212"
-    :colors="['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
+    :colors="!isDark ? ['#FF57C8', '#946BFF', '#64BCFF', '#FFFFFF'] : ['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
     :z-index="100"
   >
     <RouterView />
diff --git a/apps/stage-web/src/components/Menu/IconItem.vue b/apps/stage-web/src/components/Menu/IconItem.vue
index ce7f2b46c..bd2a3ad38 100644
--- a/apps/stage-web/src/components/Menu/IconItem.vue
+++ b/apps/stage-web/src/components/Menu/IconItem.vue
@@ -10,32 +10,32 @@ defineProps<{
 
 <template>
   <RouterLink
-    flex="~ row" bg="neutral-100 dark:neutral-800" hover="bg-neutral-200 dark:bg-neutral-700"
-    class="[&_.settings-section-icon]:hover:scale-120" transition="all ease-in-out duration-200" relative w-full
-    items-center overflow-hidden rounded-lg p-5 text-left
+    flex="~ row" bg="white dark:neutral-800"
+    border="neutral-100 dark:neutral-700 hover:pink-300 dark:hover:pink-200/40 solid 2"
+    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"
+    class="[&_.settings-section-icon]:hover:scale-120 [&_.settings-section-description]:hover:text-pink-400/80 [&_.settings-section-icon]:hover:text-pink-200 [&_.settings-section-title]:hover:text-pink-500 dark:[&_.settings-section-icon]:hover:text-pink-200/40 dark:[&_.settings-section-title]:hover:text-pink-400"
+    transition="all ease-in-out duration-200" relative w-full items-center overflow-hidden rounded-lg p-5 text-left
     :to="to"
   >
     <div z-1 flex-1>
-      <div text-lg font-bold>
+      <div text-lg font-bold class="settings-section-title" transition="all ease-in-out duration-200">
         {{ title }}
       </div>
-      <div text="sm neutral-500 dark:neutral-400">
+      <div
+        text="sm neutral-500 dark:neutral-400" class="settings-section-description"
+        transition="all ease-in-out duration-200"
+      >
         <span>{{ description }}</span>
       </div>
     </div>
     <template v-if="typeof icon === 'string'">
       <div
-        class="settings-section-icon"
-        transition="all ease-in-out duration-500"
-        absolute right-0 size-24 translate-y-4
-        text="neutral-400/50 dark:neutral-600/50"
-        :class="[icon]"
+        class="settings-section-icon" transition="all ease-in-out duration-500" absolute right-0 size-24
+        translate-y-4 text="neutral-400/50 dark:neutral-600/50" :class="[icon]"
       />
     </template>
     <template v-if="iconTemplate">
-      <slot
-        name="icon"
-      />
+      <slot name="icon" />
     </template>
   </RouterLink>
 </template>
diff --git a/apps/stage-web/src/pages/settings/modules/index.vue b/apps/stage-web/src/pages/settings/modules/index.vue
index 718b483da..b86a5a539 100644
--- a/apps/stage-web/src/pages/settings/modules/index.vue
+++ b/apps/stage-web/src/pages/settings/modules/index.vue
@@ -109,37 +109,29 @@ const modulesList = computed<Module[]>(() => [
   </div>
   <div grid="~ cols-1 gap-2">
     <div
-      v-for="module in modulesList" :key="module.id"
-      bg="neutral-300/50 dark:neutral-600" w-full of-hidden rounded-xl
+      v-for="module in modulesList" :key="module.id" bg="neutral-300/50 dark:neutral-600" w-full of-hidden rounded-xl
       flex="~ col 1"
     >
-      <template v-if="typeof module.icon === 'string' && module.id !== 'game-minecraft'">
-        <IconItem :title="module.name" :description="module.description" :icon="module.icon" :to="module.to" />
-      </template>
-      <template v-else-if="typeof module.icon === 'string' && module.id === 'game-minecraft'">
-        <IconItem :title="module.name" :description="module.description" icon-template :to="module.to">
-          <template #icon>
-            <div
-              class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
-              transition="all ease-in-out duration-500"
-              absolute right-0 size-24 translate-y-4
-              :class="module.icon"
-            />
-          </template>
-        </IconItem>
-      </template>
-      <template v-else-if="typeof module.icon === 'object'">
-        <IconItem :title="module.name" :description="module.description" icon-template :to="module.to">
-          <template #icon>
-            <img
-              :src="module.icon.imagePath"
-              class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
-              transition="all ease-in-out duration-500"
-              absolute right-0 size-24 translate-y-4
-            >
-          </template>
-        </IconItem>
-      </template>
+      <RouterLink
+        :to="module.to" bg="neutral-100 dark:neutral-800" hover="bg-neutral-200 dark:bg-neutral-700"
+        transition="all ease-in-out duration-250" h-full w-full flex items-center gap-1.5 rounded-lg px-4 py-5
+        outline-none class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+      >
+        <div flex="~ col 1" gap-1.5>
+          <div
+            v-if="typeof module.icon === 'string'" :class="module.icon" class="provider-icon size-10"
+            transition="filter duration-250 ease-in-out"
+          />
+          <img
+            v-else
+            :src="module.icon.imagePath" class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
+            transition="all ease-in-out duration-500" absolute right-0 size-24 translate-y-4
+          >
+          <div>
+            {{ module.name }}
+          </div>
+        </div>
+      </RouterLink>
       <div p-2>
         <div v-if="module.configured" size-3 bg="green-500 dark:green-600" rounded-full />
         <div v-else size-3 bg="neutral-400 dark:neutral-500" rounded-full />
diff --git a/packages/ui-transitions/src/components/StageTransitionGroup.vue b/packages/ui-transitions/src/components/StageTransitionGroup.vue
index 1a63dabaf..30dbe049f 100644
--- a/packages/ui-transitions/src/components/StageTransitionGroup.vue
+++ b/packages/ui-transitions/src/components/StageTransitionGroup.vue
@@ -92,7 +92,7 @@ const transitions = shallowRef<Record<string, TransitionOptions>>({
   },
   'bubble-wave-out': {
     component: BubbleWaveOutTransition,
-    duration: 850,
+    duration: 1000,
   },
 })