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 '../state/session_state.dart';
import '../theme/app_theme.dart';
import '../widgets/primary_gradient_button.dart';
/// Phase 1 onboarding skeleton: capture a few style samples locally.
@ -61,27 +62,29 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.fromLTRB(24, 8, 24, 32),
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 56,
height: 56,
width: 52,
height: 52,
decoration: BoxDecoration(
color: scheme.primary,
borderRadius: BorderRadius.circular(16),
color: scheme.primaryContainer,
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),
const SizedBox(height: 8),
Text(
'자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다. '
'최종 문구·수집 방식은 사람 PoC 이후에 다듬습니다.',
style: theme.textTheme.bodyMedium?.copyWith(color: scheme.onSurfaceVariant),
'자주 쓰는 짧은 문장을 3~4개 적어 주세요. 기기에만 저장되며, 초안 요청 시 참고로 씁니다.',
style: theme.textTheme.bodyMedium?.copyWith(
color: scheme.onSurfaceVariant,
height: 1.45,
),
),
const SizedBox(height: 28),
for (var i = 0; i < _samples.length; i++) ...[
@ -92,16 +95,16 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
labelText: '샘플 ${i + 1}',
hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null,
prefixIcon: Padding(
padding: const EdgeInsets.only(left: 4, right: 4, top: 4),
padding: const EdgeInsets.only(left: 10, right: 4),
child: CircleAvatar(
radius: 12,
backgroundColor: scheme.secondaryContainer,
backgroundColor: scheme.primaryContainer,
child: Text(
'${i + 1}',
style: TextStyle(
fontSize: 12,
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: 8),
PrimaryGradientButton(
label: '이 말투로 시작',
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 mutedDark = Color(0xFF9B9893);
static const lineDark = Color(0xFF2A2D36);
static const tealBright = Color(0xFF2DD4BF);
static const tealSoftDark = Color(0xFF143D3A);
static const twinAmberDark = Color(0xFFFBBF24);
/// Dark accent — muted teal (avoid neon cyan against charcoal).
static const tealBright = Color(0xFF5EBBB0);
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.
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);
static Color mineBubble(Brightness brightness) =>
brightness == Brightness.dark ? tealSoftDark : teal;
brightness == Brightness.dark ? const Color(0xFF244844) : teal;
static Color mineBubbleFg(Brightness brightness) =>
brightness == Brightness.dark ? inkDark : Colors.white;