Skip to content

Commit 8619e8e

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 17453cc commit 8619e8e

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
@@ -1000,7 +1000,10 @@ class GlobalTime extends StatelessWidget {
10001000
child: Row(
10011001
mainAxisSize: MainAxisSize.min,
10021002
children: [
1003-
Icon(ZulipIcons.clock, size: surroundingFontSize),
1003+
Icon(
1004+
size: surroundingFontSize,
1005+
color: DefaultTextStyle.of(context).style.color!,
1006+
ZulipIcons.clock),
10041007
// Ad-hoc spacing adjustment per feedback:
10051008
// https://chat.zulip.org/#narrow/stream/101-design/topic/clock.20icons/near/1729345
10061009
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
@@ -694,6 +694,29 @@ void main() {
694694
tester.widget(find.textContaining(renderedTextRegexp));
695695
});
696696

697+
testWidgets('clock icon and text are the same color', (tester) async {
698+
await tester.pumpWidget(MaterialApp(home: DefaultTextStyle(
699+
style: const TextStyle(color: Colors.green),
700+
child: BlockContentList(nodes:
701+
parseContent('<p>$timeSpanHtml</p>').nodes),
702+
)));
703+
704+
final icon = tester.widget<Icon>(
705+
find.descendant(of: find.byType(GlobalTime),
706+
matching: find.byIcon(ZulipIcons.clock)));
707+
708+
final textSpan = tester.renderObject<RenderParagraph>(
709+
find.descendant(of: find.byType(GlobalTime),
710+
matching: find.textContaining(renderedTextRegexp)
711+
)).text;
712+
final textColor = mergedStyleOfSubstring(textSpan, renderedTextRegexp)!.color;
713+
check(textColor).isNotNull();
714+
715+
check(icon).color
716+
..equals(textColor!)
717+
..equals(Colors.green);
718+
});
719+
697720
testWidgets('maintains font-size ratio with surrounding text', (tester) async {
698721
Future<void> doCheck(double Function(GlobalTime widget) sizeFromWidget) async {
699722
await checkFontSizeRatio(tester,

0 commit comments

Comments
 (0)