mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
## Summary - align message typography, avatars, metadata, and spacing across mobile surfaces - improve message follow behavior, touch feedback, and Activity popover motion - refine Search motion, gutters, and explicit recent-search history ## Snapshots ### Home  ### Activity  ### Search  ## Testing - `just mobile-check` - `just mobile-test` (749 passed, 1 skipped) --------- Signed-off-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: kenny lopez <klopez4212@gmail.com> Signed-off-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz> Signed-off-by: Wes <wesbillman@users.noreply.github.com> Signed-off-by: npub15w828kxsxu2684ynste0uah2jwkgatd99flt7ds4523hzm8ju6cshdr8hh <a38ea3d8d03715a3d49382f2fe76ea93ac8eada52a7ebf3615a2a3716cf2e6b1@buzz.block.builderlab.xyz> Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz> Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Co-authored-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz> Co-authored-by: Wes <wesbillman@users.noreply.github.com> Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz> Co-authored-by: npub15w828kxsxu2684ynste0uah2jwkgatd99flt7ds4523hzm8ju6cshdr8hh <a38ea3d8d03715a3d49382f2fe76ea93ac8eada52a7ebf3615a2a3716cf2e6b1@buzz.block.builderlab.xyz>
132 lines
3.6 KiB
Dart
132 lines
3.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import 'grid.dart';
|
|
|
|
const _fontFamily = 'Inter';
|
|
|
|
/// Avatar size for full channel and thread messages.
|
|
const messageAvatarSize = 42.0;
|
|
|
|
/// Avatar size for conversation-oriented Activity rows.
|
|
const activityAvatarSize = messageAvatarSize;
|
|
|
|
/// Avatar size for compact message-result rows.
|
|
const compactMessageAvatarSize = messageAvatarSize;
|
|
|
|
/// Horizontal space between a message avatar and its content.
|
|
const messageAvatarContentGap = Grid.twelve;
|
|
|
|
/// Primary message copy: 15sp regular on a 20sp line height.
|
|
const messageBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 20 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Message author names: 15sp semibold on a 17sp line height.
|
|
const messageUsernameTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Secondary author metadata: 15sp regular on a tight 17sp line height.
|
|
const messageMetadataTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Message timestamps share the secondary author metadata style.
|
|
const messageTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Compact reply previews: 13.1sp regular on a 17sp line height.
|
|
const replyPreviewTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Reaction counts: 13.1sp medium on a 17sp line height.
|
|
const reactionCountTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Channel and thread titles: 20sp bold on a 24sp line height.
|
|
const channelTitleTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w700,
|
|
height: 24 / 20,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Primary labels in compact content lists.
|
|
const contentListTitleTextStyle = messageUsernameTextStyle;
|
|
|
|
/// Secondary copy in compact content lists.
|
|
const contentListBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w400,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Timestamps in compact content lists.
|
|
const contentListTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Filter chip labels use the compact 15sp type ramp.
|
|
const filterChipTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Search fields use the primary 15sp body treatment.
|
|
const searchInputTextStyle = messageBodyTextStyle;
|
|
|
|
/// System message actor names: 15sp semibold on a 17sp line height.
|
|
const systemMessageHeadingTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
height: 17 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// System message copy: 15sp regular on a 20sp line height.
|
|
const systemMessageBodyTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w400,
|
|
height: 20 / 15,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Activity sender names share the primary author style.
|
|
const activityUsernameTextStyle = messageUsernameTextStyle;
|
|
|
|
/// Activity timestamps share the secondary author metadata style.
|
|
const activityTimestampTextStyle = messageMetadataTextStyle;
|
|
|
|
/// Activity context labels: 13.1sp medium on a 17sp line height.
|
|
const activityContextTextStyle = TextStyle(
|
|
fontFamily: _fontFamily,
|
|
fontSize: 13.1,
|
|
fontWeight: FontWeight.w500,
|
|
height: 17 / 13.1,
|
|
letterSpacing: 0,
|
|
);
|
|
|
|
/// Activity message previews use the primary message copy style.
|
|
const activityPreviewTextStyle = messageBodyTextStyle;
|