fix: update chat app bar web ui

This Closes #488
linagora · Aug 22, 2023 · eb7bac3 · eb7bac3
1 parent 5f6ffdf
commit eb7bac3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 14 deletions.
diff --git 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
@@ -1,15 +1,44 @@
+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;
   static double get statusBorderSize => 2;
 
   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
@@ -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
@@ -290,7 +290,7 @@ class _EmptyChatTitle extends StatelessWidget {
                       name: snapshot.data?.displayName ??
                           displayName ??
                           receiverId,
-                      size: ChatAppBarTitleStyle.avatarSize,
+                      size: ChatAppBarTitleStyle.avatarSize(context),
                     ),
                   ),
                 ),