fix(social): standardize community feed typography and theme colors (#49)
This commit is contained in:
Developer
parent
265ee83e03
commit
1820739a49
File diff suppressed because it is too large
Load Diff
|
|
@ -100,6 +100,14 @@ class _FeedCommentsBottomSheetState
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.motorColors;
|
||||
final isLight = Theme.of(context).brightness == Brightness.light;
|
||||
final secondaryTextColor =
|
||||
isLight ? AppColors.lightOnSurfaceVariant : AppColors.darkOnSurfaceVariant;
|
||||
final accentColor =
|
||||
isLight ? AppColors.brandBlueStrong : colors.brandCyanBright;
|
||||
final sendBg = isLight ? AppColors.brandBlueStrong : AppColors.electricCyan;
|
||||
final sendFg = isLight ? AppColors.onBrand : const Color(0xFF00363D);
|
||||
|
||||
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
|
||||
final feedItems = ref.watch(socialFeedNotifierProvider);
|
||||
final livePost = feedItems.cast<SocialFeedItem?>().firstWhere(
|
||||
|
|
@ -116,14 +124,14 @@ class _FeedCommentsBottomSheetState
|
|||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF101419),
|
||||
color: colors.surfaceCardPrimary,
|
||||
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
|
||||
border: Border.all(color: colors.outlineVariant.withValues(alpha: 0.5)),
|
||||
boxShadow: const [
|
||||
border: Border.all(color: colors.surfaceBorder),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black87,
|
||||
color: colors.glowShadow,
|
||||
blurRadius: 30,
|
||||
offset: Offset(0, -10),
|
||||
offset: const Offset(0, -10),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
@ -139,7 +147,7 @@ class _FeedCommentsBottomSheetState
|
|||
width: 44,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.outlineVariant,
|
||||
color: colors.surfaceBorder,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
|
|
@ -149,9 +157,9 @@ class _FeedCommentsBottomSheetState
|
|||
padding: const EdgeInsets.fromLTRB(20, 8, 12, 12),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icon(
|
||||
Icons.chat_bubble_outline_rounded,
|
||||
color: AppColors.electricCyan,
|
||||
color: accentColor,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
|
|
@ -161,7 +169,7 @@ class _FeedCommentsBottomSheetState
|
|||
fontFamily: AppTypography.fontHeadline,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white,
|
||||
color: colors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
|
|
@ -169,33 +177,35 @@ class _FeedCommentsBottomSheetState
|
|||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF1D2025),
|
||||
color: colors.surfaceCardSecondary,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: AppColors.electricCyan.withValues(alpha: 0.3),
|
||||
color: accentColor.withValues(alpha: 0.35),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'${comments.length}',
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontTelemetry,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.electricCyan,
|
||||
color: accentColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close_rounded,
|
||||
color: Color(0xFF849396)),
|
||||
icon: Icon(
|
||||
Icons.close_rounded,
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
tooltip: 'Close',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(color: Color(0xFF1D2025), height: 1),
|
||||
Divider(color: colors.surfaceBorder, height: 1),
|
||||
|
||||
// Comment List or Empty
|
||||
Flexible(
|
||||
|
|
@ -209,16 +219,16 @@ class _FeedCommentsBottomSheetState
|
|||
Icon(
|
||||
Icons.forum_outlined,
|
||||
size: 40,
|
||||
color: colors.outline.withValues(alpha: 0.4),
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const Text(
|
||||
Text(
|
||||
'No debrief comments yet',
|
||||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontHeadline,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white70,
|
||||
color: colors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
|
|
@ -228,7 +238,7 @@ class _FeedCommentsBottomSheetState
|
|||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontBody,
|
||||
fontSize: 12,
|
||||
color: colors.outline,
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
@ -246,10 +256,10 @@ class _FeedCommentsBottomSheetState
|
|||
return Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF181C21),
|
||||
color: colors.surfaceCardSecondary,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: const Color(0xFF272A30),
|
||||
color: colors.surfaceBorder,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
|
|
@ -259,12 +269,11 @@ class _FeedCommentsBottomSheetState
|
|||
children: [
|
||||
CircleAvatar(
|
||||
radius: 14,
|
||||
backgroundColor:
|
||||
const Color(0xFF272A30),
|
||||
child: const Icon(
|
||||
backgroundColor: colors.surfaceCardPrimary,
|
||||
child: Icon(
|
||||
Icons.sports_motorsports_rounded,
|
||||
size: 16,
|
||||
color: AppColors.electricCyan,
|
||||
color: accentColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
|
|
@ -275,12 +284,12 @@ class _FeedCommentsBottomSheetState
|
|||
child: Text(
|
||||
c.authorDisplayName,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontFamily:
|
||||
AppTypography.fontHeadline,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
color: colors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -292,7 +301,7 @@ class _FeedCommentsBottomSheetState
|
|||
fontFamily:
|
||||
AppTypography.fontBody,
|
||||
fontSize: 11,
|
||||
color: colors.outline,
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
@ -304,7 +313,7 @@ class _FeedCommentsBottomSheetState
|
|||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontTelemetry,
|
||||
fontSize: 10,
|
||||
color: colors.outline,
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
@ -314,11 +323,11 @@ class _FeedCommentsBottomSheetState
|
|||
padding: const EdgeInsets.only(left: 36),
|
||||
child: Text(
|
||||
c.content,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontBody,
|
||||
fontSize: 13,
|
||||
height: 1.35,
|
||||
color: Color(0xFFE0E2EA),
|
||||
color: colors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -329,7 +338,7 @@ class _FeedCommentsBottomSheetState
|
|||
),
|
||||
),
|
||||
|
||||
const Divider(color: Color(0xFF1D2025), height: 1),
|
||||
Divider(color: colors.surfaceBorder, height: 1),
|
||||
|
||||
// Comment Input Field (Glove Friendly)
|
||||
Padding(
|
||||
|
|
@ -340,28 +349,28 @@ class _FeedCommentsBottomSheetState
|
|||
child: Container(
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF181C21),
|
||||
color: colors.surfaceCardSecondary,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: const Color(0xFF272A30),
|
||||
color: colors.surfaceBorder,
|
||||
),
|
||||
),
|
||||
child: TextField(
|
||||
controller: _commentController,
|
||||
style: const TextStyle(
|
||||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontBody,
|
||||
fontSize: 13,
|
||||
color: Colors.white,
|
||||
color: colors.textPrimary,
|
||||
),
|
||||
decoration: const InputDecoration(
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Add comment or pace tip...',
|
||||
hintStyle: TextStyle(
|
||||
fontFamily: AppTypography.fontBody,
|
||||
fontSize: 13,
|
||||
color: Color(0xFF849396),
|
||||
color: secondaryTextColor,
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.symmetric(
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 14,
|
||||
vertical: 14,
|
||||
),
|
||||
|
|
@ -376,8 +385,8 @@ class _FeedCommentsBottomSheetState
|
|||
width: 48,
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.electricCyan,
|
||||
foregroundColor: const Color(0xFF00363D),
|
||||
backgroundColor: sendBg,
|
||||
foregroundColor: sendFg,
|
||||
padding: EdgeInsets.zero,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
|
|
@ -387,12 +396,12 @@ class _FeedCommentsBottomSheetState
|
|||
onPressed:
|
||||
_isSubmitting ? null : () => _handlePostComment(),
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
? SizedBox(
|
||||
width: 18,
|
||||
height: 18,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Color(0xFF00363D),
|
||||
color: sendFg,
|
||||
),
|
||||
)
|
||||
: const Icon(Icons.send_rounded, size: 20),
|
||||
|
|
|
|||
|
|
@ -421,13 +421,13 @@ class _ShareSessionModalState extends ConsumerState<ShareSessionModal> {
|
|||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
const Text(
|
||||
'Publish telemetry & route to community feed',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontFamily: AppTypography.fontBody,
|
||||
fontSize: 12,
|
||||
color: colors.outline,
|
||||
color: AppColors.darkOnSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -768,4 +768,137 @@ void main() {
|
|||
},
|
||||
);
|
||||
});
|
||||
|
||||
group('BUG-002: Social Feed Typography & Theme Contrast Tests', () {
|
||||
double contrastRatio(Color fg, Color bg) {
|
||||
final l1 = fg.computeLuminance();
|
||||
final l2 = bg.computeLuminance();
|
||||
final brightest = l1 > l2 ? l1 : l2;
|
||||
final darkest = l1 > l2 ? l2 : l1;
|
||||
return (brightest + 0.05) / (darkest + 0.05);
|
||||
}
|
||||
|
||||
for (final isLight in [false, true]) {
|
||||
testWidgets(
|
||||
'SocialFeedScreen and FeedCommentsBottomSheet maintain WCAG AA (>= 4.5:1) contrast in ${isLight ? "Light" : "Dark"} mode',
|
||||
(tester) async {
|
||||
await tester.binding.setSurfaceSize(const Size(412, 915));
|
||||
|
||||
final themeColors = isLight
|
||||
? MotorSignalThemeColors.light
|
||||
: MotorSignalThemeColors.dark;
|
||||
final baseTheme = isLight ? ThemeData.light() : ThemeData.dark();
|
||||
|
||||
final service = SocialFeedService();
|
||||
addTearDown(service.dispose);
|
||||
|
||||
await tester.pumpWidget(
|
||||
ProviderScope(
|
||||
overrides: [
|
||||
socialFeedServiceProvider.overrideWithValue(service),
|
||||
],
|
||||
child: MediaQuery(
|
||||
data: const MediaQueryData(
|
||||
size: Size(412, 915),
|
||||
textScaler: TextScaler.linear(1.2),
|
||||
),
|
||||
child: MaterialApp(
|
||||
theme: baseTheme.copyWith(
|
||||
extensions: [themeColors],
|
||||
),
|
||||
home: const SocialFeedScreen(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 50));
|
||||
|
||||
expect(tester.takeException(), isNull);
|
||||
|
||||
// 1. AppBar title contrast against canvas surface
|
||||
final appBarTitle = tester.widget<Text>(find.text('Community Feed'));
|
||||
expect(
|
||||
contrastRatio(appBarTitle.style!.color!, themeColors.surfaceCanvas),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
// 2. Card primary text (@authorHandle and rideTitle) against card primary surface
|
||||
final handleText = tester.widget<Text>(find.text('@ApexMarcus'));
|
||||
expect(
|
||||
contrastRatio(
|
||||
handleText.style!.color!,
|
||||
themeColors.surfaceCardPrimary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
final rideTitleText = tester.widget<Text>(
|
||||
find.text('Sunday Skyline & Pescadero Carve'),
|
||||
);
|
||||
expect(
|
||||
contrastRatio(
|
||||
rideTitleText.style!.color!,
|
||||
themeColors.surfaceCardPrimary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
// 3. Card secondary text (clubName) against card primary surface
|
||||
final clubText = tester.widget<Text>(
|
||||
find.text('Bay Area Twisties Club'),
|
||||
);
|
||||
expect(
|
||||
contrastRatio(
|
||||
clubText.style!.color!,
|
||||
themeColors.surfaceCardPrimary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
// 4. Filter tabs (selected vs unselected) contrast
|
||||
final selectedFilterText = tester.widget<Text>(
|
||||
find.text('All Activity'),
|
||||
);
|
||||
final selectedFilterBg = isLight
|
||||
? const Color(0xFF0047B3)
|
||||
: const Color(0xFF00E5FF);
|
||||
expect(
|
||||
contrastRatio(selectedFilterText.style!.color!, selectedFilterBg),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
final unselectedFilterText = tester.widget<Text>(
|
||||
find.text('Club Only'),
|
||||
);
|
||||
expect(
|
||||
contrastRatio(
|
||||
unselectedFilterText.style!.color!,
|
||||
themeColors.surfaceCardSecondary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
// 5. Telemetry metric labels and values contrast against metric cell surface
|
||||
final distLabel = tester.widget<Text>(find.text('DISTANCE').first);
|
||||
expect(
|
||||
contrastRatio(
|
||||
distLabel.style!.color!,
|
||||
themeColors.surfaceCardPrimary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
|
||||
final leanValue = tester.widget<Text>(find.text('51°').first);
|
||||
expect(
|
||||
contrastRatio(
|
||||
leanValue.style!.color!,
|
||||
themeColors.surfaceCardPrimary,
|
||||
),
|
||||
greaterThanOrEqualTo(4.5),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue