Skip to content

Commit cedbb08

Browse files
committed
msglist: Set content font color to match web
With Chrome's web inspector and Mac's "Digital Color Meter", I verified that our color now matches web's color. Since GlobalTime's clock icon is a text-like element, change it to the new color too, and add a content test that makes sure the colors match each other, and match the DefaultTextStyle that content elements expect to inherit from. I didn't find any other text-like elements that need extra treatment like this.
1 parent ab82af1 commit cedbb08

File tree

3 files changed

+28
-4
lines changed

3 files changed

+28
-4
lines changed

lib/widgets/content.dart

+4-1
Original file line numberDiff line numberDiff line change
@@ -915,7 +915,10 @@ class GlobalTime extends StatelessWidget {
915915
child: Row(
916916
mainAxisSize: MainAxisSize.min,
917917
children: [
918-
Icon(ZulipIcons.clock, size: surroundingFontSize),
918+
Icon(
919+
size: surroundingFontSize,
920+
color: DefaultTextStyle.of(context).style.color!,
921+
ZulipIcons.clock),
919922
// Ad-hoc spacing adjustment per feedback:
920923
// https://chat.zulip.org/#narrow/stream/101-design/topic/clock.20icons/near/1729345
921924
const SizedBox(width: 1),

lib/widgets/message_list.dart

+1-3
Original file line numberDiff line numberDiff line change
@@ -267,9 +267,7 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
267267
if (!model!.fetched) return const Center(child: CircularProgressIndicator());
268268

269269
return DefaultTextStyle.merge(
270-
// TODO figure out text color -- web is supposedly hsl(0deg 0% 20%),
271-
// but seems much darker than that
272-
style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1)),
270+
style: TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor()),
273271
// Pad the left and right insets, for small devices in landscape.
274272
child: SafeArea(
275273
// Don't let this be the place we pad the bottom inset. When there's

test/widgets/content_test.dart

+23
Original file line numberDiff line numberDiff line change
@@ -614,6 +614,29 @@ void main() {
614614
tester.widget(find.textContaining(renderedTextRegexp));
615615
});
616616

617+
testWidgets('clock icon and text are the same color', (tester) async {
618+
await tester.pumpWidget(MaterialApp(home: DefaultTextStyle(
619+
style: const TextStyle(color: Colors.green),
620+
child: BlockContentList(nodes:
621+
parseContent('<p>$timeSpanHtml</p>').nodes),
622+
)));
623+
624+
final icon = tester.widget<Icon>(
625+
find.descendant(of: find.byType(GlobalTime),
626+
matching: find.byIcon(ZulipIcons.clock)));
627+
628+
final textSpan = tester.renderObject<RenderParagraph>(
629+
find.descendant(of: find.byType(GlobalTime),
630+
matching: find.textContaining(renderedTextRegexp)
631+
)).text;
632+
final textColor = mergedStyleOfSubstring(textSpan, renderedTextRegexp)!.color;
633+
check(textColor).isNotNull();
634+
635+
check(icon).color
636+
..equals(textColor!)
637+
..equals(Colors.green);
638+
});
639+
617640
testWidgets('maintains font-size ratio with surrounding text', (tester) async {
618641
Future<void> doCheck(double Function(GlobalTime widget) sizeFromWidget) async {
619642
await checkFontSizeRatio(tester,

0 commit comments

Comments
 (0)