jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ux: 優化翻卡模式和錯誤回報按鈕的視覺設計 

- 移除翻卡背面的滾動條，讓內容自然延伸
- 將錯誤回報按鈕從紅色改為灰色，降低視覺干擾
- 提升整體用戶體驗的視覺和諧度

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
鄭沛軒 2025-09-19 13:50:36 +08:00
parent 8a889a9d9c
commit 0bfb08a97b
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/app/learn/page.tsx
View File

@ -270,7 +270,7 @@ export default function LearnPage() {
setReportingCard(currentCard)
setShowReportModal(true)
}}
className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
title="回報錯誤"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -325,8 +325,8 @@ export default function LearnPage() {
{/* Back of card */}
<div
className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8 overflow-y-auto"
style={{
className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8"
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)'
}}
@ -407,7 +407,7 @@ export default function LearnPage() {
setReportingCard(currentCard)
setShowReportModal(true)
}}
className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
title="回報錯誤"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -481,7 +481,7 @@ export default function LearnPage() {
setReportingCard(currentCard)
setShowReportModal(true)
}}
className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
title="回報錯誤"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -619,7 +619,7 @@ export default function LearnPage() {
setReportingCard(currentCard)
setShowReportModal(true)
}}
className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
title="回報錯誤"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -696,7 +696,7 @@ export default function LearnPage() {
setReportingCard(currentCard)
setShowReportModal(true)
}}
className="text-red-500 hover:text-red-600 text-sm flex items-center gap-1"
className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
title="回報錯誤"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">