ui: Fix some design deviations in the recent DMs page; migrate to Material Design 3

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.:
+        //   <https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12362&mode=dev>
+        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.

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.)

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

lib/widgets/login.dart

@@ -392,19 +392,13 @@ class _PasswordLoginPageState extends State<PasswordLoginPage> {
       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),

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(),
-        ])));
+          ]))));
   }
 }

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<void> prepareContent(WidgetTester tester, String html) async {
       await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());