patrick/sojorn
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Replace inline Colors.* with SojornColors tokens in quip_editor, quip_metadata, video_editor screens

Browse source
This commit is contained in:
Patrick Britton 2026-02-10 14:40:48 -06:00
parent 7a53f41b97
commit 2551829604
2 changed files with 43 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
sojorn_app/lib/screens/compose/video_editor_screen.dart
View file

@ -11,6 +11,7 @@ import 'package:ffmpeg_kit_flutter_new/return_code.dart';
import '../../models/sojorn_media_result.dart'; import '../../models/sojorn_media_result.dart';
import '../../theme/app_theme.dart'; import '../../theme/app_theme.dart';
import '../../theme/tokens.dart';
/// Sojorn Video Editor with basic trimming and FFmpeg export /// Sojorn Video Editor with basic trimming and FFmpeg export
/// Implements video editing with H.264 codec support via FFmpeg /// Implements video editing with H.264 codec support via FFmpeg
@ -229,7 +230,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
if (!_isExporting) return const SizedBox.shrink(); if (!_isExporting) return const SizedBox.shrink();
return Container( return Container(
color: Colors.black54, color: const Color(0x8A000000),
child: Center( child: Center(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -241,7 +242,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
const SizedBox(height: 16), const SizedBox(height: 16),
Text( Text(
_exportStatus.isNotEmpty ? _exportStatus : 'Exporting...', _exportStatus.isNotEmpty ? _exportStatus : 'Exporting...',
style: const TextStyle(color: Colors.white), style: const TextStyle(color: SojornColors.basicWhite),
), ),
], ],
), ),
@ -338,15 +339,15 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
children: [ children: [
Text( Text(
'Start: ${_startTrim.inSeconds}s', 'Start: ${_startTrim.inSeconds}s',
style: GoogleFonts.inter(color: Colors.white70), style: GoogleFonts.inter(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
Text( Text(
'End: ${_endTrim.inSeconds}s', 'End: ${_endTrim.inSeconds}s',
style: GoogleFonts.inter(color: Colors.white70), style: GoogleFonts.inter(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
Text( Text(
'Duration: ${trimDuration.inSeconds}s', 'Duration: ${trimDuration.inSeconds}s',
style: GoogleFonts.inter(color: Colors.white70), style: GoogleFonts.inter(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
], ],
), ),
@ -354,7 +355,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
SliderTheme( SliderTheme(
data: SliderTheme.of(context).copyWith( data: SliderTheme.of(context).copyWith(
activeTrackColor: _brightNavy, activeTrackColor: _brightNavy,
inactiveTrackColor: Colors.white24, inactiveTrackColor: SojornColors.basicWhite.withValues(alpha: 0.24),
thumbColor: _brightNavy, thumbColor: _brightNavy,
overlayColor: _brightNavy.withOpacity(0.2), overlayColor: _brightNavy.withOpacity(0.2),
trackHeight: 4, trackHeight: 4,
@ -387,7 +388,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
}, },
icon: Icon( icon: Icon(
_isTrimming ? Icons.check : Icons.edit, _isTrimming ? Icons.check : Icons.edit,
color: _isTrimming ? _brightNavy : Colors.white70, color: _isTrimming ? _brightNavy : SojornColors.basicWhite.withValues(alpha: 0.7),
), ),
tooltip: _isTrimming ? 'Finish Trimming' : 'Enable Trimming', tooltip: _isTrimming ? 'Finish Trimming' : 'Enable Trimming',
), ),
@ -399,7 +400,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
_endTrim = duration; _endTrim = duration;
}); });
}, },
icon: Icon(Icons.restore, color: Colors.white70), icon: Icon(Icons.restore, color: SojornColors.basicWhite.withValues(alpha: 0.7)),
tooltip: 'Reset Trim', tooltip: 'Reset Trim',
), ),
], ],
@ -413,20 +414,20 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
// For web or bytes, show placeholder // For web or bytes, show placeholder
if (kIsWeb || widget.videoBytes != null) { if (kIsWeb || widget.videoBytes != null) {
return Scaffold( return Scaffold(
backgroundColor: _matteBlack, backgroundColor: SojornColors.matteBlack,
appBar: AppBar( appBar: AppBar(
backgroundColor: _matteBlack, backgroundColor: SojornColors.matteBlack,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
leading: IconButton( leading: IconButton(
tooltip: 'Cancel', tooltip: 'Cancel',
icon: const Icon(Icons.close), icon: const Icon(Icons.close),
onPressed: _isExporting ? null : () => Navigator.pop(context), onPressed: () => Navigator.of(context).pop(),
), ),
actions: [ actions: [
TextButton( TextButton(
onPressed: _isExporting ? null : _saveWithoutEditing, onPressed: _isExporting ? null : _saveWithoutEditing,
style: TextButton.styleFrom( style: TextButton.styleFrom(
foregroundColor: _brightNavy, foregroundColor: SojornColors.brightNavy,
), ),
child: _isExporting child: _isExporting
? const SizedBox( ? const SizedBox(
@ -434,7 +435,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
height: 16, height: 16,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white), valueColor: AlwaysStoppedAnimation<Color>(SojornColors.basicWhite),
), ),
) )
: const Text('Save'), : const Text('Save'),
@ -449,7 +450,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
Icon( Icon(
Icons.video_library, Icons.video_library,
size: 64, size: 64,
color: _brightNavy, color: SojornColors.brightNavy,
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
Padding( Padding(
@ -459,7 +460,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontSize: 24, fontSize: 24,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Colors.white, color: SojornColors.basicWhite,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -471,7 +472,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
'Video editing is not supported on web yet.\nYour video will be saved without editing.', 'Video editing is not supported on web yet.\nYour video will be saved without editing.',
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontSize: 14, fontSize: 14,
color: Colors.white70, color: SojornColors.basicWhite.withValues(alpha: 0.7),
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -483,8 +484,8 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
label: Text( label: Text(
_isExporting ? 'Processing...' : 'Continue with Video'), _isExporting ? 'Processing...' : 'Continue with Video'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: _brightNavy, backgroundColor: SojornColors.brightNavy,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 32, horizontal: 32,
vertical: 16, vertical: 16,
@ -500,18 +501,18 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
// Show loading state // Show loading state
if (_isLoading) { if (_isLoading) {
return Scaffold( return Scaffold(
backgroundColor: _matteBlack, backgroundColor: SojornColors.matteBlack,
body: Center( body: Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
CircularProgressIndicator( CircularProgressIndicator(
color: _brightNavy, color: SojornColors.brightNavy,
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
const Text( const Text(
'Initializing editor...', 'Initializing editor...',
style: TextStyle(color: Colors.white), style: TextStyle(color: SojornColors.basicWhite),
), ),
], ],
), ),
@ -522,10 +523,10 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
// Show error state if initialization failed // Show error state if initialization failed
if (!_isInitialized) { if (!_isInitialized) {
return Scaffold( return Scaffold(
backgroundColor: _matteBlack, backgroundColor: SojornColors.matteBlack,
appBar: AppBar( appBar: AppBar(
backgroundColor: _matteBlack, backgroundColor: _matteBlack,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
leading: IconButton( leading: IconButton(
tooltip: 'Cancel', tooltip: 'Cancel',
icon: const Icon(Icons.close), icon: const Icon(Icons.close),
@ -549,7 +550,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontSize: 20, fontSize: 20,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Colors.white, color: SojornColors.basicWhite,
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -561,7 +562,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
'Please try again or use a different video', 'Please try again or use a different video',
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontSize: 14, fontSize: 14,
color: Colors.white70, color: SojornColors.basicWhite.withValues(alpha: 0.7),
), ),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
@ -573,7 +574,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
label: const Text('Save Original Video'), label: const Text('Save Original Video'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: _brightNavy, backgroundColor: _brightNavy,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 32, horizontal: 32,
vertical: 16, vertical: 16,
@ -591,7 +592,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
backgroundColor: _matteBlack, backgroundColor: _matteBlack,
appBar: AppBar( appBar: AppBar(
backgroundColor: _matteBlack, backgroundColor: _matteBlack,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
leading: IconButton( leading: IconButton(
tooltip: 'Cancel', tooltip: 'Cancel',
icon: const Icon(Icons.close), icon: const Icon(Icons.close),
@ -609,7 +610,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
height: 16, height: 16,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white), valueColor: AlwaysStoppedAnimation<Color>(SojornColors.basicWhite),
), ),
) )
: const Text('Save'), : const Text('Save'),
@ -635,7 +636,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
Container( Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05), color: SojornColors.basicWhite.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: Row( child: Row(
@ -643,7 +644,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
children: [ children: [
Text( Text(
'Original: ${_videoController!.value.duration.inSeconds}s', 'Original: ${_videoController!.value.duration.inSeconds}s',
style: GoogleFonts.inter(color: Colors.white70), style: GoogleFonts.inter(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
Text( Text(
'Trimmed: ${(_endTrim - _startTrim).inSeconds}s', 'Trimmed: ${(_endTrim - _startTrim).inSeconds}s',
@ -651,7 +652,7 @@ class _sojornVideoEditorState extends State<sojornVideoEditor> {
color: (_endTrim - _startTrim) < color: (_endTrim - _startTrim) <
_videoController!.value.duration _videoController!.value.duration
? _brightNavy ? _brightNavy
: Colors.white70, : SojornColors.basicWhite.withValues(alpha: 0.7),
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),

19
sojorn_app/lib/screens/quips/create/quip_editor_screen.dart
View file

@ -8,6 +8,7 @@ import '../../../services/api_service.dart';
import '../../../models/sojorn_media_result.dart'; import '../../../models/sojorn_media_result.dart';
import '../../../providers/api_provider.dart'; import '../../../providers/api_provider.dart';
import '../../../theme/tokens.dart';
import '../../../services/image_upload_service.dart'; import '../../../services/image_upload_service.dart';
import '../../../theme/app_theme.dart'; import '../../../theme/app_theme.dart';
import '../../compose/video_editor_screen.dart'; import '../../compose/video_editor_screen.dart';
@ -159,7 +160,7 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
backgroundColor: const Color(0xFF0B0B0B), backgroundColor: const Color(0xFF0B0B0B),
appBar: AppBar( appBar: AppBar(
backgroundColor: const Color(0xFF0B0B0B), backgroundColor: const Color(0xFF0B0B0B),
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
title: const Text('Create Quip'), title: const Text('Create Quip'),
actions: [ actions: [
if (!videoDurationOk) if (!videoDurationOk)
@ -187,7 +188,7 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
Expanded( Expanded(
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black, color: SojornColors.basicBlack,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
border: Border.all( border: Border.all(
color: AppTheme.brightNavy.withOpacity(0.3), color: AppTheme.brightNavy.withOpacity(0.3),
@ -206,7 +207,7 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
const SizedBox(height: 16), const SizedBox(height: 16),
Text( Text(
'Video Duration: ${widget.originalDuration.inSeconds}s', 'Video Duration: ${widget.originalDuration.inSeconds}s',
style: const TextStyle(color: Colors.white70), style: TextStyle(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
if (!videoDurationOk) ...[ if (!videoDurationOk) ...[
const SizedBox(height: 8), const SizedBox(height: 8),
@ -243,17 +244,17 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
controller: _captionController, controller: _captionController,
maxLines: 2, maxLines: 2,
maxLength: 150, maxLength: 150,
style: const TextStyle(color: Colors.white), style: const TextStyle(color: SojornColors.basicWhite),
decoration: InputDecoration( decoration: InputDecoration(
hintText: 'Add a caption (optional)', hintText: 'Add a caption (optional)',
hintStyle: const TextStyle(color: Colors.white54), hintStyle: TextStyle(color: SojornColors.basicWhite.withValues(alpha: 0.54)),
filled: true, filled: true,
fillColor: Colors.white.withOpacity(0.08), fillColor: SojornColors.basicWhite.withValues(alpha: 0.08),
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
counterStyle: const TextStyle(color: Colors.white54), counterStyle: TextStyle(color: SojornColors.basicWhite.withValues(alpha: 0.54)),
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
@ -278,7 +279,7 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
Expanded( Expanded(
child: Text( child: Text(
_statusMessage!, _statusMessage!,
style: const TextStyle(color: Colors.white70), style: TextStyle(color: SojornColors.basicWhite.withValues(alpha: 0.7)),
), ),
), ),
], ],
@ -292,7 +293,7 @@ class _QuipEditorScreenState extends ConsumerState<QuipEditorScreen> {
label: Text(_isUploading ? 'Uploading...' : 'Post Quip'), label: Text(_isUploading ? 'Uploading...' : 'Post Quip'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: AppTheme.brightNavy, backgroundColor: AppTheme.brightNavy,
foregroundColor: Colors.white, foregroundColor: SojornColors.basicWhite,
padding: const EdgeInsets.symmetric(vertical: 16), padding: const EdgeInsets.symmetric(vertical: 16),
disabledBackgroundColor: AppTheme.brightNavy.withOpacity(0.5), disabledBackgroundColor: AppTheme.brightNavy.withOpacity(0.5),
), ),