From eb7bac3a712a318d3d1de0c466864f0371b203dc Mon Sep 17 00:00:00 2001
From: Julian KOUNE <jkoune@linagora.com>
Date: Mon, 21 Aug 2023 16:32:12 +0200
Subject: [PATCH] fix: update chat app bar web ui

This Closes #488
---
 lib/pages/chat/chat_app_bar_title.dart       | 16 +++-------
 lib/pages/chat/chat_app_bar_title_style.dart | 31 +++++++++++++++++++-
 lib/pages/chat/chat_view_style.dart          |  1 +
 lib/pages/chat_draft/draft_chat_view.dart    |  2 +-
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/lib/pages/chat/chat_app_bar_title.dart b/lib/pages/chat/chat_app_bar_title.dart
index 51f66469c7..c14a61e468 100644
--- a/lib/pages/chat/chat_app_bar_title.dart
+++ b/lib/pages/chat/chat_app_bar_title.dart
@@ -76,13 +76,13 @@ class ChatAppBarTitle extends StatelessWidget {
                     name: room!.getLocalizedDisplayname(
                       MatrixLocals(L10n.of(context)!),
                     ),
-                    size: ChatAppBarTitleStyle.avatarSize,
+                    size: ChatAppBarTitleStyle.avatarSize(context),
                   ),
                 ),
               ),
             ],
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 8.0),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -93,11 +93,7 @@ class ChatAppBarTitle extends StatelessWidget {
                   ),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        color: Theme.of(context).colorScheme.onSurface,
-                        letterSpacing:
-                            ChatAppBarTitleStyle.letterSpacingRoomName,
-                      ),
+                  style: ChatAppBarTitleStyle.appBarTitleStyle(context),
                 ),
                 _buildStatusContent(context, room!),
               ],
@@ -113,11 +109,7 @@ class ChatAppBarTitle extends StatelessWidget {
     Room room,
   ) {
     final TextStyle? statusTextStyle =
-        Theme.of(context).textTheme.labelSmall?.copyWith(
-              fontSize: 11,
-              color: Theme.of(context).colorScheme.tertiary,
-              letterSpacing: ChatAppBarTitleStyle.letterSpacingStatusContent,
-            );
+        ChatAppBarTitleStyle.statusTextStyle(context);
 
     return StreamBuilder<ConnectivityResult>(
       stream: getStreamInstance,
diff --git a/lib/pages/chat/chat_app_bar_title_style.dart b/lib/pages/chat/chat_app_bar_title_style.dart
index efef5af985..147f3b9336 100644
--- a/lib/pages/chat/chat_app_bar_title_style.dart
+++ b/lib/pages/chat/chat_app_bar_title_style.dart
@@ -1,10 +1,16 @@
+import 'package:fluffychat/di/global/get_it_initializer.dart';
+import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
+import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 
 class ChatAppBarTitleStyle {
+  static ResponsiveUtils responsive = getIt.get<ResponsiveUtils>();
+
   static Color get currentlyActiveColor => const Color(0xFF5AD439);
   static Color get currentlyInactiveColor => const Color(0xFF818C99);
   static double get avatarFontSize => 15.0;
-  static double get avatarSize => 40.0;
+  static double avatarSize(BuildContext context) =>
+      responsive.isMobile(context) ? 40.0 : 48.0;
 
   static double get statusSize => 15;
   static Color get statusBorderColor => Colors.white;
@@ -12,4 +18,27 @@ class ChatAppBarTitleStyle {
 
   static double get letterSpacingRoomName => 0.15;
   static double get letterSpacingStatusContent => 0.5;
+
+  static TextStyle? appBarTitleStyle(BuildContext context) =>
+      responsive.isMobile(context)
+          ? Theme.of(context).textTheme.titleMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onSurface,
+                letterSpacing: ChatAppBarTitleStyle.letterSpacingRoomName,
+              )
+          : Theme.of(context).textTheme.titleLarge?.copyWith(
+                color: Theme.of(context).colorScheme.onSurface,
+                letterSpacing: ChatAppBarTitleStyle.letterSpacingRoomName,
+              );
+
+  static TextStyle? statusTextStyle(BuildContext context) =>
+      responsive.isMobile(context)
+          ? Theme.of(context).textTheme.labelSmall?.copyWith(
+                fontSize: 11,
+                color: Theme.of(context).colorScheme.tertiary,
+                letterSpacing: ChatAppBarTitleStyle.letterSpacingStatusContent,
+              )
+          : Theme.of(context).textTheme.bodySmall?.copyWith(
+                color: LinagoraRefColors.material().neutral[50],
+                letterSpacing: ChatAppBarTitleStyle.letterSpacingRoomName,
+              );
 }
diff --git a/lib/pages/chat/chat_view_style.dart b/lib/pages/chat/chat_view_style.dart
index 323d8d975c..eb046e3d6a 100644
--- a/lib/pages/chat/chat_view_style.dart
+++ b/lib/pages/chat/chat_view_style.dart
@@ -13,6 +13,7 @@ class ChatViewStyle {
   static EdgeInsetsDirectional paddingLeading(BuildContext context) =>
       EdgeInsetsDirectional.only(
         top: responsive.isMobile(context) ? 40 : 0,
+        start: responsive.isMobile(context) ? 0 : 16,
       );
 
   static EdgeInsetsDirectional paddingBanner(BuildContext context) =>
diff --git a/lib/pages/chat_draft/draft_chat_view.dart b/lib/pages/chat_draft/draft_chat_view.dart
index d148383a21..494cd6c6f0 100644
--- a/lib/pages/chat_draft/draft_chat_view.dart
+++ b/lib/pages/chat_draft/draft_chat_view.dart
@@ -290,7 +290,7 @@ class _EmptyChatTitle extends StatelessWidget {
                       name: snapshot.data?.displayName ??
                           displayName ??
                           receiverId,
-                      size: ChatAppBarTitleStyle.avatarSize,
+                      size: ChatAppBarTitleStyle.avatarSize(context),
                     ),
                   ),
                 ),