recent dms [nfc]: Place provisional dark-theme colors, pending design

Like we did for the Inbox screen in c6abaf9.

Author: chrisbobbe

lib/widgets/recent_dm_conversations.dart

@@ -9,6 +9,7 @@ import 'icons.dart';
 import 'message_list.dart';
 import 'page.dart';
 import 'store.dart';
+import 'theme.dart';
 import 'unread_count_badge.dart';
 
 class RecentDmConversationsPage extends StatefulWidget {
@@ -91,6 +92,8 @@ class RecentDmConversationsItem extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
     final selfUser = store.users[store.selfUserId]!;
 
+    final designVariables = DesignVariables.of(context);
+
     final String title;
     final Widget avatar;
     switch (narrow.otherRecipientIds) { // TODO dedupe with DM items in [InboxPage]
@@ -109,16 +112,14 @@ class RecentDmConversationsItem extends StatelessWidget {
         //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
         //   // 'Chris、Greg、Alya'
         title = narrow.otherRecipientIds.map((id) => store.users[id]?.fullName ?? '(unknown user)').join(', ');
-        // TODO(#95) need dark-theme color
-        avatar = ColoredBox(color: const Color(0x33808080),
+        avatar = ColoredBox(color: designVariables.groupDmConversationIconBg,
           child: Center(
-            // TODO(#95) need dark-theme color
-            child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5))));
+            child: Icon(color: designVariables.groupDmConversationIcon,
+              ZulipIcons.group_dm)));
     }
 
     return Material(
-      // TODO(#95) need dark-theme color
-      color: Colors.white,
+      color: designVariables.background, // TODO(design) check if this is the right variable
       child: InkWell(
         onTap: () {
           Navigator.push(context,
@@ -132,11 +133,11 @@ class RecentDmConversationsItem extends StatelessWidget {
             Expanded(child: Padding(
               padding: const EdgeInsets.symmetric(vertical: 4),
               child: Text(
-                style: const TextStyle(
+                style: TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
-                  // TODO(#95) need dark-theme color
-                  color: Color(0xFF222222),
+                  // TODO(design) check if this is the right variable
+                  color: designVariables.labelMenuButton,
                 ),
                 maxLines: 2,
                 overflow: TextOverflow.ellipsis,

lib/widgets/theme.dart

@@ -144,6 +144,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       errorBannerBackground: const HSLColor.fromAHSL(1, 4, 0.33, 0.90).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.57, 0.33).toColor(),
       errorBannerLabel: const HSLColor.fromAHSL(1, 4, 0.58, 0.33).toColor(),
+      groupDmConversationIcon: Colors.black.withOpacity(0.5),
+      groupDmConversationIconBg: const Color(0x33808080),
       loginOrDivider: const Color(0xffdedede),
       loginOrDividerText: const Color(0xff575757),
       sectionCollapseIcon: const Color(0x7f1e2e48),
@@ -169,6 +171,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       errorBannerBackground: const HSLColor.fromAHSL(1, 0, 0.61, 0.19).toColor(),
       errorBannerBorder: const HSLColor.fromAHSL(0.4, 3, 0.73, 0.74).toColor(),
       errorBannerLabel: const HSLColor.fromAHSL(1, 2, 0.73, 0.80).toColor(),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
+      groupDmConversationIcon: Colors.white.withOpacity(0.5),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
+      groupDmConversationIconBg: const Color(0x33cccccc),
       loginOrDivider: const Color(0xff424242),
       loginOrDividerText: const Color(0xffa8a8a8),
       // TODO(#95) need proper dark-theme color (this is ad hoc)
@@ -194,6 +200,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.errorBannerBackground,
     required this.errorBannerBorder,
     required this.errorBannerLabel,
+    required this.groupDmConversationIcon,
+    required this.groupDmConversationIconBg,
     required this.loginOrDivider,
     required this.loginOrDividerText,
     required this.sectionCollapseIcon,
@@ -230,6 +238,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color errorBannerBackground;
   final Color errorBannerBorder;
   final Color errorBannerLabel;
+  final Color groupDmConversationIcon;
+  final Color groupDmConversationIconBg;
   final Color loginOrDivider; // TODO(#95) need proper dark-theme color (this is ad hoc)
   final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc)
   final Color sectionCollapseIcon;
@@ -253,6 +263,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? errorBannerBackground,
     Color? errorBannerBorder,
     Color? errorBannerLabel,
+    Color? groupDmConversationIcon,
+    Color? groupDmConversationIconBg,
     Color? loginOrDivider,
     Color? loginOrDividerText,
     Color? sectionCollapseIcon,
@@ -275,6 +287,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       errorBannerBackground: errorBannerBackground ?? this.errorBannerBackground,
       errorBannerBorder: errorBannerBorder ?? this.errorBannerBorder,
       errorBannerLabel: errorBannerLabel ?? this.errorBannerLabel,
+      groupDmConversationIcon: groupDmConversationIcon ?? this.groupDmConversationIcon,
+      groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
       sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
@@ -304,6 +318,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       errorBannerBackground: Color.lerp(errorBannerBackground, other.errorBannerBackground, t)!,
       errorBannerBorder: Color.lerp(errorBannerBorder, other.errorBannerBorder, t)!,
       errorBannerLabel: Color.lerp(errorBannerLabel, other.errorBannerLabel, t)!,
+      groupDmConversationIcon: Color.lerp(groupDmConversationIcon, other.groupDmConversationIcon, t)!,
+      groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
       sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,