ui [nfc]: Comment with TODO(zulip#95) where we need dark-theme colors

In these places, I was unable to find a specific dark-theme color by consulting web or the Figma (as it is now). Related: zulip#95
chrisbobbe · May 20, 2024 · c74778a · c74778a
1 parent 3dcc658
commit c74778a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 deletions.
diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart
@@ -245,6 +245,7 @@ abstract class _HeaderItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
+      // TODO(#95) need dark-theme color
       color: collapsed ? Colors.white : uncollapsedBackgroundColor,
       child: InkWell(
         // TODO use onRowTap to handle taps that are not on the collapse button.
@@ -256,6 +257,7 @@ abstract class _HeaderItem extends StatelessWidget {
         onTap: onCollapseButtonTap,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           Padding(padding: const EdgeInsets.all(10),
+            // TODO(#95) need dark-theme color
             child: Icon(size: 20, color: const Color(0x7F1D2E48),
               collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
           Icon(size: 18, color: collapsed ? collapsedIconColor : uncollapsedIconColor,
@@ -267,6 +269,7 @@ abstract class _HeaderItem extends StatelessWidget {
               style: const TextStyle(
                 fontSize: 17,
                 height: (20 / 17),
+                // TODO(#95) need dark-theme color
                 color: Color(0xFF222222),
               ).merge(weightVariableTextStyle(context, wght: 600)),
               maxLines: 1,
@@ -292,8 +295,11 @@ class _AllDmsHeaderItem extends _HeaderItem {
 
   @override get title => 'Direct messages'; // TODO(i18n)
   @override get icon => ZulipIcons.user;
+
+  // TODO(#95) need dark-theme colors
   @override get collapsedIconColor => const Color(0xFF222222);
   @override get uncollapsedIconColor => const Color(0xFF222222);
+
   @override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7);
   @override get unreadCountBadgeBackgroundColor => null;
 
@@ -367,6 +373,7 @@ class _DmItem extends StatelessWidget {
     };
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -382,6 +389,7 @@ class _DmItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,
@@ -486,6 +494,7 @@ class _TopicItem extends StatelessWidget {
     final subscription = store.subscriptions[streamId]!;
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -502,6 +511,7 @@ class _TopicItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,
@@ -519,6 +529,7 @@ class _TopicItem extends StatelessWidget {
 class _AtMentionMarker extends StatelessWidget {
   const _AtMentionMarker();
 
+  // TODO(#95) need dark-theme color
   static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor();
 
   @override

diff --git a/lib/widgets/login.dart b/lib/widgets/login.dart
@@ -621,6 +621,7 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> {
 }
 
 // Loosely based on the corresponding element in the web app.
+// TODO(#95) need dark-theme colors
 class OrDivider extends StatelessWidget {
   const OrDivider({super.key});
 

diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart
@@ -109,12 +109,15 @@ 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),
           child: Center(
+            // TODO(#95) need dark-theme color
             child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5))));
     }
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -132,6 +135,7 @@ class RecentDmConversationsItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,

diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart
@@ -118,6 +118,7 @@ class _NoSubscriptionsItem extends StatelessWidget {
         child: Text("No streams found",
           textAlign: TextAlign.center,
           style: TextStyle(
+            // TODO(#95) need dark-theme color
             color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
             fontSize: 18,
             height: (20 / 18),
@@ -131,12 +132,14 @@ class _SubscriptionListHeader extends StatelessWidget {
   final String label;
 
   static final _line = Expanded(child: Divider(
+    // TODO(#95) need dark-theme color
     color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor()));
 
   @override
   Widget build(BuildContext context) {
     return SliverToBoxAdapter(
       child: ColoredBox(
+        // TODO(#95) need dark-theme color
         color: Colors.white,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center,
           children: [
@@ -148,6 +151,7 @@ class _SubscriptionListHeader extends StatelessWidget {
               child: Text(label,
                 textAlign: TextAlign.center,
                 style: TextStyle(
+                  // TODO(#95) need dark-theme color
                   color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
                   fontSize: 14,
                   letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14),
@@ -198,6 +202,7 @@ class SubscriptionItem extends StatelessWidget {
     final swatch = subscription.colorSwatch();
     final hasUnreads = (unreadCount > 0);
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -222,6 +227,7 @@ class SubscriptionItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 18,
                   height: (20 / 18),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF262626),
                 ).merge(weightVariableTextStyle(context,
                     wght: hasUnreads ? 600 : null)),

diff --git a/lib/widgets/unread_count_badge.dart b/lib/widgets/unread_count_badge.dart
@@ -32,6 +32,7 @@ class UnreadCountBadge extends StatelessWidget {
     final effectiveBackgroundColor = switch (backgroundColor) {
       StreamColorSwatch(unreadCountBadgeBackground: var color) => color,
       Color() => backgroundColor,
+      // TODO(#95) need dark-theme color
       null => const Color.fromRGBO(102, 102, 153, 0.15),
     };
 
@@ -57,6 +58,7 @@ class UnreadCountBadge extends StatelessWidget {
             //   - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)`
             //   The web app doesn't (yet?) use stream-colored unread markers
             //   so we can't take direction from there.
+            // TODO(#95) need dark-theme color
             color: Color(0xFF222222),
           ).merge(weightVariableTextStyle(context,
               wght: bold ? 600 : null)),