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

Replace inline Colors.* with SojornColors tokens in quip screens (video_item, preview, recorder, feed)

Browse source
This commit is contained in:
Patrick Britton 2026-02-10 14:35:21 -06:00
parent 52dfa0c653
commit 7a53f41b97
4 changed files with 78 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
sojorn_app/lib/screens/quips/create/quip_preview_screen.dart
View file

@ -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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
}
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<QuipPreviewScreen> {
@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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
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<QuipPreviewScreen> {
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)])),
],
);
}

31
sojorn_app/lib/screens/quips/create/quip_recorder_screen.dart
View file

@ -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<QuipRecorderScreen>
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<QuipRecorderScreen>
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<QuipRecorderScreen>
@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<QuipRecorderScreen>
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<QuipRecorderScreen>
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<QuipRecorderScreen>
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<QuipRecorderScreen>
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),
),
],
)

61
sojorn_app/lib/screens/quips/feed/quip_video_item.dart
View file

@ -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),
),

17
sojorn_app/lib/screens/quips/feed/quips_feed_screen.dart
View file

@ -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<QuipsFeedScreen>
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<QuipsFeedScreen>
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<QuipsFeedScreen>
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(