chore: Polish chat bubble colors

lib/pages/chat/chat_event_list.dart

@@ -142,8 +142,7 @@ class ChatEventList extends StatelessWidget {
                     i > 0 && controller.readMarkerEventId == event.eventId,
                 nextEvent: i + 1 < events.length ? events[i + 1] : null,
                 previousEvent: i > 0 ? events[i - 1] : null,
-                avatarPresenceBackgroundColor:
-                    hasWallpaper ? Colors.transparent : null,
+                wallpaperMode: hasWallpaper,
               ),
             );
           },

lib/pages/chat/chat_view.dart

@@ -317,7 +317,9 @@ class ChatView extends StatelessWidget {
                               alignment: Alignment.center,
                               child: Material(
                                 clipBehavior: Clip.hardEdge,
-                                color: theme.colorScheme.surfaceContainerHigh,
+                                color: accountConfig.wallpaperUrl != null
+                                    ? theme.colorScheme.surfaceBright
+                                    : theme.colorScheme.surfaceContainerHigh,
                                 borderRadius: const BorderRadius.all(
                                   Radius.circular(24),
                                 ),

lib/pages/chat/events/message.dart

@@ -34,7 +34,7 @@ class Message extends StatelessWidget {
   final bool highlightMarker;
   final bool animateIn;
   final void Function()? resetAnimateIn;
-  final Color? avatarPresenceBackgroundColor;
+  final bool wallpaperMode;
 
   const Message(
     this.event, {
@@ -52,7 +52,7 @@ class Message extends StatelessWidget {
     this.highlightMarker = false,
     this.animateIn = false,
     this.resetAnimateIn,
-    this.avatarPresenceBackgroundColor,
+    this.wallpaperMode = false,
     super.key,
   });
 
@@ -84,7 +84,9 @@ class Message extends StatelessWidget {
     final ownMessage = event.senderId == client.userID;
     final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
 
-    var color = theme.colorScheme.surfaceContainerHigh;
+    var color = wallpaperMode
+        ? theme.colorScheme.surfaceBright
+        : theme.colorScheme.surfaceContainerHigh;
     final displayTime = event.type == EventTypes.RoomCreate ||
         nextEvent == null ||
         !event.originServerTs.sameEnvironment(nextEvent!.originServerTs);
@@ -230,7 +232,7 @@ class Message extends StatelessWidget {
                                 name: user.calcDisplayname(),
                                 presenceUserId: user.stateKey,
                                 presenceBackgroundColor:
-                                    avatarPresenceBackgroundColor,
+                                    wallpaperMode ? Colors.transparent : null,
                                 onTap: () => onAvatarTab(event),
                               );
                             },
@@ -265,23 +267,20 @@ class Message extends StatelessWidget {
                                                     ? displayname.color
                                                     : displayname
                                                         .lightColorText),
-                                                shadows:
-                                                    avatarPresenceBackgroundColor ==
-                                                            null
-                                                        ? null
-                                                        : [
-                                                            Shadow(
-                                                              offset:
-                                                                  const Offset(
-                                                                0.0,
-                                                                0.0,
-                                                              ),
-                                                              blurRadius: 5,
-                                                              color: theme
-                                                                  .colorScheme
-                                                                  .surface,
-                                                            ),
-                                                          ],
+                                                shadows: !wallpaperMode
+                                                    ? null
+                                                    : [
+                                                        Shadow(
+                                                          offset: const Offset(
+                                                            0.0,
+                                                            0.0,
+                                                          ),
+                                                          blurRadius: 5,
+                                                          color: theme
+                                                              .colorScheme
+                                                              .surface,
+                                                        ),
+                                                      ],
                                               ),
                                               maxLines: 1,
                                               overflow: TextOverflow.ellipsis,
@@ -309,13 +308,26 @@ class Message extends StatelessWidget {
                                             : 1,
                                     duration: FluffyThemes.animationDuration,
                                     curve: FluffyThemes.animationCurve,
-                                    child: Material(
-                                      color:
-                                          noBubble ? Colors.transparent : color,
-                                      clipBehavior: Clip.antiAlias,
-                                      shape: RoundedRectangleBorder(
+                                    child: Container(
+                                      decoration: BoxDecoration(
+                                        color: ownMessage
+                                            ? null
+                                            : noBubble
+                                                ? Colors.transparent
+                                                : color,
                                         borderRadius: borderRadius,
+                                        gradient: ownMessage && !noBubble
+                                            ? LinearGradient(
+                                                colors: [
+                                                  theme.colorScheme.primary,
+                                                  theme.colorScheme.secondary,
+                                                ],
+                                                begin: Alignment.centerLeft,
+                                                end: Alignment.bottomRight,
+                                              )
+                                            : null,
                                       ),
+                                      clipBehavior: Clip.antiAlias,
                                       child: Container(
                                         decoration: BoxDecoration(
                                           borderRadius: BorderRadius.circular(

lib/pages/settings_style/settings_style_view.dart

@@ -211,10 +211,19 @@ class SettingsStyleView extends StatelessWidget {
                                       : 12,
                                   bottom: 12,
                                 ),
-                                child: Material(
-                                  color: theme.colorScheme.primary,
-                                  borderRadius: BorderRadius.circular(
-                                    AppConfig.borderRadius,
+                                child: DecoratedBox(
+                                  decoration: BoxDecoration(
+                                    gradient: LinearGradient(
+                                      colors: [
+                                        theme.colorScheme.primary,
+                                        theme.colorScheme.secondary,
+                                      ],
+                                      begin: Alignment.centerLeft,
+                                      end: Alignment.bottomRight,
+                                    ),
+                                    borderRadius: BorderRadius.circular(
+                                      AppConfig.borderRadius,
+                                    ),
                                   ),
                                   child: Padding(
                                     padding: const EdgeInsets.symmetric(