Tw 1846 update style of image picker (#2167)

assets/l10n/intl_en.arb

@@ -2948,7 +2948,7 @@
   },
   "settingsLanguageDescription": "Set the language you use on Twake Chat",
   "sendImages": "{count, plural, =1{Send 1 image} other{Send {count} images}}",
-  "enterCaption": "Enter a caption",
+  "enterCaption": "Add a caption...",
   "failToSend": "Failed to send, please try again",
   "showLess": "Show Less",
   "showMore": "Show More",

lib/pages/chat/chat_actions.dart

@@ -25,7 +25,7 @@ enum PickerType {
   IconData getIcon() {
     switch (this) {
       case PickerType.gallery:
-        return Icons.photo;
+        return Icons.photo_outlined;
       case PickerType.documents:
         return Icons.attach_file;
       case PickerType.location:
@@ -51,15 +51,26 @@ enum PickerType {
   Color getBackgroundColor() {
     switch (this) {
       case PickerType.gallery:
-        return ChatActionsStyle.colorBackgroundGalleryBottom;
       case PickerType.documents:
-        return ChatActionsStyle.colorBackgroundDocumentBottom;
+        return ChatActionsStyle.colorBackgroundGalleryBottom;
       case PickerType.location:
         return ChatActionsStyle.colorBackgroundLocationBottom;
       case PickerType.contact:
         return ChatActionsStyle.colorBackgroundContactBottom;
     }
   }
+
+  Color? getTextColor(BuildContext context) {
+    switch (this) {
+      case PickerType.gallery:
+        return LinagoraSysColors.material().primary;
+      case PickerType.documents:
+        return LinagoraSysColors.material().tertiary;
+      case PickerType.location:
+      case PickerType.contact:
+        return LinagoraSysColors.material().onBackground;
+    }
+  }
 }
 
 enum ChatScrollState {

lib/pages/chat/chat_actions_style.dart

@@ -1,13 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 
 class ChatActionsStyle {
-  static const Color colorBackgroundGalleryBottom = Color(0xFFFFAB00);
+  static const Color colorBackgroundGalleryBottom = Colors.transparent;
   static const Color colorBackgroundDocumentBottom = Color(0xFFEDE7F6);
   static const Color colorBackgroundLocationBottom = Color(0xFFE0F2F1);
   static const Color colorBackgroundContactBottom = Color(0xFFFCE4EC);
 
-  static const Color colorGalleryIcon = Color(0xFFFFFFFF);
-  static const Color colorDocumentIcon = Color(0xFF7C4DFF);
+  static Color colorGalleryIcon = LinagoraSysColors.material().primary;
+  static Color colorDocumentIcon = LinagoraSysColors.material().tertiary;
   static const Color colorLocationIcon = Color(0xFF00BFA5);
   static const Color colorContactIcon = Color(0xFF880E4F);
 }

lib/pages/chat/item_actions_bottom_widget.dart

@@ -1,6 +1,5 @@
 import 'package:fluffychat/pages/chat/chat_actions.dart';
 import 'package:flutter/material.dart';
-import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 
 typedef OnPickerTypeTap = void Function(PickerType);
 
@@ -21,25 +20,22 @@ class PickerTypeOnBottom extends StatelessWidget {
       child: Column(
         children: [
           Container(
-            width: 56,
-            height: 56,
-            padding: const EdgeInsets.all(16),
-            margin: const EdgeInsets.symmetric(vertical: 8),
+            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
             decoration: ShapeDecoration(
-              color: pickerType.getBackgroundColor(),
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(36),
               ),
             ),
             child: Icon(
+              size: 24,
               pickerType.getIcon(),
               color: pickerType.getIconColor(),
             ),
           ),
           Text(
             pickerType.getTitle(context),
             style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                  color: LinagoraSysColors.material().onBackground,
+                  color: pickerType.getTextColor(context),
                 ),
           ),
         ],

lib/pages/chat/send_file_dialog/send_file_dialog_style.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
+import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 
 class SendFileDialogStyle {
   static const dialogBorderRadius = 16.0;
@@ -34,9 +35,12 @@ class SendFileDialogStyle {
             ?.merge(
               Theme.of(context).inputDecorationTheme.hintStyle,
             )
-            .copyWith(letterSpacing: -0.15),
+            .copyWith(
+              letterSpacing: -0.15,
+              color: LinagoraRefColors.material().neutralVariant[60],
+            ),
         filled: true,
-        fillColor: Theme.of(context).colorScheme.surfaceContainerHighest,
+        fillColor: LinagoraSysColors.material().background,
       );
 
   static const spaceBwInputBarAndButton = SizedBox(height: 8.0);

lib/presentation/mixins/media_picker_mixin.dart

@@ -100,6 +100,7 @@ mixin MediaPickerMixin on CommonMediaPickerMixin {
       controller: imagePickerController,
       backgroundImageCamera: MediaPickerStyle.cameraIcon,
       initialChildSize: MediaPickerStyle.initialChildSize,
+      minChildSize: MediaPickerStyle.initialChildSize,
       permissionStatus: permissionStatusPhotos,
       gridPadding: MediaPickerStyle.gridPadding,
       assetBackgroundColor: LinagoraSysColors.material().background,
@@ -115,6 +116,7 @@ mixin MediaPickerMixin on CommonMediaPickerMixin {
                 L10n.of(context)!.photoSelectedCounter(counterImage),
                 style: Theme.of(context).textTheme.titleMedium,
               ),
+              const Icon(Icons.chevron_right_outlined),
               const Expanded(child: SizedBox.shrink()),
             ],
           ),
@@ -137,7 +139,7 @@ mixin MediaPickerMixin on CommonMediaPickerMixin {
             return Container(
               padding: MediaPickerStyle.itemPickerPadding,
               decoration: BoxDecoration(
-                color: Colors.white,
+                color: LinagoraSysColors.material().surface,
                 border: Border(
                   top: BorderSide(
                     color: Theme.of(context)
@@ -163,7 +165,7 @@ mixin MediaPickerMixin on CommonMediaPickerMixin {
           return child!;
         },
         child: Container(
-          color: Colors.white,
+          color: LinagoraSysColors.material().background,
           child: Column(
             children: [
               Stack(

lib/presentation/style/media_picker_style.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 class MediaPickerStyle {
   static const AssetImage cameraIcon = AssetImage("assets/verification.png");
 
-  static const initialChildSize = 0.6;
+  static const initialChildSize = 0.5;
 
   static const EdgeInsets gridPadding = EdgeInsets.only(bottom: 150);
 
@@ -16,7 +16,9 @@ class MediaPickerStyle {
 
   static const EdgeInsets itemPickerPadding = EdgeInsets.only(
     top: 8.0,
-    bottom: 34.0,
+    bottom: 17.0,
+    right: 65,
+    left: 65,
   );
 
   static const EdgeInsets composerPadding = EdgeInsets.only(
@@ -26,7 +28,7 @@ class MediaPickerStyle {
     left: 4.0,
   );
 
-  static const EdgeInsets sendButtonPadding = EdgeInsets.only(left: 8);
+  static const EdgeInsets sendButtonPadding = EdgeInsets.only(top: 4, left: 12);
 
   static const BorderRadius sendButtonBorderRadius =
       BorderRadius.all(Radius.circular(100));

pubspec.lock

@@ -1779,7 +1779,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: f5e0f2d0f9450dda58c72233f72fb48cf7d2769b
+      resolved-ref: "730692596f54708fab806f54912e3cbecb027825"
       url: "[email protected]:linagora/linagora-design-flutter.git"
     source: git
     version: "0.0.1"

pubspec.yaml

@@ -30,6 +30,7 @@ dependencies:
     git:
       url: [email protected]:linagora/linagora-design-flutter.git
       ref: master
+
   flutter_matrix_html:
     git:
       url: https://github.com/linagora/flutter_matrix_html.git