fix(ui): Improve the contrast of the fallback avatar letters

Fixes #206.

lib/ui/constants.dart

@@ -41,9 +41,20 @@ const Color bubbleTextColor = Color(0xffffffff);
 /// The color of text within a quote widget
 const Color bubbleTextQuote = Color(0xffdadada);
 
+const Color conversationTextFieldColorLight = Color(0xffe6e6e6);
+const Color conversationTextFieldColorDark = Color(0xff414141);
+
 /// The width of the white left border of quote widgets
 const double quoteLeftBorderWidth = 4;
 
+/// The background color of the avatar when no actual avatar is available
+const Color profileFallbackBackgroundColorLight = Color(0xffc3c3c3);
+const Color profileFallbackBackgroundColorDark = Color(0xff424242);
+
+/// The text color of the avatar fallback text
+const Color profileFallbackTextColorLight = Color(0xff343434);
+const Color profileFallbackTextColorDark = Colors.white;
+
 const Color settingsSectionTitleColor = Color(0xffb72fe7);
 
 const double paddingVeryLarge = 64;

lib/ui/pages/conversation/bottom.dart

@@ -14,6 +14,7 @@ import 'package:moxxyv2/ui/constants.dart';
 import 'package:moxxyv2/ui/helpers.dart';
 import 'package:moxxyv2/ui/pages/conversation/blink.dart';
 import 'package:moxxyv2/ui/pages/conversation/timer.dart';
+import 'package:moxxyv2/ui/theme.dart';
 import 'package:moxxyv2/ui/widgets/chat/media/media.dart';
 import 'package:moxxyv2/ui/widgets/sticker_picker.dart';
 import 'package:moxxyv2/ui/widgets/textfield.dart';
@@ -114,9 +115,8 @@ class ConversationBottomRowState extends State<ConversationBottomRow> {
                         Expanded(
                           child: CustomTextField(
                             // TODO(Unknown): Work on the colors
-                            backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+                            backgroundColor: Theme.of(context).extension<MoxxyThemeData>()!.conversationTextFieldColor,
                             textColor: _getTextColor(context),
-                            enableBoxShadow: true,
                             maxLines: 5,
                             hintText: 'Send a message...',
                             isDense: true,

lib/ui/pages/conversation/conversation.dart

@@ -507,6 +507,7 @@ class ConversationPageState extends State<ConversationPage> with TickerProviderS
               },
             ),
           ),
+
           Positioned(
             left: 0,
             right: 0,
@@ -549,9 +550,12 @@ class ConversationPageState extends State<ConversationPage> with TickerProviderS
                     ),
                   ),
 
-                  ConversationBottomRow(
-                    _controller,
-                    _textfieldFocus,
+                  ColoredBox(
+                    color: Theme.of(context).scaffoldBackgroundColor,
+                    child: ConversationBottomRow(
+                      _controller,
+                      _textfieldFocus,
+                    ),
                   ),
                 ],
               ),

lib/ui/theme.dart

@@ -1,6 +1,39 @@
 import 'package:flutter/material.dart';
 import 'package:moxxyv2/ui/constants.dart';
 
+/// A theme extension for Moxxy specific colors.
+@immutable
+class MoxxyThemeData extends ThemeExtension<MoxxyThemeData> {
+  const MoxxyThemeData({
+    required this.conversationTextFieldColor,
+    required this.profileFallbackBackgroundColor,
+    required this.profileFallbackTextColor,
+  });
+
+  /// The color of the conversation TextField
+  final Color conversationTextFieldColor;
+
+  /// The color of the background of a user with no avatar
+  final Color profileFallbackBackgroundColor;
+
+  /// The text color of a user with no avatar
+  final Color profileFallbackTextColor;
+
+  @override
+  MoxxyThemeData copyWith({Color? conversationTextFieldColor, Color? profileFallbackBackgroundColor, Color? profileFallbackTextColor}) {
+    return MoxxyThemeData(
+      conversationTextFieldColor: conversationTextFieldColor ?? this.conversationTextFieldColor,
+      profileFallbackBackgroundColor: profileFallbackBackgroundColor ?? this.profileFallbackBackgroundColor,
+      profileFallbackTextColor: profileFallbackTextColor ?? this.profileFallbackTextColor,
+    );
+  }
+
+  @override
+  MoxxyThemeData lerp(ThemeExtension<MoxxyThemeData>? other, double t) {
+    return this;
+  }
+}
+
 /// Helper function for quickly generating MaterialStateProperty instances that
 /// only differentiate between a color for the element's disabled state and for all
 /// other states.
@@ -52,5 +85,20 @@ ThemeData getThemeData(BuildContext context, Brightness brightness) {
         return primaryColor;
       }),
     ),
+
+    extensions: [
+      if (brightness == Brightness.dark)
+        const MoxxyThemeData(
+          conversationTextFieldColor: conversationTextFieldColorDark,
+          profileFallbackBackgroundColor: profileFallbackBackgroundColorDark,
+          profileFallbackTextColor: profileFallbackTextColorDark,
+        )
+      else
+        const MoxxyThemeData(
+          conversationTextFieldColor: conversationTextFieldColorLight,
+          profileFallbackBackgroundColor: profileFallbackBackgroundColorLight,
+          profileFallbackTextColor: profileFallbackTextColorLight,
+        ),
+    ],
   );
 }

lib/ui/widgets/avatar.dart

@@ -1,7 +1,7 @@
 import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:moxxyv2/ui/helpers.dart';
+import 'package:moxxyv2/ui/theme.dart';
 
 class AvatarWrapper extends StatelessWidget {
   const AvatarWrapper({ required this.radius, this.avatarUrl, this.altText, this.altIcon, this.onTapFunction, this.showEditButton = false, super.key })
@@ -14,12 +14,13 @@ class AvatarWrapper extends StatelessWidget {
   final bool showEditButton;
   final void Function()? onTapFunction;
   
-  Widget _constructAlt() {
+  Widget _constructAlt(BuildContext context) {
     if (altText != null) {
       return Text(
         avatarAltText(altText!),
         style: TextStyle(
           fontSize: radius * 0.8,
+          color: Theme.of(context).extension<MoxxyThemeData>()!.profileFallbackTextColor,
         ),
       );
     }
@@ -27,25 +28,26 @@ class AvatarWrapper extends StatelessWidget {
     return Icon(
       altIcon,
       size: radius,
+      color: Theme.of(context).extension<MoxxyThemeData>()!.profileFallbackTextColor,
     );
   }
 
   /// Either display the alt or the actual image
-  Widget _avatarWrapper() {
+  Widget _avatarWrapper(BuildContext context) {
     final useAlt = avatarUrl == null || avatarUrl == '';
     
     return CircleAvatar(
-      backgroundColor: Colors.grey[800],
+      backgroundColor: Theme.of(context).extension<MoxxyThemeData>()!.profileFallbackBackgroundColor,
       backgroundImage: !useAlt ? FileImage(File(avatarUrl!)) : null,
       radius: radius,
-      child: useAlt ? _constructAlt() : null,
+      child: useAlt ? _constructAlt(context) : null,
     );
   }
 
-  Widget _withEditButton() {
+  Widget _withEditButton(BuildContext context) {
     return Stack(
       children: [
-        _avatarWrapper(),
+        _avatarWrapper(context),
         Positioned(
           bottom: 0,
           right: 0,
@@ -71,7 +73,9 @@ class AvatarWrapper extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: onTapFunction,
-      child: showEditButton ? _withEditButton() : _avatarWrapper(),
+      child: showEditButton ?
+        _withEditButton(context) :
+        _avatarWrapper(context),
     );
   }
 }