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

Enhance previous chain visibility with debug styling

Browse source 
- Make gradient more prominent with higher opacity values
- Add thicker top border for better visual separation
- Increase font weights and sizes for better readability
- Add temporary red background for debugging visibility
- Adjust padding and margins for better spacing
This commit is contained in:
Patrick Britton 2026-02-01 13:37:52 -06:00
parent 1cc6d22f20
commit af0b29bff1
1 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
sojorn_app/lib/widgets/kinetic_thread_widget.dart
View file

@ -497,7 +497,7 @@ class _KineticThreadWidgetState extends ConsumerState<KineticThreadWidget>
Widget _buildPreviousChainJump(ThreadNode parentNode) { Widget _buildPreviousChainJump(ThreadNode parentNode) {
return Container( return Container(
margin: const EdgeInsets.fromLTRB(16, 0, 16, 0), margin: const EdgeInsets.fromLTRB(16, 4, 16, 0),
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
if (_layerStack.length > 1) { if (_layerStack.length > 1) {
@ -512,27 +512,29 @@ class _KineticThreadWidgetState extends ConsumerState<KineticThreadWidget>
topLeft: Radius.circular(20), topLeft: Radius.circular(20),
topRight: Radius.circular(20), topRight: Radius.circular(20),
), ),
// Gradient from darker top to lighter bottom // Temporary debug background color
color: Colors.red.withValues(alpha: 0.1),
// More prominent gradient from darker top to lighter bottom
gradient: LinearGradient( gradient: LinearGradient(
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
colors: [ colors: [
AppTheme.navyBlue.withValues(alpha: 0.15), // Darker at top AppTheme.navyBlue.withValues(alpha: 0.25), // Darker at top
AppTheme.navyBlue.withValues(alpha: 0.08), // Lighter at bottom AppTheme.navyBlue.withValues(alpha: 0.12), // Lighter at bottom
Colors.transparent, // Fade to transparent Colors.transparent, // Fade to transparent
], ],
stops: const [0.0, 0.7, 1.0], stops: const [0.0, 0.6, 1.0],
), ),
// Subtle border at the top // More prominent border at the top
border: Border( border: Border(
top: BorderSide( top: BorderSide(
color: AppTheme.brightNavy.withValues(alpha: 0.3), color: AppTheme.brightNavy.withValues(alpha: 0.5),
width: 1, width: 2,
), ),
), ),
), ),
child: Container( child: Container(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 8), padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
child: Row( child: Row(
children: [ children: [
_buildMiniAvatar(parentNode), _buildMiniAvatar(parentNode),
@ -544,30 +546,31 @@ class _KineticThreadWidgetState extends ConsumerState<KineticThreadWidget>
Text( Text(
'Previous chain', 'Previous chain',
style: GoogleFonts.inter( style: GoogleFonts.inter(
color: AppTheme.textSecondary.withValues(alpha: 0.8), color: AppTheme.textSecondary.withValues(alpha: 0.9),
fontSize: 10, fontSize: 10,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
letterSpacing: 0.5, letterSpacing: 0.6,
), ),
), ),
const SizedBox(height: 3), const SizedBox(height: 4),
Text( Text(
parentNode.post.author?.displayName ?? 'Anonymous', parentNode.post.author?.displayName ?? 'Anonymous',
style: GoogleFonts.inter( style: GoogleFonts.inter(
color: AppTheme.navyBlue.withValues(alpha: 0.9), color: AppTheme.navyBlue.withValues(alpha: 0.95),
fontSize: 12, fontSize: 13,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w700,
), ),
), ),
const SizedBox(height: 2), const SizedBox(height: 3),
Text( Text(
parentNode.post.body, parentNode.post.body,
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: GoogleFonts.inter( style: GoogleFonts.inter(
color: AppTheme.navyText.withValues(alpha: 0.75), color: AppTheme.navyText.withValues(alpha: 0.8),
fontSize: 12, fontSize: 12,
height: 1.3, height: 1.3,
fontWeight: FontWeight.w500,
), ),
), ),
], ],
@ -575,15 +578,15 @@ class _KineticThreadWidgetState extends ConsumerState<KineticThreadWidget>
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Container( Container(
padding: const EdgeInsets.all(6), padding: const EdgeInsets.all(8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.brightNavy.withValues(alpha: 0.1), color: AppTheme.brightNavy.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(10),
), ),
child: Icon( child: Icon(
Icons.arrow_upward, Icons.arrow_upward,
size: 16, size: 18,
color: AppTheme.brightNavy.withValues(alpha: 0.8), color: AppTheme.brightNavy,
), ),
), ),
], ],