oh
/
iykyka
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): soften Quiet Ink dark chrome on tone onboarding 

Use teal containers for sample indices instead of amber secondary,
and mute dark-mode teal so it reads calmer on charcoal.

Co-authored-by: okuma <o0kuma@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-07-31 09:08:07 +00:00
parent ca4aeb059d
commit 0b4dffd405
No known key found for this signature in database
2 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
mobile/lib/screens/onboarding_tone_screen.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import '../state/session_state.dart'; import '../state/session_state.dart';
import '../theme/app_theme.dart';
import '../widgets/primary_gradient_button.dart'; import '../widgets/primary_gradient_button.dart';
/// Phase 1 onboarding skeleton: capture a few style samples locally. /// Phase 1 onboarding skeleton: capture a few style samples locally.
@ -61,27 +62,29 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
), ),
body: SafeArea( body: SafeArea(
child: ListView( child: ListView(
padding: const EdgeInsets.all(24), padding: const EdgeInsets.fromLTRB(24, 8, 24, 32),
children: [ children: [
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: Container( child: Container(
width: 56, width: 52,
height: 56, height: 52,
decoration: BoxDecoration( decoration: BoxDecoration(
color: scheme.primary, color: scheme.primaryContainer,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(14),
), ),
child: Icon(Icons.record_voice_over_outlined, size: 28, color: scheme.onPrimary), child: Icon(Icons.record_voice_over_outlined, size: 26, color: scheme.primary),
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 18),
Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall), Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
'자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다. ' '자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다.',
'최종 문구·수집 방식은 사람 PoC 이후에 다듬습니다.', style: theme.textTheme.bodyMedium?.copyWith(
style: theme.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant), color: scheme.onSurfaceVariant,
height: 1.45,
),
), ),
const SizedBox(height: 28), const SizedBox(height: 28),
for (var i = 0; i < _samples.length; i++) ...[ for (var i = 0; i < _samples.length; i++) ...[
@ -92,16 +95,16 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
labelText: '샘플 ${i + 1}', labelText: '샘플 ${i + 1}',
hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null, hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null,
prefixIcon: Padding( prefixIcon: Padding(
padding: const EdgeInsets.only(left: 4, right: 4, top: 4), padding: const EdgeInsets.only(left: 10, right: 4),
child: CircleAvatar( child: CircleAvatar(
radius: 12, radius: 12,
backgroundColor: scheme.secondaryContainer, backgroundColor: scheme.primaryContainer,
child: Text( child: Text(
'${i + 1}', '${i + 1}',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: scheme.onSecondaryContainer, color: scheme.onPrimaryContainer,
), ),
), ),
), ),
@ -110,11 +113,17 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
], ],
const SizedBox(height: 12), const SizedBox(height: 8),
PrimaryGradientButton( PrimaryGradientButton(
label: '이 말투로 시작', label: '이 말투로 시작',
onPressed: () => _save(markDone: true), onPressed: () => _save(markDone: true),
), ),
const SizedBox(height: 12),
Text(
'말투는 나중에 메뉴에서 다시 수정할 수 있습니다.',
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(color: scheme.onSurfaceVariant),
),
], ],
), ),
), ),

9
mobile/lib/theme/app_theme.dart
View File

@ -24,9 +24,10 @@ class AppTheme {
static const inkDark = Color(0xFFF2F1EF); static const inkDark = Color(0xFFF2F1EF);
static const mutedDark = Color(0xFF9B9893); static const mutedDark = Color(0xFF9B9893);
static const lineDark = Color(0xFF2A2D36); static const lineDark = Color(0xFF2A2D36);
static const tealBright = Color(0xFF2DD4BF); /// Dark accent — muted teal (avoid neon cyan against charcoal).
static const tealSoftDark = Color(0xFF143D3A); static const tealBright = Color(0xFF5EBBB0);
static const twinAmberDark = Color(0xFFFBBF24); static const tealSoftDark = Color(0xFF1A3331);
static const twinAmberDark = Color(0xFFE0A84A);
/// Kept for call sites that still reference a "brand" fill — solid teal, not a rainbow. /// Kept for call sites that still reference a "brand" fill — solid teal, not a rainbow.
static const brandGradient = LinearGradient( static const brandGradient = LinearGradient(
@ -70,7 +71,7 @@ class AppTheme {
brightness == Brightness.dark ? Colors.black.withValues(alpha: 0.35) : const Color(0xFF1C1B1A).withValues(alpha: 0.06); brightness == Brightness.dark ? Colors.black.withValues(alpha: 0.35) : const Color(0xFF1C1B1A).withValues(alpha: 0.06);
static Color mineBubble(Brightness brightness) => static Color mineBubble(Brightness brightness) =>
brightness == Brightness.dark ? tealSoftDark : teal; brightness == Brightness.dark ? const Color(0xFF244844) : teal;
static Color mineBubbleFg(Brightness brightness) => static Color mineBubbleFg(Brightness brightness) =>
brightness == Brightness.dark ? inkDark : Colors.white; brightness == Brightness.dark ? inkDark : Colors.white;