recent_dm_conversations: Make rows white, like in Figma

I missed this in zulip#249 and made the rows transparent, oops. So they were taking on the scaffold background color, 0xfffafafa a.k.a. ThemeData.canvasColor. (If we were using Material 3, the scaffold background color would be 0xfffefbff a.k.a. ThemeData.colorScheme.background. Neither color is correct for what the Figma actually specifies for the surface underneath this screen's scrollable content. That's 0xfff6f6f6, and we'll start using it soon.) The ink effect on touch was being enabled by the scaffold's underlying Material. To preserve the ink effect, use a Material here instead of e.g. a ColoredBox. See the design in Figma: https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12378&mode=dev
chrisbobbe · Nov 15, 2023 · 29672a0 · 29672a0
1 parent e7fe06c
commit 29672a0
Showing 1 changed file with 47 additions and 44 deletions.
diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart
@@ -108,49 +108,52 @@ 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),
-                child: DecoratedBox(
-                  decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(3),
-                    color: const Color.fromRGBO(102, 102, 153, 0.15),
-                  ),
-                  child: Padding(
-                    padding: const EdgeInsetsDirectional.fromSTEB(4, 0, 4, 1),
-                    child: Text(
-                      style: const TextStyle(
-                        fontFamily: 'Source Sans 3',
-                        fontSize: 16,
-                        height: (18 / 16),
-                        fontFeatures: [FontFeature.enable('smcp')], // small caps
-                        color: Color(0xFF222222),
-                      ).merge(weightVariableTextStyle(context)),
-                      unreadCount.toString()))))
-            : const SizedBox(),
-        ])));
+    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: DecoratedBox(
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(3),
+                      color: const Color.fromRGBO(102, 102, 153, 0.15),
+                    ),
+                    child: Padding(
+                      padding: const EdgeInsetsDirectional.fromSTEB(4, 0, 4, 1),
+                      child: Text(
+                        style: const TextStyle(
+                          fontFamily: 'Source Sans 3',
+                          fontSize: 16,
+                          height: (18 / 16),
+                          fontFeatures: [FontFeature.enable('smcp')], // small caps
+                          color: Color(0xFF222222),
+                        ).merge(weightVariableTextStyle(context)),
+                        unreadCount.toString()))))
+              : const SizedBox(),
+          ]))),
+    );
   }
 }