[WIP]TW-2042 Update contacts screen ui

assets/l10n/intl_en.arb

@@ -3104,5 +3104,6 @@
   "sFlashModeLabel": "Flash mode: {mode}",
   "sSwitchCameraLensDirectionLabel": "Switch to the {value} camera",
   "photo": "Photo",
-  "video": "Video"
+  "video": "Video",
+  "inviteFriend": "Invite Friend"
 }

lib/pages/contacts_tab/contacts_appbar.dart

@@ -1,5 +1,7 @@
+import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/pages/contacts_tab/contacts_appbar_style.dart';
 import 'package:fluffychat/pages/search/search_text_field.dart';
+import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:linagora_design_flutter/linagora_design_flutter.dart';
@@ -9,6 +11,7 @@ class ContactsAppBar extends StatelessWidget {
   final FocusNode searchFocusNode;
   final TextEditingController textEditingController;
   final Function()? clearSearchBar;
+  static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
 
   const ContactsAppBar({
     super.key,
@@ -20,32 +23,55 @@ class ContactsAppBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: ContactsAppbarStyle.appbarPadding,
-      child: Column(
-        children: [
-          AppBar(
-            backgroundColor: LinagoraSysColors.material().onPrimary,
-            toolbarHeight: ContactsAppbarStyle.toolbarHeight,
-            automaticallyImplyLeading: false,
-            leadingWidth: ContactsAppbarStyle.leadingWidth,
-            centerTitle: true,
-            title: Align(
-              alignment: ContactsAppbarStyle.alignment,
-              child: Text(
-                L10n.of(context)!.contacts,
-                style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                      color: Theme.of(context).colorScheme.onSurface,
-                    ),
-              ),
+    return Column(
+      children: [
+        AppBar(
+          backgroundColor: responsiveUtils.isMobile(context)
+              ? LinagoraSysColors.material().background
+              : LinagoraSysColors.material().onPrimary,
+          toolbarHeight: ContactsAppbarStyle.toolbarHeight,
+          automaticallyImplyLeading: false,
+          leadingWidth: ContactsAppbarStyle.leadingWidth,
+          centerTitle: responsiveUtils.isMobile(context),
+          title: Padding(
+            padding: ContactsAppbarStyle.titlePadding(context),
+            child: Text(
+              L10n.of(context)!.contacts,
+              style: responsiveUtils.isMobile(context)
+                  ? LinagoraTextStyle.material().bodyLarge1.copyWith(
+                        color: Theme.of(context).colorScheme.onSurface,
+                        height: ContactsAppbarStyle.textStyleHeight,
+                      )
+                  : Theme.of(context).textTheme.titleLarge?.copyWith(
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
             ),
           ),
-          ValueListenableBuilder<bool>(
-            valueListenable: isSearchModeNotifier,
-            builder: (context, isSearchMode, child) {
-              return SizedBox(
-                height: ContactsAppbarStyle.textFieldHeight,
+        ),
+        ValueListenableBuilder<bool>(
+          valueListenable: isSearchModeNotifier,
+          builder: (context, isSearchMode, child) {
+            return Container(
+              decoration: BoxDecoration(
+                color: responsiveUtils.isMobile(context)
+                    ? LinagoraSysColors.material().background
+                    : LinagoraSysColors.material().onPrimary,
+                border: responsiveUtils.isMobile(context)
+                    ? Border(
+                        bottom: BorderSide(
+                          color: LinagoraStateLayer(
+                            LinagoraSysColors.material().surfaceTint,
+                          ).opacityLayer3,
+                          width: 1.0,
+                        ),
+                      )
+                    : null,
+              ),
+              height: ContactsAppbarStyle.textFieldHeight,
+              child: Padding(
+                padding: ContactsAppbarStyle.searchFieldPadding,
                 child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Expanded(
                       child: SearchTextField(
@@ -57,11 +83,11 @@ class ContactsAppBar extends StatelessWidget {
                     ),
                   ],
                 ),
-              );
-            },
-          ),
-        ],
-      ),
+              ),
+            );
+          },
+        ),
+      ],
     );
   }
 }

lib/pages/contacts_tab/contacts_appbar_style.dart

@@ -1,24 +1,40 @@
+import 'package:fluffychat/di/global/get_it_initializer.dart';
+import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/cupertino.dart';
 
 class ContactsAppbarStyle {
+  static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
   static const Size preferredSizeAppBar = Size.fromHeight(120);
-
   static const double iconSize = 24.0;
 
-  static const double textFieldHeight = 64.0;
+  static const double textFieldHeight = 56.0;
 
   static const double toolbarHeight = 56.0;
 
   static const double leadingWidth = 76.0;
 
   static const double textFieldBorderRadius = 24.0;
 
-  static AlignmentGeometry alignment = AlignmentDirectional.centerStart;
+  static AlignmentGeometry alignmentTitle(context) =>
+      ResponsiveUtils().isMobile(context)
+          ? Alignment.center
+          : AlignmentDirectional.centerStart;
 
   static EdgeInsetsDirectional appbarPadding =
       const EdgeInsetsDirectional.symmetric(
     horizontal: 16.0,
   );
 
   static EdgeInsetsDirectional contentPadding = EdgeInsetsDirectional.zero;
+  static const double textStyleHeight = 24 / 17;
+  static const EdgeInsets trailingIconPadding = EdgeInsets.only(right: 16.0);
+  static EdgeInsets titlePadding(context) => EdgeInsets.only(
+        left: ResponsiveUtils().isMobile(context) ? 0 : 16.0,
+      );
+  static const EdgeInsets searchFieldPadding = EdgeInsets.only(
+    left: 16.0,
+    right: 16.0,
+    bottom: 8.0,
+  );
+  static const trailingIconSize = 24.0;
 }

lib/pages/contacts_tab/contacts_tab_body_view.dart

@@ -14,16 +14,19 @@ import 'package:fluffychat/presentation/model/contact/get_presentation_contacts_
 import 'package:fluffychat/presentation/model/contact/presentation_contact.dart';
 import 'package:fluffychat/presentation/model/contact/presentation_contact_success.dart';
 import 'package:fluffychat/presentation/model/search/presentation_search.dart';
+import 'package:fluffychat/resource/image_paths.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/contacts_warning_banner/contacts_warning_banner_view.dart';
 import 'package:fluffychat/widgets/sliver_expandable_list.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:linagora_design_flutter/linagora_design_flutter.dart';
 import 'package:matrix/matrix.dart';
 
 class ContactsTabBodyView extends StatelessWidget {
   final ContactsTabController controller;
+  final bool enableFriendsInvite = false;
 
   const ContactsTabBodyView(
     this.controller, {
@@ -36,7 +39,7 @@ class ContactsTabBodyView extends StatelessWidget {
       slivers: [
         _SliverWarningBanner(controller: controller),
         _SliverPhonebookLoading(controller: controller),
-        _SliverRecentContacts(controller: controller),
+        if (enableFriendsInvite) const InviteFriendWidget(),
         _SliverContactsList(controller: controller),
         _SliverPhonebookList(controller: controller),
         const _SliverPadding(),
@@ -347,6 +350,7 @@ class _SliverPhonebookLoading extends StatelessWidget {
   }
 }
 
+// ignore: unused_element
 class _SliverRecentContacts extends StatelessWidget {
   final ContactsTabController controller;
 
@@ -487,3 +491,59 @@ class _Contact extends StatelessWidget {
     );
   }
 }
+
+class InviteFriendWidget extends StatelessWidget {
+  const InviteFriendWidget({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: Container(
+        height: 64,
+        decoration: BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: LinagoraStateLayer(
+                LinagoraSysColors.material().surfaceTint,
+              ).opacityLayer3,
+            ),
+          ),
+        ),
+        child: InkWell(
+          child: Padding(
+            padding: ContactsTabViewStyle.invitefriendContainterPadding,
+            child: Row(
+              children: [
+                Padding(
+                  padding: ContactsTabViewStyle
+                      .invitefriendContainterLeadingIconPadding,
+                  child: SvgPicture.asset(
+                    ImagePaths.icPersonCheck,
+                    width: ContactsTabViewStyle.leadingIconDimension,
+                    height: ContactsTabViewStyle.leadingIconDimension,
+                    colorFilter: ColorFilter.mode(
+                      Theme.of(context).primaryColor,
+                      BlendMode.srcIn,
+                    ),
+                  ),
+                ),
+                Padding(
+                  padding: ContactsTabViewStyle.invitefriendTextPadding,
+                  child: Text(
+                    L10n.of(context)!.inviteFriend,
+                    style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                          fontSize: 17,
+                          color: LinagoraSysColors.material().primary,
+                        ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/contacts_tab/contacts_tab_view_style.dart

@@ -7,5 +7,10 @@ class ContactsTabViewStyle {
   static const double loadingSpacer = 16;
   static const double avatarSize = 48.0;
 
-  static const searchItemsHoverRadius = BorderRadius.all(Radius.circular(12));
+  static const searchItemsHoverRadius = BorderRadius.all(Radius.circular(4));
+  static const invitefriendContainterPadding = EdgeInsets.all(8);
+  static const invitefriendContainterLeadingIconPadding = EdgeInsets.all(8);
+  static const leadingIconDimension = 24.0;
+  static const invitefriendTextPadding =
+      EdgeInsets.symmetric(horizontal: 4, vertical: 12);
 }