From 7a53f41b97d1d9356426568665b69d820943e29b Mon Sep 17 00:00:00 2001 From: Patrick Britton Date: Tue, 10 Feb 2026 14:35:21 -0600 Subject: [PATCH] Replace inline Colors.* with SojornColors tokens in quip screens (video_item, preview, recorder, feed) --- .../quips/create/quip_preview_screen.dart | 43 ++++++------- .../quips/create/quip_recorder_screen.dart | 31 +++++----- .../screens/quips/feed/quip_video_item.dart | 61 ++++++++++--------- .../screens/quips/feed/quips_feed_screen.dart | 17 +++--- 4 files changed, 78 insertions(+), 74 deletions(-) diff --git a/sojorn_app/lib/screens/quips/create/quip_preview_screen.dart b/sojorn_app/lib/screens/quips/create/quip_preview_screen.dart index 672522c..75280be 100644 --- a/sojorn_app/lib/screens/quips/create/quip_preview_screen.dart +++ b/sojorn_app/lib/screens/quips/create/quip_preview_screen.dart @@ -5,6 +5,7 @@ import 'quip_studio_screen.dart'; // Stage 3 import 'quip_metadata_screen.dart'; // Stage 4 import '../../../models/sojorn_media_result.dart'; import '../../../theme/app_theme.dart'; +import '../../../theme/tokens.dart'; class QuipPreviewScreen extends StatefulWidget { final File videoFile; @@ -81,15 +82,15 @@ class _QuipPreviewScreenState extends State { showDialog( context: context, builder: (context) => AlertDialog( - backgroundColor: Colors.black87, + backgroundColor: const Color(0xDD000000), content: TextField( controller: textController, autofocus: true, - style: const TextStyle(color: Colors.white, fontSize: 24), + style: const TextStyle(color: SojornColors.basicWhite, fontSize: 24), decoration: const InputDecoration( border: InputBorder.none, hintText: 'Type here...', - hintStyle: TextStyle(color: Colors.white54), + hintStyle: TextStyle(color: SojornColors.basicWhite.withValues(alpha: 0.54)), ), ), actions: [ @@ -102,7 +103,7 @@ class _QuipPreviewScreenState extends State { } Navigator.pop(context); }, - child: const Text('Done', style: TextStyle(color: Colors.white)), + child: const Text('Done', style: TextStyle(color: SojornColors.basicWhite)), ) ], ), @@ -121,11 +122,11 @@ class _QuipPreviewScreenState extends State { @override Widget build(BuildContext context) { if (!_isInitialized) { - return const Scaffold(backgroundColor: Colors.black, body: Center(child: CircularProgressIndicator())); + return const Scaffold(backgroundColor: SojornColors.basicBlack, body: Center(child: CircularProgressIndicator())); } return Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: Stack( fit: StackFit.expand, children: [ @@ -143,21 +144,21 @@ class _QuipPreviewScreenState extends State { top: item.position.dy, child: Draggable( feedback: Material( - color: Colors.transparent, + color: SojornColors.transparent, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( - color: Colors.black.withOpacity(0.6), + color: SojornColors.overlayDark, borderRadius: BorderRadius.circular(8), - border: Border.all(color: Colors.white24, width: 1), + border: Border.all(color: SojornColors.basicWhite.withValues(alpha: 0.24), width: 1), ), child: Text( item.text, style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 28, fontWeight: FontWeight.bold, - shadows: [Shadow(blurRadius: 4, color: Colors.black)], + shadows: [Shadow(blurRadius: 4, color: SojornColors.basicBlack)], ), ), ), @@ -167,13 +168,13 @@ class _QuipPreviewScreenState extends State { child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( - color: Colors.black.withOpacity(0.6), + color: SojornColors.overlayDark, borderRadius: BorderRadius.circular(8), ), child: Text( item.text, style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 28, fontWeight: FontWeight.bold, ), @@ -199,16 +200,16 @@ class _QuipPreviewScreenState extends State { child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( - color: Colors.black.withOpacity(0.6), + color: SojornColors.overlayDark, borderRadius: BorderRadius.circular(8), ), child: Text( item.text, style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 28, fontWeight: FontWeight.bold, - shadows: [Shadow(blurRadius: 4, color: Colors.black)], + shadows: [Shadow(blurRadius: 4, color: SojornColors.basicBlack)], ), ), ), @@ -225,7 +226,7 @@ class _QuipPreviewScreenState extends State { child: Row( children: [ IconButton( - icon: const Icon(Icons.arrow_back, color: Colors.white), + icon: const Icon(Icons.arrow_back, color: SojornColors.basicWhite), onPressed: () => Navigator.pop(context), ), ], @@ -256,7 +257,7 @@ class _QuipPreviewScreenState extends State { child: FloatingActionButton( backgroundColor: AppTheme.brightNavy, onPressed: _next, - child: const Icon(Icons.arrow_forward, color: Colors.white), + child: const Icon(Icons.arrow_forward, color: SojornColors.basicWhite), ), ), ], @@ -270,13 +271,13 @@ class _QuipPreviewScreenState extends State { GestureDetector( onTap: onTap, child: CircleAvatar( - backgroundColor: Colors.black54, + backgroundColor: const Color(0x8A000000), radius: 24, - child: Icon(icon, color: Colors.white, size: 28), + child: Icon(icon, color: SojornColors.basicWhite, size: 28), ), ), const SizedBox(height: 4), - Text(label, style: const TextStyle(color: Colors.white, fontSize: 12, shadows: [Shadow(blurRadius: 2, color: Colors.black)])), + Text(label, style: const TextStyle(color: SojornColors.basicWhite, fontSize: 12, shadows: [Shadow(blurRadius: 2, color: SojornColors.basicBlack)])), ], ); } diff --git a/sojorn_app/lib/screens/quips/create/quip_recorder_screen.dart b/sojorn_app/lib/screens/quips/create/quip_recorder_screen.dart index c0c2f21..9b7e428 100644 --- a/sojorn_app/lib/screens/quips/create/quip_recorder_screen.dart +++ b/sojorn_app/lib/screens/quips/create/quip_recorder_screen.dart @@ -8,6 +8,7 @@ import 'package:image_picker/image_picker.dart'; import 'package:permission_handler/permission_handler.dart'; import 'package:sojorn/services/video_stitching_service.dart'; import 'package:video_player/video_player.dart'; +import '../../../theme/tokens.dart'; import '../../../theme/app_theme.dart'; import 'quip_preview_screen.dart'; // Stage 2 @@ -239,7 +240,7 @@ class _QuipRecorderScreenState extends State width: double.infinity, margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( - color: Colors.white24, + color: SojornColors.basicWhite.withValues(alpha: 0.24), borderRadius: BorderRadius.circular(3), ), child: ClipRRect( @@ -262,7 +263,7 @@ class _QuipRecorderScreenState extends State flex: (percent * 1000).toInt(), fit: FlexFit.loose, child: Container( - color: isActive ? Colors.redAccent : AppTheme.brightNavy, + color: isActive ? SojornColors.destructive : AppTheme.brightNavy, margin: const EdgeInsets.only(right: 2), ), ); @@ -271,17 +272,17 @@ class _QuipRecorderScreenState extends State @override Widget build(BuildContext context) { if (_isInitializing || _cameraController == null) { - return const Scaffold(backgroundColor: Colors.black, body: Center(child: CircularProgressIndicator())); + return const Scaffold(backgroundColor: SojornColors.basicBlack, body: Center(child: CircularProgressIndicator())); } return Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: SafeArea( child: Stack( children: [ Positioned.fill(child: CameraPreview(_cameraController!)), if (_isProcessing) - Container(color: Colors.black54, child: const Center(child: CircularProgressIndicator())), + Container(color: const Color(0x8A000000), child: const Center(child: CircularProgressIndicator())), Positioned( top: 0, left: 0, right: 0, @@ -294,17 +295,17 @@ class _QuipRecorderScreenState extends State mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( - icon: const Icon(Icons.close, color: Colors.white), + icon: const Icon(Icons.close, color: SojornColors.basicWhite), onPressed: () => Navigator.pop(context), ), Row( children: [ IconButton( - icon: Icon(_flashOn ? Icons.flash_on : Icons.flash_off, color: Colors.white), + icon: Icon(_flashOn ? Icons.flash_on : Icons.flash_off, color: SojornColors.basicWhite), onPressed: _toggleFlash, ), IconButton( - icon: const Icon(Icons.flip_camera_ios, color: Colors.white), + icon: const Icon(Icons.flip_camera_ios, color: SojornColors.basicWhite), onPressed: _toggleCamera, ), ], @@ -322,7 +323,7 @@ class _QuipRecorderScreenState extends State mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ IconButton( - icon: const Icon(Icons.photo_library_outlined, color: Colors.white, size: 28), + icon: const Icon(Icons.photo_library_outlined, color: SojornColors.basicWhite, size: 28), onPressed: _pickFromGallery, ), @@ -337,18 +338,18 @@ class _QuipRecorderScreenState extends State height: _isRecording ? 90 : 80, width: _isRecording ? 90 : 80, decoration: BoxDecoration( - border: Border.all(color: Colors.white, width: 4), + border: Border.all(color: SojornColors.basicWhite, width: 4), shape: BoxShape.circle, - color: Colors.transparent, + color: SojornColors.transparent, ), padding: const EdgeInsets.all(4), child: Container( decoration: BoxDecoration( - color: _isRecording ? Colors.redAccent : Colors.red, + color: _isRecording ? SojornColors.destructive : SojornColors.destructive, shape: BoxShape.circle, ), child: _isRecording - ? const Center(child: Icon(Icons.stop, color: Colors.white)) + ? const Center(child: Icon(Icons.stop, color: SojornColors.basicWhite)) : null, ), ), @@ -358,14 +359,14 @@ class _QuipRecorderScreenState extends State Row( children: [ IconButton( - icon: const Icon(Icons.backspace, color: Colors.white), + icon: const Icon(Icons.backspace, color: SojornColors.basicWhite), onPressed: _deleteLastSegment, ), const SizedBox(width: 12), FloatingActionButton.small( backgroundColor: AppTheme.brightNavy, onPressed: _finishAndNavigate, - child: const Icon(Icons.check, color: Colors.white), + child: const Icon(Icons.check, color: SojornColors.basicWhite), ), ], ) diff --git a/sojorn_app/lib/screens/quips/feed/quip_video_item.dart b/sojorn_app/lib/screens/quips/feed/quip_video_item.dart index eb67066..f7a1582 100644 --- a/sojorn_app/lib/screens/quips/feed/quip_video_item.dart +++ b/sojorn_app/lib/screens/quips/feed/quip_video_item.dart @@ -4,6 +4,7 @@ import '../../../widgets/media/signed_media_image.dart'; import '../../../widgets/video_player_with_comments.dart'; import '../../../models/post.dart'; import '../../../models/profile.dart'; +import '../../../theme/tokens.dart'; import 'quips_feed_screen.dart'; @@ -61,7 +62,7 @@ class QuipVideoItem extends StatelessWidget { if (initialized) { final size = controller!.value.size; return Container( - color: Colors.black, + color: SojornColors.basicBlack, child: Center( child: FittedBox( fit: BoxFit.cover, @@ -79,19 +80,19 @@ class QuipVideoItem extends StatelessWidget { return SignedMediaImage( url: quip.thumbnailUrl, fit: BoxFit.cover, - errorBuilder: (_, __, ___) => Container(color: Colors.black), + errorBuilder: (_, __, ___) => Container(color: SojornColors.basicBlack), loadingBuilder: (context) { return Container( - color: Colors.black, + color: SojornColors.basicBlack, child: const Center( - child: CircularProgressIndicator(color: Colors.white), + child: CircularProgressIndicator(color: SojornColors.basicWhite), ), ); }, ); } - return Container(color: Colors.black); + return Container(color: SojornColors.basicBlack); } Widget _buildActions() { @@ -100,7 +101,7 @@ class QuipVideoItem extends StatelessWidget { icon: isLiked ? Icons.favorite : Icons.favorite_border, label: likeCount > 0 ? likeCount.toString() : '', onTap: onLike, - color: isLiked ? Colors.redAccent : Colors.white, + color: isLiked ? SojornColors.destructive : SojornColors.basicWhite, ), _QuipAction( icon: Icons.chat_bubble_outline, @@ -138,12 +139,12 @@ class QuipVideoItem extends StatelessWidget { Text( '@${quip.username}', style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontWeight: FontWeight.w700, fontSize: 16, shadows: [ Shadow( - color: Colors.black54, + color: const Color(0x8A000000), offset: Offset(0, 1), blurRadius: 6, ), @@ -156,11 +157,11 @@ class QuipVideoItem extends StatelessWidget { maxLines: 2, overflow: TextOverflow.ellipsis, style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 14, shadows: [ Shadow( - color: Colors.black54, + color: const Color(0x8A000000), offset: Offset(0, 1), blurRadius: 6, ), @@ -170,16 +171,16 @@ class QuipVideoItem extends StatelessWidget { const SizedBox(height: 10), Row( children: const [ - Icon(Icons.music_note, color: Colors.white, size: 18), + Icon(Icons.music_note, color: SojornColors.basicWhite, size: 18), SizedBox(width: 6), Text( 'Original Audio', style: TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontWeight: FontWeight.w500, shadows: [ Shadow( - color: Colors.black45, + color: const Color(0x73000000), offset: Offset(0, 1), blurRadius: 6, ), @@ -200,12 +201,12 @@ class QuipVideoItem extends StatelessWidget { child: Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( - color: Colors.black.withOpacity(0.6), + color: SojornColors.overlayDark, shape: BoxShape.circle, ), child: const Icon( Icons.play_arrow, - color: Colors.white, + color: SojornColors.basicWhite, size: 48, ), ), @@ -217,7 +218,7 @@ class QuipVideoItem extends StatelessWidget { return GestureDetector( onTap: onTogglePause, child: Container( - color: Colors.black, + color: SojornColors.basicBlack, child: Stack( fit: StackFit.expand, children: [ @@ -232,9 +233,9 @@ class QuipVideoItem extends StatelessWidget { begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [ - Colors.black54, - Colors.transparent, - Colors.black45, + const Color(0x8A000000), + SojornColors.transparent, + const Color(0x73000000), ], stops: [0, 0.4, 1], ), @@ -255,11 +256,11 @@ class QuipVideoItem extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6), decoration: BoxDecoration( - color: Colors.black45, + color: const Color(0x73000000), borderRadius: BorderRadius.circular(24), boxShadow: [ BoxShadow( - color: Colors.black.withAlpha(102), + color: const Color(0x66000000), blurRadius: 6, offset: const Offset(0, 2), ), @@ -268,7 +269,7 @@ class QuipVideoItem extends StatelessWidget { child: const Text( 'Quips', style: TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontWeight: FontWeight.bold, ), ), @@ -281,13 +282,13 @@ class QuipVideoItem extends StatelessWidget { vertical: 6, ), decoration: BoxDecoration( - color: Colors.black45, + color: const Color(0x73000000), borderRadius: BorderRadius.circular(24), ), child: Text( '${(quip.durationMs! / 1000).toStringAsFixed(1)}s', style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 12, ), ), @@ -298,7 +299,7 @@ class QuipVideoItem extends StatelessWidget { _buildPauseOverlay(), if (!(controller?.value.isInitialized ?? false)) Center( - child: const CircularProgressIndicator(color: Colors.white), + child: const CircularProgressIndicator(color: SojornColors.basicWhite), ), ], ), @@ -329,7 +330,7 @@ class _QuipAction extends StatelessWidget { required this.icon, required this.onTap, this.label, - this.color = Colors.white, + this.color = SojornColors.basicWhite, }); @override @@ -338,11 +339,11 @@ class _QuipAction extends StatelessWidget { children: [ Container( decoration: BoxDecoration( - color: Colors.black54, + color: const Color(0x8A000000), shape: BoxShape.circle, boxShadow: [ BoxShadow( - color: Colors.black.withAlpha(102), + color: const Color(0x66000000), blurRadius: 8, offset: const Offset(0, 2), ), @@ -358,12 +359,12 @@ class _QuipAction extends StatelessWidget { Text( label!, style: const TextStyle( - color: Colors.white, + color: SojornColors.basicWhite, fontSize: 12, fontWeight: FontWeight.w600, shadows: [ Shadow( - color: Colors.black54, + color: const Color(0x8A000000), blurRadius: 4, offset: Offset(0, 1), ), diff --git a/sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart b/sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart index da6221e..db947c1 100644 --- a/sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart +++ b/sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart @@ -8,6 +8,7 @@ import '../../../providers/api_provider.dart'; import '../../../providers/feed_refresh_provider.dart'; import '../../../routes/app_routes.dart'; import '../../../theme/app_theme.dart'; +import '../../../theme/tokens.dart'; import '../../post/post_detail_screen.dart'; import 'quip_video_item.dart'; import '../../home/home_shell.dart'; @@ -446,7 +447,7 @@ class _QuipsFeedScreenState extends ConsumerState showModalBottomSheet( context: context, isScrollControlled: true, - backgroundColor: Colors.transparent, + backgroundColor: SojornColors.transparent, builder: (context) => VideoCommentsSheet( postId: quip.id, initialCommentCount: 0, @@ -469,14 +470,14 @@ class _QuipsFeedScreenState extends ConsumerState Widget build(BuildContext context) { if (_error != null) { return Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text( _error!, - style: const TextStyle(color: Colors.white), + style: const TextStyle(color: SojornColors.basicWhite), textAlign: TextAlign.center, ), const SizedBox(height: 12), @@ -492,27 +493,27 @@ class _QuipsFeedScreenState extends ConsumerState if (_quips.isEmpty && _isLoading) { return const Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: Center( - child: CircularProgressIndicator(color: Colors.white), + child: CircularProgressIndicator(color: SojornColors.basicWhite), ), ); } if (_quips.isEmpty) { return const Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: Center( child: Text( 'No quips yet. Be the first!', - style: TextStyle(color: Colors.white70), + style: TextStyle(color: SojornColors.basicWhite), ), ), ); } return Scaffold( - backgroundColor: Colors.black, + backgroundColor: SojornColors.basicBlack, body: Stack( children: [ RefreshIndicator(