update: game core flow pages

apps/web/src/components/Talent.css

@@ -4,28 +4,26 @@
     justify-content: space-between;
     align-items: center;
     padding: 0 1rem;
-    line-height: 2rem;
+    height: 2rem;
+    font-size: 1rem;
     gap: 1rem;
     color: var(--color);
     background: var(--background, var(--base-background-color));
     cursor: pointer;
     user-select: none;
     border: 0.0625rem solid var(--grade-color);
+    box-sizing: border-box;
     transition: all 0.2s ease-in-out;
-    &.talent-grade-0 { --grade-color: var(--color-grade-0); }
-    &.talent-grade-1 { --grade-color: var(--color-grade-1); }
-    &.talent-grade-2 { --grade-color: var(--color-grade-2); }
-    &.talent-grade-3 { --grade-color: var(--color-grade-3); }
     &.selected {
         --color: var(--base-background-color);
         --background: var(--grade-color);
         &:hover { --background: oklch(from var(--grade-color) calc(l + 0.1) c h); }
     }
     &:hover { --background: oklch(from var(--grade-color) calc(l + 0.5) c h); }
+    .talent-name { font-weight: bold; }
     .talent-description {
         color: oklch(from var(--color) calc(l + 0.1) c h);
-        font-size: 0.6rem;
-        align-self: flex-end;
+        font-size: 0.85rem;
         user-select: none;
         &::before { content: '['; margin-right: 0.125rem; }
         &::after { content: ']'; margin-left: 0.125rem; }

apps/web/src/components/Talent.tsx

@@ -1,6 +1,5 @@
 import type { Talent } from '@remake/data/talent'
 import talents from '@remake/data/talent'
-import cx from 'classnames'
 import './Talent.css'
 
 export interface TalentProps {
@@ -12,7 +11,7 @@ export function TalentComponent({ id, selected }: TalentProps) {
     if (!talent) return null
     const grade = talent?.grade ?? 0
     return (
-        <div className={cx('talent', `talent-grade-${grade}`, { selected })}>
+        <div className={`talent grade-${grade} ${selected ? 'selected' : ''}`}>
             <span className="talent-name">{talent.name}</span>
             <span className="talent-description">{talent.description}</span>
         </div>

apps/web/src/components/ThemeToggle.css

@@ -1,24 +1,5 @@
-.theme-toggle-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    border-radius: 50%;
-    position: fixed;
-    top: 0.5rem;
-    right: 0.5rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    -webkit-tap-highlight-color: transparent;
-    transition: background-color 0.3s;
-    --hover-color: rgba(0, 0, 0, 0.05);
-    &:hover { background-color: var(--hover-color);}
-}
-
 .theme-svg {
+    --svg-color: oklch(from var(--text-color, var(--base-text-color)) calc(l + 0.2) c h);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
     .sun-center, .sun-beams, .mask-cutter-group {
@@ -26,21 +7,19 @@
         transform-origin: center;
     }
     .mask-cutter-group { transform: translate(0.75rem, -0.75rem); }
-    .sun-center { fill: oklch(from var(--base-text-color) calc(l + 0.2) c h); }
-    .sun-beams { stroke: oklch(from var(--base-text-color) calc(l + 0.2) c h); }
+    .sun-center { 
+        transition: fill 0.2s ease-in-out;
+        fill: var(--svg-color); 
+    }
+    .sun-beams { 
+        transition: stroke 0.2s ease-in-out;
+        stroke: var(--svg-color); 
+    }
 }
 
 html[data-theme='dark'] {
-    .theme-toggle-btn { --hover-color: rgba(255, 255, 255, 0.1); }
     .mask-cutter-group { transform: translate(0, 0); }
     .theme-svg { transform: rotate(375deg); }
-    .sun-center {
-        transform: scale(1.5);
-        fill: #fbbf24;
-    }
-    .sun-beams {
-        opacity: 0;
-        transform: scale(0.6);
-        stroke: #fbbf24;
-    }
+    .sun-center { transform: scale(1.5); }
+    .sun-beams { opacity: 0; transform: scale(0.6); }
 }

apps/web/src/components/ThemeToggle.tsx

@@ -1,13 +1,31 @@
 import { useState, useEffect } from 'react'
 import './ThemeToggle.css'
 
+export const updateThemeColor = () => {
+    let metas = document.querySelectorAll('meta[name="theme-color"]')
+    if (!metas.length) return
+    const element = document.body
+    const end = Date.now() + 300
+    const update = () => {
+        const { backgroundColor } = getComputedStyle(element)
+        metas.forEach(meta => meta.setAttribute('content', backgroundColor))
+        if (Date.now() < end) requestAnimationFrame(update)
+    }
+    requestAnimationFrame(update)
+}
+
 export function ThemeToggle() {
-    const [isDark, setIsDark] = useState(
-        () => matchMedia('(prefers-color-scheme: dark)').matches,
-    )
+    const [isDark, setIsDark] = useState(() => {
+        const storedTheme = localStorage.getItem('theme')
+        if (storedTheme === 'dark') return true
+        if (storedTheme === 'light') return false
+        return matchMedia('(prefers-color-scheme: dark)').matches
+    })
 
     useEffect(() => {
         document.documentElement.dataset.theme = isDark ? 'dark' : 'light'
+        updateThemeColor()
+        localStorage.setItem('theme', isDark ? 'dark' : 'light')
     }, [isDark])
 
     return (