diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart index 771fd4f53c..a7fe91bee9 100644 --- a/lib/widgets/app.dart +++ b/lib/widgets/app.dart @@ -92,7 +92,6 @@ class ZulipApp extends StatelessWidget { if (Theme.of(context).platform == TargetPlatform.iOS) '.AppleSystemUIFont' else 'sans-serif', 'Noto Color Emoji', ], - useMaterial3: false, // TODO(#225) fix things and switch to true // This applies Material 3's color system to produce a palette of // appropriately matching and contrasting colors for use in a UI. // The Zulip brand color is a starting point, but doesn't end up as @@ -101,7 +100,13 @@ class ZulipApp extends StatelessWidget { // https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html // Or try this tool to see the whole palette: // https://m3.material.io/theme-builder#/custom - colorScheme: ColorScheme.fromSeed(seedColor: kZulipBrandColor), + colorScheme: ColorScheme.fromSeed( + seedColor: kZulipBrandColor, + + // Used in the Figma for surfaces underneath scrollable content, e.g.: + // + background: const Color(0xfff6f6f6), + ), // `preferBelow: false` seems like a better default for mobile; // the area below a long-press target seems more likely to be hidden by // a finger or thumb than the area above. diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart index 0da97d6aeb..3bdf524404 100644 --- a/lib/widgets/content.dart +++ b/lib/widgets/content.dart @@ -104,7 +104,14 @@ class Paragraph extends StatelessWidget { // The paragraph has vertical CSS margins, but those have no effect. if (node.nodes.isEmpty) return const SizedBox(); - final text = _buildBlockInlineContainer(node: node, style: null); + final text = _buildBlockInlineContainer( + node: node, + style: const TextStyle( + fontFamily: 'Source Sans 3', + fontSize: 14, + height: (17 / 14), + ).merge(weightVariableTextStyle(context)), + ); // If the paragraph didn't actually have a `p` element in the HTML, // then apply no margins. (For example, these are seen in list items.) diff --git a/lib/widgets/lightbox.dart b/lib/widgets/lightbox.dart index 4f47e9e919..7c3b2a4146 100644 --- a/lib/widgets/lightbox.dart +++ b/lib/widgets/lightbox.dart @@ -133,6 +133,7 @@ class _LightboxPageState extends State<_LightboxPage> { final appBarBackgroundColor = Colors.grey.shade900.withOpacity(0.87); const appBarForegroundColor = Colors.white; + const appBarElevation = 0.0; PreferredSizeWidget? appBar; if (_headerFooterVisible) { @@ -146,6 +147,7 @@ class _LightboxPageState extends State<_LightboxPage> { centerTitle: false, foregroundColor: appBarForegroundColor, backgroundColor: appBarBackgroundColor, + elevation: appBarElevation, // TODO(#41): Show message author's avatar title: RichText( @@ -167,6 +169,7 @@ class _LightboxPageState extends State<_LightboxPage> { if (_headerFooterVisible) { bottomAppBar = BottomAppBar( color: appBarBackgroundColor, + elevation: appBarElevation, child: Row(children: [ _CopyLinkButton(url: widget.src), // TODO(#43): Share image diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart index affe0d6433..ed2e5a1f0e 100644 --- a/lib/widgets/login.dart +++ b/lib/widgets/login.dart @@ -392,19 +392,13 @@ class _PasswordLoginPageState extends State { decoration: InputDecoration( labelText: zulipLocalizations.loginPasswordLabel, helperText: kLayoutPinningHelperText, - // TODO(material-3): Simplify away `Semantics` by using IconButton's - // M3-only params `isSelected` / `selectedIcon`, after fixing - // https://github.com/flutter/flutter/issues/127145 . (Also, the - // `Semantics` seen here would misbehave in M3 for reasons - // involving a `Semantics` with `container: true` in an underlying - // [ButtonStyleButton].) - suffixIcon: Semantics(toggled: _obscurePassword, - child: IconButton( - tooltip: zulipLocalizations.loginHidePassword, - onPressed: _handlePasswordVisibilityPress, - icon: _obscurePassword - ? const Icon(Icons.visibility_off) - : const Icon(Icons.visibility))))); + suffixIcon: IconButton( + tooltip: zulipLocalizations.loginHidePassword, + onPressed: _handlePasswordVisibilityPress, + icon: const Icon(Icons.visibility), + isSelected: _obscurePassword, + selectedIcon: const Icon(Icons.visibility_off), + ))); return Scaffold( appBar: AppBar(title: Text(zulipLocalizations.loginPageTitle), diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart index f5932b2cb9..0122deb999 100644 --- a/lib/widgets/recent_dm_conversations.dart +++ b/lib/widgets/recent_dm_conversations.dart @@ -107,34 +107,36 @@ class RecentDmConversationsItem extends StatelessWidget { child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5)))); } - return InkWell( - onTap: () { - Navigator.push(context, - MessageListPage.buildRoute(context: context, narrow: narrow)); - }, - child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 48), - child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ - Padding(padding: const EdgeInsetsDirectional.fromSTEB(12, 8, 0, 8), - child: AvatarShape(size: 32, borderRadius: 3, child: avatar)), - const SizedBox(width: 8), - Expanded(child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4), - child: Text( - style: const TextStyle( - fontFamily: 'Source Sans 3', - fontSize: 17, - height: (20 / 17), - color: Color(0xFF222222), - ).merge(weightVariableTextStyle(context)), - maxLines: 2, - overflow: TextOverflow.ellipsis, - title))), - const SizedBox(width: 12), - unreadCount > 0 - ? Padding(padding: const EdgeInsetsDirectional.only(end: 16), + return Material( + color: Colors.white, + child: InkWell( + onTap: () { + Navigator.push(context, + MessageListPage.buildRoute(context: context, narrow: narrow)); + }, + child: ConstrainedBox(constraints: const BoxConstraints(minHeight: 48), + child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [ + Padding(padding: const EdgeInsetsDirectional.fromSTEB(12, 8, 0, 8), + child: AvatarShape(size: 32, borderRadius: 3, child: avatar)), + const SizedBox(width: 8), + Expanded(child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4), + child: Text( + style: const TextStyle( + fontFamily: 'Source Sans 3', + fontSize: 17, + height: (20 / 17), + color: Color(0xFF222222), + ).merge(weightVariableTextStyle(context)), + maxLines: 2, + overflow: TextOverflow.ellipsis, + title))), + const SizedBox(width: 12), + unreadCount > 0 + ? Padding(padding: const EdgeInsetsDirectional.only(end: 16), child: UnreadCountBadge(baseStreamColor: null, count: unreadCount)) : const SizedBox(), - ]))); + ])))); } } diff --git a/test/widgets/content_test.dart b/test/widgets/content_test.dart index dac9bf0616..f97f348fa6 100644 --- a/test/widgets/content_test.dart +++ b/test/widgets/content_test.dart @@ -65,7 +65,7 @@ void main() { group('LinkNode interactions', () { // The Flutter test font uses square glyphs, so width equals height: // https://github.com/flutter/flutter/wiki/Flutter-Test-Fonts - const fontSize = 48.0; + const fontSize = 14.0; Future prepareContent(WidgetTester tester, String html) async { await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());