diff --git a/mobile/lib/screens/autonomy_settings_screen.dart b/mobile/lib/screens/autonomy_settings_screen.dart index 310533d..fa4412d 100644 --- a/mobile/lib/screens/autonomy_settings_screen.dart +++ b/mobile/lib/screens/autonomy_settings_screen.dart @@ -66,24 +66,27 @@ class _AutonomySettingsScreenState extends State { body: ListView( padding: const EdgeInsets.fromLTRB(16, 8, 16, 32), children: [ - Card( + Container( + decoration: BoxDecoration( + color: AppTheme.glassFill(theme.brightness), + borderRadius: BorderRadius.circular(AppTheme.rPanel), + border: Border.all(color: AppTheme.glassBorder(theme.brightness)), + ), child: Column( children: [ ListTile( - leading: const Icon(Icons.privacy_tip_outlined), title: const Text('데이터 흐름'), subtitle: const Text('무엇이 기기에 남고 서버로 가는지'), - trailing: const Icon(Icons.chevron_right), + trailing: const Icon(Icons.chevron_right, size: 18), onTap: () { Navigator.of(context).push(MaterialPageRoute(builder: (_) => const DataFlowScreen())); }, ), - const Divider(height: 1, indent: 16, endIndent: 16), + Divider(height: 1, indent: 16, endIndent: 16, color: AppTheme.glassBorder(theme.brightness)), ListTile( - leading: const Icon(Icons.devices), title: const Text('로그인 세션'), subtitle: const Text('멀티 디바이스 세션 목록'), - trailing: const Icon(Icons.chevron_right), + trailing: const Icon(Icons.chevron_right, size: 18), onTap: () { Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SessionsScreen())); }, diff --git a/mobile/lib/screens/chat_screen.dart b/mobile/lib/screens/chat_screen.dart index 741f730..52b5299 100644 --- a/mobile/lib/screens/chat_screen.dart +++ b/mobile/lib/screens/chat_screen.dart @@ -256,10 +256,10 @@ class _ChatScreenState extends State { if (draft.isEscalate) { return Container( margin: const EdgeInsets.fromLTRB(12, 0, 12, 8), - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(14), decoration: BoxDecoration( - color: theme.colorScheme.errorContainer.withValues(alpha: 0.92), - borderRadius: BorderRadius.circular(16), + color: theme.colorScheme.errorContainer.withValues(alpha: 0.55), + borderRadius: BorderRadius.circular(AppTheme.rPanel), border: Border.all(color: AppTheme.glassBorder(theme.brightness)), ), child: Column( @@ -300,32 +300,27 @@ class _ChatScreenState extends State { return Container( margin: const EdgeInsets.fromLTRB(12, 0, 12, 8), - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(14), decoration: BoxDecoration( - color: theme.colorScheme.secondaryContainer.withValues(alpha: 0.95), - borderRadius: BorderRadius.circular(16), + color: AppTheme.glassFill(theme.brightness), + borderRadius: BorderRadius.circular(AppTheme.rPanel), border: Border.all(color: AppTheme.glassBorder(theme.brightness)), ), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Row( - children: [ - Icon(Icons.auto_awesome, size: 18, color: theme.colorScheme.onSecondaryContainer), - const SizedBox(width: 6), - Expanded( - child: Text( - title, - style: theme.textTheme.titleSmall?.copyWith(color: theme.colorScheme.onSecondaryContainer), - ), - ), - ], + Text( + title, + style: theme.textTheme.titleSmall?.copyWith( + color: theme.colorScheme.onSurface, + fontWeight: FontWeight.w600, + ), ), if (isL0) ...[ const SizedBox(height: 6), Text( 'L0에서는 와카뷰 발송이 막혀 있습니다. 초안을 입력창으로 옮긴 뒤 직접 보내거나, 메뉴 → 자율성에서 L1으로 바꾸세요.', - style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSecondaryContainer), + style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant), ), ], const SizedBox(height: 10), diff --git a/mobile/lib/screens/contacts_screen.dart b/mobile/lib/screens/contacts_screen.dart index afd8dc9..30d24ac 100644 --- a/mobile/lib/screens/contacts_screen.dart +++ b/mobile/lib/screens/contacts_screen.dart @@ -299,8 +299,6 @@ class _ContactsScreenState extends State { padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 32), child: Column( children: [ - Icon(Icons.person_add_outlined, size: 40, color: theme.colorScheme.outline), - const SizedBox(height: 12), Text('연락처가 없습니다', style: theme.textTheme.titleMedium), const SizedBox(height: 8), Text( @@ -316,66 +314,65 @@ class _ContactsScreenState extends State { ), ), for (final c in _contacts) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), - child: ListTile( - leading: CircleAvatar( - backgroundColor: theme.colorScheme.secondaryContainer, - child: Text( - c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1), - style: TextStyle( - color: theme.colorScheme.onSecondaryContainer, - fontWeight: FontWeight.w700, - ), + ListTile( + contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2), + leading: CircleAvatar( + radius: 20, + backgroundColor: theme.colorScheme.surfaceContainerHighest, + child: Text( + c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1), + style: TextStyle( + color: theme.colorScheme.onSurfaceVariant, + fontWeight: FontWeight.w600, ), ), - title: Text(c.displayName, style: theme.textTheme.titleSmall), - subtitle: Text( - c.contactUserId == null - ? '사용자 ID 없음 — 대화 불가 (다시 추가 필요)' - : [ - '사용자 #${c.contactUserId}', - if (c.relationshipNote.isNotEmpty) c.relationshipNote, - ].join(' · '), - style: theme.textTheme.bodySmall?.copyWith( - color: c.contactUserId == null - ? theme.colorScheme.error - : theme.colorScheme.onSurfaceVariant, - ), - ), - trailing: Row( - mainAxisSize: MainAxisSize.min, - children: [ - if (c.contactUserId != null) ...[ - FilledButton.tonal( - onPressed: () => _startChat(c), - child: const Text('대화'), - ), - IconButton( - tooltip: '수정', - icon: const Icon(Icons.edit_outlined, size: 20), - onPressed: () => _editContact(c), - ), - ] else - FilledButton( - onPressed: () => _editContact(c), - child: const Text('ID 입력'), - ), - IconButton( - tooltip: '삭제', - icon: const Icon(Icons.delete_outline, size: 20), - onPressed: () => _delete(c), - ), - ], - ), - onTap: () { - if (c.contactUserId == null) { - _editContact(c); - } else { - _startChat(c); - } - }, ), + title: Text(c.displayName, style: theme.textTheme.titleSmall), + subtitle: Text( + c.contactUserId == null + ? '사용자 ID 없음 — 대화 불가 (다시 추가 필요)' + : [ + '사용자 #${c.contactUserId}', + if (c.relationshipNote.isNotEmpty) c.relationshipNote, + ].join(' · '), + style: theme.textTheme.bodySmall?.copyWith( + color: c.contactUserId == null + ? theme.colorScheme.error + : theme.colorScheme.onSurfaceVariant, + ), + ), + trailing: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (c.contactUserId != null) ...[ + TextButton( + onPressed: () => _startChat(c), + child: const Text('대화'), + ), + IconButton( + tooltip: '수정', + icon: const Icon(Icons.edit_outlined, size: 20), + onPressed: () => _editContact(c), + ), + ] else + FilledButton( + onPressed: () => _editContact(c), + child: const Text('ID 입력'), + ), + IconButton( + tooltip: '삭제', + icon: const Icon(Icons.delete_outline, size: 20), + onPressed: () => _delete(c), + ), + ], + ), + onTap: () { + if (c.contactUserId == null) { + _editContact(c); + } else { + _startChat(c); + } + }, ), const SizedBox(height: 72), ], diff --git a/mobile/lib/screens/conversation_list_screen.dart b/mobile/lib/screens/conversation_list_screen.dart index b7ee348..611de4a 100644 --- a/mobile/lib/screens/conversation_list_screen.dart +++ b/mobile/lib/screens/conversation_list_screen.dart @@ -4,7 +4,6 @@ import 'package:provider/provider.dart'; import '../models/models.dart'; import '../services/api_client.dart'; import '../state/session_state.dart'; -import '../theme/app_theme.dart'; import '../widgets/gradient_text.dart'; import '../widgets/my_user_id_chip.dart'; import 'autonomy_settings_screen.dart'; @@ -157,16 +156,16 @@ class _ConversationListScreenState extends State { Color _avatarColor(BuildContext context, int seed) { final isDark = Theme.of(context).brightness == Brightness.dark; final palette = isDark - ? const [Color(0xFF1F3A37), Color(0xFF2A3140), Color(0xFF3A3224)] - : const [Color(0xFFD9F3F0), Color(0xFFE8E6E1), Color(0xFFFFE8C8)]; + ? const [Color(0xFF1C1C1C), Color(0xFF22262E), Color(0xFF242018)] + : const [Color(0xFFF4F4F5), Color(0xFFE8EEF4), Color(0xFFF3F0EA)]; return palette[seed % palette.length]; } Color _onAvatarColor(BuildContext context, int seed) { final isDark = Theme.of(context).brightness == Brightness.dark; final palette = isDark - ? const [Color(0xFF2DD4BF), Color(0xFFF2F1EF), Color(0xFFFBBF24)] - : const [Color(0xFF0F766E), Color(0xFF1C1B1A), Color(0xFFB45309)]; + ? const [Color(0xFFA3A3A3), Color(0xFF8BB4D9), Color(0xFFC4A574)] + : const [Color(0xFF525252), Color(0xFF3B6D9B), Color(0xFF9A7B4F)]; return palette[seed % palette.length]; } @@ -224,10 +223,10 @@ class _ConversationListScreenState extends State { const SizedBox(width: 4), ], ), - floatingActionButton: FloatingActionButton.extended( + floatingActionButton: FloatingActionButton( onPressed: _createConversation, - icon: const Icon(Icons.chat), - label: const Text('새 대화'), + tooltip: '새 대화', + child: const Icon(Icons.chat_outlined), ), body: RefreshIndicator( onRefresh: _load, @@ -255,19 +254,9 @@ class _ConversationListScreenState extends State { ), if (_rooms.isEmpty) Padding( - padding: const EdgeInsets.fromLTRB(32, 56, 32, 32), + padding: const EdgeInsets.fromLTRB(32, 48, 32, 32), child: Column( children: [ - Container( - width: 68, - height: 68, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: theme.colorScheme.primaryContainer, - ), - child: Icon(Icons.chat_bubble_outline, size: 28, color: theme.colorScheme.primary), - ), - const SizedBox(height: 18), Text('대화방이 없습니다', style: theme.textTheme.titleMedium), const SizedBox(height: 8), Text( @@ -281,86 +270,81 @@ class _ConversationListScreenState extends State { ), ), const SizedBox(height: 18), - FilledButton.tonalIcon( + OutlinedButton( onPressed: () async { await Navigator.of(context).push( MaterialPageRoute(builder: (_) => const ContactsScreen()), ); await _load(); }, - icon: const Icon(Icons.contacts_outlined), - label: const Text('연락처 열기'), + child: const Text('연락처 열기'), ), ], ), ), for (final room in _rooms) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3), - child: Material( - color: AppTheme.glassFill(theme.brightness), - borderRadius: BorderRadius.circular(16), - child: InkWell( - borderRadius: BorderRadius.circular(16), - onTap: () async { - await Navigator.of(context).push( - MaterialPageRoute( - builder: (_) => ChatScreen( - conversationId: room.id, - title: _titleFor(room, me), + Material( + color: Colors.transparent, + child: InkWell( + onTap: () async { + await Navigator.of(context).push( + MaterialPageRoute( + builder: (_) => ChatScreen( + conversationId: room.id, + title: _titleFor(room, me), + ), + ), + ); + await _load(); + }, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), + child: Row( + children: [ + CircleAvatar( + radius: 22, + backgroundColor: _avatarColor(context, room.id), + child: Icon( + room.isGroup ? Icons.groups_outlined : Icons.person_outline, + size: 20, + color: _onAvatarColor(context, room.id), ), ), - ); - await _load(); - }, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), - child: Row( - children: [ - CircleAvatar( - radius: 24, - backgroundColor: _avatarColor(context, room.id), - child: Icon( - room.isGroup ? Icons.groups_outlined : Icons.person_outline, - color: _onAvatarColor(context, room.id), - ), - ), - const SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - _titleFor(room, me), - style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700), - ), - const SizedBox(height: 3), - Row( - children: [ - if (room.twinDisabledByPeer) ...[ - Icon(Icons.block, size: 13, color: theme.colorScheme.error), - const SizedBox(width: 4), - ], - Expanded( - child: Text( - _subtitleFor(room, me), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.bodySmall?.copyWith( - color: room.twinDisabledByPeer - ? theme.colorScheme.error - : theme.colorScheme.onSurfaceVariant, - ), + const SizedBox(width: 12), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _titleFor(room, me), + style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600), + ), + const SizedBox(height: 2), + Row( + children: [ + if (room.twinDisabledByPeer) ...[ + Icon(Icons.block, size: 13, color: theme.colorScheme.error), + const SizedBox(width: 4), + ], + Expanded( + child: Text( + _subtitleFor(room, me), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.bodySmall?.copyWith( + color: room.twinDisabledByPeer + ? theme.colorScheme.error + : theme.colorScheme.onSurfaceVariant, ), ), - ], - ), - ], - ), + ), + ], + ), + ], ), - Icon(Icons.chevron_right, size: 20, color: theme.colorScheme.onSurfaceVariant), - ], - ), + ), + Icon(Icons.chevron_right, size: 18, color: theme.colorScheme.onSurfaceVariant), + ], ), ), ), diff --git a/mobile/lib/screens/data_flow_screen.dart b/mobile/lib/screens/data_flow_screen.dart index 7692fab..94dadf4 100644 --- a/mobile/lib/screens/data_flow_screen.dart +++ b/mobile/lib/screens/data_flow_screen.dart @@ -10,42 +10,28 @@ class DataFlowScreen extends StatelessWidget { Widget _section( BuildContext context, { - required IconData icon, - required Color tint, required String title, required String body, }) { final theme = Theme.of(context); return Container( - margin: const EdgeInsets.only(bottom: 16), + margin: const EdgeInsets.only(bottom: 12), padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: AppTheme.glassFill(theme.brightness), - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(AppTheme.rPanel), border: Border.all(color: AppTheme.glassBorder(theme.brightness)), ), - child: Row( + child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - width: 36, - height: 36, - alignment: Alignment.center, - decoration: BoxDecoration(color: tint.withValues(alpha: 0.15), shape: BoxShape.circle), - child: Icon(icon, size: 18, color: tint), - ), - const SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(title, style: theme.textTheme.titleSmall), - const SizedBox(height: 4), - Text( - body, - style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), - ], + Text(title, style: theme.textTheme.titleSmall), + const SizedBox(height: 6), + Text( + body, + style: theme.textTheme.bodyMedium?.copyWith( + color: theme.colorScheme.onSurfaceVariant, + height: 1.45, ), ), ], @@ -66,32 +52,40 @@ class DataFlowScreen extends StatelessWidget { children: [ _section( context, - icon: Icons.lock_outline, - tint: Colors.green.shade600, title: '기기 안에만 둡니다', body: '말투 샘플·온보딩 입력은 이 기기의 로컬 저장소에만 보관합니다. ' '원문 대화 전체를 서버로 올리지 않는 것이 기본 원칙입니다.', ), - Card( - margin: const EdgeInsets.only(bottom: 16), - child: ListTile( - leading: Icon(Icons.record_voice_over_outlined, color: theme.colorScheme.primary), - title: Text('말투 샘플 ${samples.length}개'), - subtitle: Text( - [ - samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '), - session.localDbEncrypted - ? '저장: drift + SQLCipher(암호화)' - : '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)', - ].join('\n'), - ), - isThreeLine: true, + Container( + margin: const EdgeInsets.only(bottom: 12), + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: AppTheme.glassFill(theme.brightness), + borderRadius: BorderRadius.circular(AppTheme.rPanel), + border: Border.all(color: AppTheme.glassBorder(theme.brightness)), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('말투 샘플 ${samples.length}개', style: theme.textTheme.titleSmall), + const SizedBox(height: 6), + Text( + [ + samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '), + session.localDbEncrypted + ? '저장: drift + SQLCipher(암호화)' + : '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)', + ].join('\n'), + style: theme.textTheme.bodyMedium?.copyWith( + color: theme.colorScheme.onSurfaceVariant, + height: 1.45, + ), + ), + ], ), ), _section( context, - icon: Icons.cloud_upload_outlined, - tint: Colors.amber.shade800, title: '서버로 보낼 수 있는 것', body: '초안이 필요할 때: 최근 대화 몇 줄 + 말투 샘플 일부(최소 컨텍스트)\n' '채팅 릴레이: 보낸 메시지 본문\n' @@ -100,8 +94,6 @@ class DataFlowScreen extends StatelessWidget { ), _section( context, - icon: Icons.block, - tint: theme.colorScheme.error, title: '보내지 않는 것', body: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, ' '관계 메모의 자동 클라우드 분석', diff --git a/mobile/lib/screens/inbox_screen.dart b/mobile/lib/screens/inbox_screen.dart index 25125d8..9930ed2 100644 --- a/mobile/lib/screens/inbox_screen.dart +++ b/mobile/lib/screens/inbox_screen.dart @@ -4,6 +4,7 @@ import 'package:provider/provider.dart'; import '../models/models.dart'; import '../services/api_client.dart'; import '../state/session_state.dart'; +import '../theme/app_theme.dart'; import 'chat_screen.dart'; /// Post-hoc notification inbox: escalation logs that need human attention. @@ -53,98 +54,89 @@ class _InboxScreenState extends State { child: _loading ? ListView(children: const [SizedBox(height: 160), Center(child: CircularProgressIndicator())]) : ListView( - padding: const EdgeInsets.fromLTRB(12, 12, 12, 24), + padding: const EdgeInsets.fromLTRB(16, 12, 16, 24), children: [ - Padding( - padding: const EdgeInsets.fromLTRB(4, 0, 4, 12), - child: Text( - '와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. ' - '이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.', - style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), + Text( + '와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. ' + '이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.', + style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), ), + const SizedBox(height: 12), if (_error != null) Padding( - padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8), + padding: const EdgeInsets.only(bottom: 8), child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)), ), if (_logs.isEmpty) Padding( - padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 32), - child: Column( - children: [ - Icon(Icons.notifications_none, size: 40, color: theme.colorScheme.outline), - const SizedBox(height: 12), - Text('새 알림이 없습니다', style: theme.textTheme.titleMedium), - ], + padding: const EdgeInsets.symmetric(vertical: 56), + child: Center( + child: Text('새 알림이 없습니다', style: theme.textTheme.titleMedium), ), ), for (final log in _logs) - Padding( - padding: const EdgeInsets.only(bottom: 8), - child: Card( - child: InkWell( - borderRadius: BorderRadius.circular(16), - onTap: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (_) => ChatScreen(conversationId: log.conversationId), + Material( + color: Colors.transparent, + child: InkWell( + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (_) => ChatScreen(conversationId: log.conversationId), + ), + ); + }, + child: Container( + margin: const EdgeInsets.only(bottom: 8), + padding: const EdgeInsets.all(14), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(AppTheme.rPanel), + border: Border.all(color: AppTheme.glassBorder(theme.brightness)), + color: AppTheme.glassFill(theme.brightness), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Expanded( + child: Text( + log.reason.isEmpty ? '에스컬레이션' : log.reason, + style: theme.textTheme.titleSmall, + ), + ), + Text( + log.resolved ? '처리됨' : '확인 필요', + style: theme.textTheme.labelSmall?.copyWith( + color: log.resolved + ? theme.colorScheme.onSurfaceVariant + : theme.colorScheme.error, + fontWeight: FontWeight.w600, + ), + ), + ], ), - ); - }, - child: Padding( - padding: const EdgeInsets.all(14), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - CircleAvatar( - radius: 18, - backgroundColor: log.resolved - ? theme.colorScheme.primaryContainer - : theme.colorScheme.errorContainer, - child: Icon( - log.resolved ? Icons.check_circle_outline : Icons.warning_amber_rounded, - size: 18, - color: log.resolved - ? theme.colorScheme.onPrimaryContainer - : theme.colorScheme.onErrorContainer, - ), - ), - const SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - log.reason.isEmpty ? '에스컬레이션' : log.reason, - style: theme.textTheme.titleSmall, - ), - const SizedBox(height: 2), - Text( - '대화방 #${log.conversationId}', - style: theme.textTheme.bodySmall - ?.copyWith(color: theme.colorScheme.onSurfaceVariant), - ), - if (log.messageSnippet.isNotEmpty) ...[ - const SizedBox(height: 6), - Text( - log.messageSnippet, - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.bodyMedium, - ), - ], - const SizedBox(height: 6), - Text( - log.createdAt.toLocal().toString().split('.').first, - style: theme.textTheme.labelSmall - ?.copyWith(color: theme.colorScheme.outline), - ), - ], - ), + const SizedBox(height: 4), + Text( + '대화방 #${log.conversationId}', + style: theme.textTheme.bodySmall + ?.copyWith(color: theme.colorScheme.onSurfaceVariant), + ), + if (log.messageSnippet.isNotEmpty) ...[ + const SizedBox(height: 6), + Text( + log.messageSnippet, + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.bodyMedium, ), ], - ), + const SizedBox(height: 6), + Text( + log.createdAt.toLocal().toString().split('.').first, + style: theme.textTheme.labelSmall + ?.copyWith(color: theme.colorScheme.outline), + ), + ], ), ), ), diff --git a/mobile/lib/screens/onboarding_tone_screen.dart b/mobile/lib/screens/onboarding_tone_screen.dart index 5b512d3..b0d7e91 100644 --- a/mobile/lib/screens/onboarding_tone_screen.dart +++ b/mobile/lib/screens/onboarding_tone_screen.dart @@ -61,21 +61,8 @@ class _OnboardingToneScreenState extends State { ), body: SafeArea( child: ListView( - padding: const EdgeInsets.fromLTRB(24, 8, 24, 32), + padding: const EdgeInsets.fromLTRB(24, 12, 24, 32), children: [ - Align( - alignment: Alignment.centerLeft, - child: Container( - width: 52, - height: 52, - decoration: BoxDecoration( - color: scheme.primaryContainer, - borderRadius: BorderRadius.circular(14), - ), - child: Icon(Icons.record_voice_over_outlined, size: 26, color: scheme.primary), - ), - ), - const SizedBox(height: 18), Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall), const SizedBox(height: 8), Text( @@ -93,21 +80,6 @@ class _OnboardingToneScreenState extends State { decoration: InputDecoration( labelText: '샘플 ${i + 1}', hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null, - prefixIcon: Padding( - padding: const EdgeInsets.only(left: 10, right: 4), - child: CircleAvatar( - radius: 12, - backgroundColor: scheme.primaryContainer, - child: Text( - '${i + 1}', - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.w700, - color: scheme.onPrimaryContainer, - ), - ), - ), - ), ), ), const SizedBox(height: 12), diff --git a/mobile/lib/screens/sessions_screen.dart b/mobile/lib/screens/sessions_screen.dart index 64355fe..493a77c 100644 --- a/mobile/lib/screens/sessions_screen.dart +++ b/mobile/lib/screens/sessions_screen.dart @@ -95,30 +95,17 @@ class _SessionsScreenState extends State { child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)), ), for (final s in _sessions) - Padding( - padding: const EdgeInsets.symmetric(vertical: 2), - child: ListTile( - leading: CircleAvatar( - backgroundColor: s['is_current'] == true - ? theme.colorScheme.primaryContainer - : theme.colorScheme.surfaceContainerHighest, - child: Icon( - s['is_current'] == true ? Icons.smartphone : Icons.devices_other, - color: s['is_current'] == true - ? theme.colorScheme.onPrimaryContainer - : theme.colorScheme.onSurfaceVariant, - ), - ), - title: Text( - s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}', - style: theme.textTheme.titleSmall, - ), - subtitle: Text('만료: ${s['expires_at'] ?? ''}', style: theme.textTheme.bodySmall), - trailing: IconButton( - tooltip: '세션 종료', - icon: const Icon(Icons.logout), - onPressed: () => _revoke(s), - ), + ListTile( + contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2), + title: Text( + s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}', + style: theme.textTheme.titleSmall, + ), + subtitle: Text('만료: ${s['expires_at'] ?? ''}', style: theme.textTheme.bodySmall), + trailing: IconButton( + tooltip: '세션 종료', + icon: const Icon(Icons.logout), + onPressed: () => _revoke(s), ), ), ], diff --git a/mobile/lib/screens/signup_screen.dart b/mobile/lib/screens/signup_screen.dart index 7f517dd..cbcb2ae 100644 --- a/mobile/lib/screens/signup_screen.dart +++ b/mobile/lib/screens/signup_screen.dart @@ -133,15 +133,15 @@ class _DemoTestPanel extends StatelessWidget { final brightness = theme.brightness; return Material( color: Colors.transparent, - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(AppTheme.rPanel), child: InkWell( onTap: onFill, - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(AppTheme.rPanel), child: Container( padding: const EdgeInsets.fromLTRB(16, 14, 12, 14), decoration: BoxDecoration( color: AppTheme.glassFill(brightness), - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(AppTheme.rPanel), border: Border.all(color: AppTheme.glassBorder(brightness)), ), child: Column( @@ -150,8 +150,9 @@ class _DemoTestPanel extends StatelessWidget { Text( '테스트용 (누구나)', style: theme.textTheme.labelLarge?.copyWith( - color: theme.colorScheme.primary, - letterSpacing: 0.2, + color: theme.colorScheme.onSurfaceVariant, + letterSpacing: 0.15, + fontWeight: FontWeight.w600, ), ), const SizedBox(height: 6), @@ -162,7 +163,7 @@ class _DemoTestPanel extends StatelessWidget { '초대 코드 ${AppConfig.demoInviteCode}\n표시 이름 ${AppConfig.demoDisplayName}', style: theme.textTheme.titleSmall?.copyWith( height: 1.45, - fontWeight: FontWeight.w700, + fontWeight: FontWeight.w600, ), ), ), diff --git a/mobile/lib/screens/splash_screen.dart b/mobile/lib/screens/splash_screen.dart index 3d11e2d..e43ad4a 100644 --- a/mobile/lib/screens/splash_screen.dart +++ b/mobile/lib/screens/splash_screen.dart @@ -33,9 +33,12 @@ class SplashScreen extends StatelessWidget { ), const SizedBox(height: 32), SizedBox( - width: 28, - height: 28, - child: CircularProgressIndicator(strokeWidth: 2.5, color: scheme.primary), + width: 22, + height: 22, + child: CircularProgressIndicator( + strokeWidth: 2, + color: scheme.onSurfaceVariant, + ), ), ], ), diff --git a/mobile/lib/theme/app_theme.dart b/mobile/lib/theme/app_theme.dart index b4bfd7c..4a0b01e 100644 --- a/mobile/lib/theme/app_theme.dart +++ b/mobile/lib/theme/app_theme.dart @@ -1,125 +1,104 @@ import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; -/// Quiet Ink — calm messenger direction for 와카뷰. -/// Light: warm off-white canvas, charcoal ink, single deep-teal accent. -/// Dark: charcoal surfaces, same teal (brighter), twin stays warm amber. -/// Avoids aurora/purple glass so chat reads as a daily messenger, not a demo. +/// Soft Neutral + surface hierarchy for 와카뷰. +/// Neutrals dominate; accent is thin (mine bubbles / small links only). +/// Radii: input/button 12, bubble 18. No glow, almost no shadow. class AppTheme { AppTheme._(); - // Light - static const canvasLight = Color(0xFFF7F6F3); + // Light neutrals + static const canvasLight = Color(0xFFFAFAF9); static const surfaceLight = Color(0xFFFFFFFF); - static const inkLight = Color(0xFF1C1B1A); - static const mutedLight = Color(0xFF6B6864); - static const lineLight = Color(0xFFE8E6E1); - static const teal = Color(0xFF0F766E); - static const tealSoft = Color(0xFFD9F3F0); - static const twinAmberLight = Color(0xFFB45309); + static const inkLight = Color(0xFF171717); + static const mutedLight = Color(0xFF737373); + static const lineLight = Color(0xFFE5E5E5); + static const softFillLight = Color(0xFFF4F4F5); - // Dark - static const canvasDark = Color(0xFF0E0F12); - static const surfaceDark = Color(0xFF1A1C22); - static const inkDark = Color(0xFFF2F1EF); - static const mutedDark = Color(0xFF9B9893); - static const lineDark = Color(0xFF2A2D36); - /// Dark accent — muted teal (avoid neon cyan against charcoal). - static const tealBright = Color(0xFF5EBBB0); - static const tealSoftDark = Color(0xFF1A3331); - static const twinAmberDark = Color(0xFFE0A84A); + // Dark neutrals + static const canvasDark = Color(0xFF0A0A0A); + static const surfaceDark = Color(0xFF141414); + static const inkDark = Color(0xFFFAFAFA); + static const mutedDark = Color(0xFFA3A3A3); + static const lineDark = Color(0xFF262626); + static const softFillDark = Color(0xFF1C1C1C); - /// Kept for call sites that still reference a "brand" fill — solid teal, not a rainbow. + /// Thin accent — used for mine bubbles & primary actions, not chrome. + static const accentLight = Color(0xFF3B6D9B); + static const accentDark = Color(0xFF8BB4D9); + static const accentSoftLight = Color(0xFFE8F0F7); + static const accentSoftDark = Color(0xFF1A2836); + + static const twinAmberLight = Color(0xFF9A7B4F); + static const twinAmberDark = Color(0xFFC4A574); + + /// Compat for older call sites. + static const teal = accentLight; + static const tealBright = accentDark; + static const canvasDarkCompat = canvasDark; static const brandGradient = LinearGradient( - begin: Alignment.centerLeft, - end: Alignment.centerRight, - colors: [teal, Color(0xFF0D9488)], + colors: [accentLight, accentLight], ); - static Color twinAccent(Brightness brightness) => - brightness == Brightness.dark ? twinAmberDark : twinAmberLight; + static Color twinAccent(Brightness b) => b == Brightness.dark ? twinAmberDark : twinAmberLight; - /// Soft near-flat wash (not aurora). Used by [GradientBackdrop]. - static LinearGradient backgroundGradient(Brightness brightness) { - if (brightness == Brightness.dark) { - return const LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [Color(0xFF12141A), canvasDark], - ); - } - return const LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [Color(0xFFF3F2EE), canvasLight], - ); + static LinearGradient backgroundGradient(Brightness b) { + final c = b == Brightness.dark ? canvasDark : canvasLight; + return LinearGradient(colors: [c, c]); } - static Color glowPrimary(Brightness brightness) => - (brightness == Brightness.dark ? tealBright : teal).withValues(alpha: 0.06); + static Color glassFill(Brightness b) => b == Brightness.dark ? surfaceDark : surfaceLight; + static Color glassBorder(Brightness b) => b == Brightness.dark ? lineDark : lineLight; + static Color glassShadow(Brightness b) => Colors.transparent; - static Color glowSecondary(Brightness brightness) => Colors.transparent; + static Color mineBubble(Brightness b) => b == Brightness.dark ? accentSoftDark : accentLight; + static Color mineBubbleFg(Brightness b) => b == Brightness.dark ? inkDark : Colors.white; + static Color peerBubble(Brightness b) => b == Brightness.dark ? softFillDark : softFillLight; - /// Panel fill (replaces glassmorphism). - static Color glassFill(Brightness brightness) => - brightness == Brightness.dark ? surfaceDark : surfaceLight; - - static Color glassBorder(Brightness brightness) => - brightness == Brightness.dark ? lineDark : lineLight; - - static Color glassShadow(Brightness brightness) => - brightness == Brightness.dark ? Colors.black.withValues(alpha: 0.35) : const Color(0xFF1C1B1A).withValues(alpha: 0.06); - - static Color mineBubble(Brightness brightness) => - brightness == Brightness.dark ? const Color(0xFF244844) : teal; - - static Color mineBubbleFg(Brightness brightness) => - brightness == Brightness.dark ? inkDark : Colors.white; - - static Color peerBubble(Brightness brightness) => - brightness == Brightness.dark ? const Color(0xFF24272F) : const Color(0xFFEFEEEA); + static const rInput = 12.0; + static const rButton = 12.0; + static const rBubble = 18.0; + static const rPanel = 12.0; static ThemeData light() => _build(Brightness.light); static ThemeData dark() => _build(Brightness.dark); static ThemeData _build(Brightness brightness) { final isDark = brightness == Brightness.dark; - final primary = isDark ? tealBright : teal; + final primary = isDark ? accentDark : accentLight; final onPrimary = isDark ? canvasDark : Colors.white; + final ink = isDark ? inkDark : inkLight; + final muted = isDark ? mutedDark : mutedLight; + final line = isDark ? lineDark : lineLight; + final canvas = isDark ? canvasDark : canvasLight; + final surface = isDark ? surfaceDark : surfaceLight; + final soft = isDark ? softFillDark : softFillLight; + final scheme = ColorScheme( brightness: brightness, primary: primary, onPrimary: onPrimary, - primaryContainer: isDark ? tealSoftDark : tealSoft, - onPrimaryContainer: isDark ? tealBright : const Color(0xFF0A4F4A), + primaryContainer: isDark ? accentSoftDark : accentSoftLight, + onPrimaryContainer: primary, secondary: isDark ? twinAmberDark : twinAmberLight, onSecondary: isDark ? canvasDark : Colors.white, - secondaryContainer: isDark ? const Color(0xFF3D2E14) : const Color(0xFFFFE8C8), - onSecondaryContainer: isDark ? twinAmberDark : twinAmberLight, + secondaryContainer: soft, + onSecondaryContainer: muted, tertiary: primary, onTertiary: onPrimary, error: isDark ? const Color(0xFFF87171) : const Color(0xFFB91C1C), onError: Colors.white, - surface: isDark ? surfaceDark : surfaceLight, - onSurface: isDark ? inkDark : inkLight, - onSurfaceVariant: isDark ? mutedDark : mutedLight, - outline: isDark ? lineDark : lineLight, - outlineVariant: isDark ? lineDark : lineLight, - surfaceContainerHighest: isDark ? const Color(0xFF24272F) : const Color(0xFFEFEEEA), - surfaceContainerHigh: isDark ? const Color(0xFF20232A) : const Color(0xFFF3F2EE), - surfaceContainer: isDark ? surfaceDark : surfaceLight, + surface: surface, + onSurface: ink, + onSurfaceVariant: muted, + outline: line, + outlineVariant: line, + surfaceContainerHighest: soft, + surfaceContainerHigh: soft, + surfaceContainer: surface, ); - final baseText = GoogleFonts.plusJakartaSansTextTheme(); - final textTheme = _textTheme(baseText, scheme.onSurface); - - final panel = glassFill(brightness); - final edge = glassBorder(brightness); - final shadow = glassShadow(brightness); - final shape = RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - side: BorderSide(color: edge), - ); + final textTheme = _textTheme(GoogleFonts.plusJakartaSansTextTheme(), ink); return ThemeData( useMaterial3: true, @@ -130,70 +109,76 @@ class AppTheme { textTheme: textTheme, primaryTextTheme: textTheme, appBarTheme: AppBarTheme( - backgroundColor: Colors.transparent, - foregroundColor: scheme.onSurface, + backgroundColor: canvas.withValues(alpha: 0.92), + foregroundColor: ink, surfaceTintColor: Colors.transparent, elevation: 0, scrolledUnderElevation: 0, centerTitle: false, - titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700, letterSpacing: -0.3), + titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600, letterSpacing: -0.2), ), cardTheme: CardThemeData( elevation: 0, - shadowColor: shadow, - color: panel, - shape: shape, + color: surface, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(rPanel), + side: BorderSide(color: line), + ), margin: EdgeInsets.zero, ), listTileTheme: ListTileThemeData( - iconColor: scheme.onSurfaceVariant, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), - contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4), - minVerticalPadding: 10, + iconColor: muted, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)), + contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2), + minVerticalPadding: 8, ), - dividerTheme: DividerThemeData(color: edge, space: 1, thickness: 1), + dividerTheme: DividerThemeData(color: line, space: 1, thickness: 1), inputDecorationTheme: InputDecorationTheme( filled: true, - fillColor: isDark ? const Color(0xFF14161C) : const Color(0xFFF0EFEC), - contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14), + fillColor: surface, + contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12), border: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: BorderSide(color: edge), + borderRadius: BorderRadius.circular(rInput), + borderSide: BorderSide(color: line), ), enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: BorderSide(color: edge), + borderRadius: BorderRadius.circular(rInput), + borderSide: BorderSide(color: line), ), focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: BorderSide(color: primary, width: 1.5), + borderRadius: BorderRadius.circular(rInput), + borderSide: BorderSide(color: primary, width: 1.2), ), errorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(rInput), borderSide: BorderSide(color: scheme.error), ), focusedErrorBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: BorderSide(color: scheme.error, width: 1.5), + borderRadius: BorderRadius.circular(rInput), + borderSide: BorderSide(color: scheme.error, width: 1.2), ), - hintStyle: TextStyle(color: scheme.onSurfaceVariant.withValues(alpha: 0.75)), + hintStyle: TextStyle(color: muted.withValues(alpha: 0.8)), + labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500), ), filledButtonTheme: FilledButtonThemeData( style: FilledButton.styleFrom( - backgroundColor: primary, - foregroundColor: onPrimary, - padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), - textStyle: const TextStyle(fontWeight: FontWeight.w700), + backgroundColor: isDark ? inkDark : inkLight, + foregroundColor: isDark ? canvasDark : Colors.white, + padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12), + minimumSize: const Size(0, 46), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)), + textStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 15), elevation: 0, ), ), + tonalButtonTheme: null, outlinedButtonTheme: OutlinedButtonThemeData( style: OutlinedButton.styleFrom( - foregroundColor: scheme.onSurface, - padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), - side: BorderSide(color: edge), + foregroundColor: ink, + padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12), + minimumSize: const Size(0, 46), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)), + side: BorderSide(color: line), ), ), textButtonTheme: TextButtonThemeData( @@ -204,60 +189,70 @@ class AppTheme { ), iconButtonTheme: IconButtonThemeData( style: IconButton.styleFrom( - foregroundColor: scheme.onSurfaceVariant, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), + foregroundColor: muted, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), ), ), chipTheme: ChipThemeData( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - side: BorderSide(color: edge), - backgroundColor: panel, - labelStyle: TextStyle(color: scheme.onSurfaceVariant, fontWeight: FontWeight.w600, fontSize: 12), - padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), + side: BorderSide(color: line), + backgroundColor: surface, + labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500, fontSize: 12), + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), ), floatingActionButtonTheme: FloatingActionButtonThemeData( - backgroundColor: primary, - foregroundColor: onPrimary, - elevation: 2, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), + backgroundColor: isDark ? inkDark : inkLight, + foregroundColor: isDark ? canvasDark : Colors.white, + elevation: 0, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)), ), snackBarTheme: SnackBarThemeData( behavior: SnackBarBehavior.floating, - backgroundColor: isDark ? surfaceDark : inkLight, + backgroundColor: isDark ? softFillDark : inkLight, contentTextStyle: TextStyle(color: isDark ? inkDark : Colors.white), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)), + elevation: 0, ), dialogTheme: DialogThemeData( - backgroundColor: panel, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), + backgroundColor: surface, + elevation: 0, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + side: BorderSide(color: line), + ), ), progressIndicatorTheme: ProgressIndicatorThemeData(color: primary), - bannerTheme: MaterialBannerThemeData(backgroundColor: panel, padding: const EdgeInsets.all(16)), + bannerTheme: MaterialBannerThemeData(backgroundColor: surface, padding: const EdgeInsets.all(16)), + segmentedButtonTheme: SegmentedButtonThemeData( + style: SegmentedButton.styleFrom( + backgroundColor: surface, + foregroundColor: muted, + selectedForegroundColor: ink, + selectedBackgroundColor: soft, + side: BorderSide(color: line), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)), + padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8), + ), + ), ); } static TextTheme _textTheme(TextTheme base, Color ink) { TextStyle s(TextStyle? t, {FontWeight? w, double? size, double? ls, double? h}) => - (t ?? const TextStyle()).copyWith( - color: ink, - fontWeight: w, - fontSize: size, - letterSpacing: ls, - height: h, - ); + (t ?? const TextStyle()).copyWith(color: ink, fontWeight: w, fontSize: size, letterSpacing: ls, height: h); return base.copyWith( - displayLarge: s(base.displayLarge, w: FontWeight.w700, size: 40, ls: -1.2), - displaySmall: s(base.displaySmall, w: FontWeight.w700, size: 32, ls: -0.8), - headlineSmall: s(base.headlineSmall, w: FontWeight.w700, size: 22, ls: -0.3), - titleLarge: s(base.titleLarge, w: FontWeight.w700, size: 18, ls: -0.2), - titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 16), + displayLarge: s(base.displayLarge, w: FontWeight.w600, size: 36, ls: -1.0), + displaySmall: s(base.displaySmall, w: FontWeight.w600, size: 28, ls: -0.6), + headlineSmall: s(base.headlineSmall, w: FontWeight.w600, size: 20, ls: -0.2), + titleLarge: s(base.titleLarge, w: FontWeight.w600, size: 17, ls: -0.2), + titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 15), titleSmall: s(base.titleSmall, w: FontWeight.w600, size: 14), - bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 16, h: 1.45), + bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 15, h: 1.45), bodyMedium: s(base.bodyMedium, w: FontWeight.w400, size: 14, h: 1.45), bodySmall: s(base.bodySmall, w: FontWeight.w400, size: 12, h: 1.4), - labelLarge: s(base.labelLarge, w: FontWeight.w600, size: 14), - labelSmall: s(base.labelSmall, w: FontWeight.w600, size: 11, ls: 0.1), + labelLarge: s(base.labelLarge, w: FontWeight.w500, size: 13), + labelSmall: s(base.labelSmall, w: FontWeight.w500, size: 11), ); } } diff --git a/mobile/lib/widgets/brand_mark.dart b/mobile/lib/widgets/brand_mark.dart index 786f97d..962226c 100644 --- a/mobile/lib/widgets/brand_mark.dart +++ b/mobile/lib/widgets/brand_mark.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import '../theme/app_theme.dart'; -/// Quiet Ink brand mark — solid teal tile with a "Y" monogram. +/// Soft Neutral brand mark — ink monogram, no glow or heavy tile chrome. class BrandMark extends StatelessWidget { const BrandMark({super.key, this.size = 64}); @@ -11,30 +11,22 @@ class BrandMark extends StatelessWidget { @override Widget build(BuildContext context) { final isDark = Theme.of(context).brightness == Brightness.dark; - final fill = isDark ? AppTheme.tealBright : AppTheme.teal; + final fill = isDark ? AppTheme.inkDark : AppTheme.inkLight; final fg = isDark ? AppTheme.canvasDark : Colors.white; - final radius = size * 0.28; return Container( width: size, height: size, decoration: BoxDecoration( color: fill, - borderRadius: BorderRadius.circular(radius), - boxShadow: [ - BoxShadow( - color: AppTheme.teal.withValues(alpha: isDark ? 0.25 : 0.18), - blurRadius: size * 0.22, - offset: Offset(0, size * 0.08), - ), - ], + borderRadius: BorderRadius.circular(AppTheme.rPanel), ), alignment: Alignment.center, child: Text( 'Y', style: TextStyle( color: fg, - fontWeight: FontWeight.w800, - fontSize: size * 0.44, + fontWeight: FontWeight.w700, + fontSize: size * 0.42, height: 1, letterSpacing: -0.5, ), diff --git a/mobile/lib/widgets/gradient_text.dart b/mobile/lib/widgets/gradient_text.dart index a21da74..c1b3d90 100644 --- a/mobile/lib/widgets/gradient_text.dart +++ b/mobile/lib/widgets/gradient_text.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import '../theme/app_theme.dart'; -/// Brand wordmark — ink (not rainbow gradient) so Quiet Ink stays calm. +/// Brand wordmark — ink weight, no rainbow gradient. class GradientText extends StatelessWidget { const GradientText(this.text, {super.key, this.style, this.textAlign}); @@ -16,7 +16,7 @@ class GradientText extends StatelessWidget { return Text( text, textAlign: textAlign, - style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w800), + style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w700), ); } } diff --git a/mobile/lib/widgets/message_bubble.dart b/mobile/lib/widgets/message_bubble.dart index 3bbd422..8ef3a4f 100644 --- a/mobile/lib/widgets/message_bubble.dart +++ b/mobile/lib/widgets/message_bubble.dart @@ -3,7 +3,7 @@ import 'package:flutter/material.dart'; import '../models/models.dart'; import '../theme/app_theme.dart'; -/// Twin messages get a dashed border + badge (PRD §3.1 와카뷰 뱃지). +/// Twin messages get a warm thin border + label (PRD §3.1 와카뷰 뱃지). class MessageBubble extends StatelessWidget { const MessageBubble({ super.key, @@ -34,49 +34,54 @@ class MessageBubble extends StatelessWidget { final Color bg; final Color fg; + Border? border; if (retracted) { bg = scheme.surfaceContainerHigh; fg = scheme.onSurfaceVariant; + } else if (twin) { + bg = brightness == Brightness.dark + ? const Color(0xFF221C14) + : const Color(0xFFFAF6F0); + fg = scheme.onSurface; + border = Border.all(color: accent.withValues(alpha: 0.4), width: 1); } else if (isMine) { bg = AppTheme.mineBubble(brightness); fg = AppTheme.mineBubbleFg(brightness); } else { bg = AppTheme.peerBubble(brightness); fg = scheme.onSurface; + border = Border.all(color: scheme.outlineVariant.withValues(alpha: 0.9)); } final radius = BorderRadius.only( - topLeft: const Radius.circular(18), - topRight: const Radius.circular(18), - bottomLeft: Radius.circular(isMine ? 18 : 5), - bottomRight: Radius.circular(isMine ? 5 : 18), + topLeft: const Radius.circular(AppTheme.rBubble), + topRight: const Radius.circular(AppTheme.rBubble), + bottomLeft: Radius.circular(isMine ? AppTheme.rBubble : 6), + bottomRight: Radius.circular(isMine ? 6 : AppTheme.rBubble), ); final bubble = Container( constraints: BoxConstraints(maxWidth: MediaQuery.sizeOf(context).width * 0.76), padding: const EdgeInsets.fromLTRB(14, 10, 14, 8), - decoration: BoxDecoration(color: bg, borderRadius: radius), + decoration: BoxDecoration( + color: bg, + borderRadius: radius, + border: border, + ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ if (twin) Padding( - padding: const EdgeInsets.only(bottom: 6), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Icon(Icons.auto_awesome, size: 13, color: accent), - const SizedBox(width: 4), - Text( - '와카뷰', - style: theme.textTheme.labelSmall?.copyWith( - color: accent, - fontWeight: FontWeight.w800, - letterSpacing: 0.2, - ), - ), - ], + padding: const EdgeInsets.only(bottom: 4), + child: Text( + '와카뷰', + style: theme.textTheme.labelSmall?.copyWith( + color: accent, + fontWeight: FontWeight.w700, + letterSpacing: 0.2, + ), ), ), if (retracted) @@ -109,12 +114,7 @@ class MessageBubble extends StatelessWidget { crossAxisAlignment: isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ - twin - ? CustomPaint( - painter: _DashedRRectPainter(color: accent, radius: radius), - child: bubble, - ) - : bubble, + bubble, if (twin && isMine && !retracted && onRetract != null) Padding( padding: const EdgeInsets.only(top: 2, right: 4, left: 4), @@ -143,39 +143,3 @@ class MessageBubble extends StatelessWidget { ); } } - -class _DashedRRectPainter extends CustomPainter { - _DashedRRectPainter({required this.color, required this.radius}); - - final Color color; - final BorderRadius radius; - - @override - void paint(Canvas canvas, Size size) { - final paint = Paint() - ..color = color - ..style = PaintingStyle.stroke - ..strokeWidth = 1.2; - final rrect = radius.toRRect(Rect.fromLTWH(0.7, 0.7, size.width - 1.4, size.height - 1.4)); - final path = Path()..addRRect(rrect); - canvas.drawPath(_dashPath(path, dashLength: 5, gapLength: 4), paint); - } - - Path _dashPath(Path source, {required double dashLength, required double gapLength}) { - final metrics = source.computeMetrics(); - final out = Path(); - for (final metric in metrics) { - var distance = 0.0; - while (distance < metric.length) { - final next = distance + dashLength; - out.addPath(metric.extractPath(distance, next.clamp(0, metric.length)), Offset.zero); - distance = next + gapLength; - } - } - return out; - } - - @override - bool shouldRepaint(covariant _DashedRRectPainter oldDelegate) => - oldDelegate.color != color || oldDelegate.radius != radius; -} diff --git a/mobile/lib/widgets/my_user_id_chip.dart b/mobile/lib/widgets/my_user_id_chip.dart index a635b31..fd88bca 100644 --- a/mobile/lib/widgets/my_user_id_chip.dart +++ b/mobile/lib/widgets/my_user_id_chip.dart @@ -34,19 +34,19 @@ class MyUserIdChip extends StatelessWidget { final brightness = theme.brightness; return Material( color: AppTheme.glassFill(brightness), - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(AppTheme.rPanel), child: InkWell( - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(AppTheme.rPanel), onTap: () => _copy(context), child: Container( padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(14), + borderRadius: BorderRadius.circular(AppTheme.rPanel), border: Border.all(color: AppTheme.glassBorder(brightness)), ), child: Row( children: [ - Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.primary), + Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.onSurfaceVariant), const SizedBox(width: 10), Expanded( child: Column( @@ -61,8 +61,8 @@ class MyUserIdChip extends StatelessWidget { Text( '$userId', style: theme.textTheme.titleMedium?.copyWith( - fontWeight: FontWeight.w700, - letterSpacing: 0.4, + fontWeight: FontWeight.w600, + letterSpacing: 0.3, ), ), ], @@ -72,7 +72,7 @@ class MyUserIdChip extends StatelessWidget { '복사', style: theme.textTheme.labelSmall?.copyWith( color: theme.colorScheme.primary, - fontWeight: FontWeight.w700, + fontWeight: FontWeight.w600, ), ), const SizedBox(width: 4), diff --git a/mobile/lib/widgets/primary_gradient_button.dart b/mobile/lib/widgets/primary_gradient_button.dart index fc72997..7e9519c 100644 --- a/mobile/lib/widgets/primary_gradient_button.dart +++ b/mobile/lib/widgets/primary_gradient_button.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import '../theme/app_theme.dart'; -/// Primary CTA — solid teal (API name kept for existing call sites). +/// Primary CTA — Soft Neutral ink fill (API name kept for call sites). class PrimaryGradientButton extends StatelessWidget { const PrimaryGradientButton({ super.key, @@ -18,28 +18,34 @@ class PrimaryGradientButton extends StatelessWidget { @override Widget build(BuildContext context) { final isDark = Theme.of(context).brightness == Brightness.dark; - final bg = isDark ? AppTheme.tealBright : AppTheme.teal; + final bg = isDark ? AppTheme.inkDark : AppTheme.inkLight; final fg = isDark ? AppTheme.canvasDark : Colors.white; final disabled = onPressed == null || loading; return SizedBox( - height: 52, + height: 48, width: double.infinity, child: FilledButton( onPressed: disabled && !loading ? null : onPressed, style: FilledButton.styleFrom( backgroundColor: bg, foregroundColor: fg, - disabledBackgroundColor: bg.withValues(alpha: 0.4), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), + disabledBackgroundColor: bg.withValues(alpha: 0.35), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppTheme.rButton), + ), elevation: 0, + shadowColor: Colors.transparent, ), child: loading ? SizedBox( - height: 20, - width: 20, + height: 18, + width: 18, child: CircularProgressIndicator(strokeWidth: 2, color: fg), ) - : Text(label, style: TextStyle(color: fg, fontWeight: FontWeight.w700, fontSize: 16)), + : Text( + label, + style: TextStyle(color: fg, fontWeight: FontWeight.w600, fontSize: 15), + ), ), ); }