UI improvements for the edit mode

packages/smooth_app/lib/generic_lib/buttons/smooth_large_button_with_icon.dart

@@ -18,7 +18,7 @@ class SmoothLargeButtonWithIcon extends StatelessWidget {
   final String text;
   final IconData icon;
   final VoidCallback? onPressed;
-  final EdgeInsets? padding;
+  final EdgeInsetsGeometry? padding;
   final IconData? trailing;
   final Color? backgroundColor;
   final Color? foregroundColor;

packages/smooth_app/lib/generic_lib/buttons/smooth_simple_button.dart

@@ -19,7 +19,7 @@ class SmoothSimpleButton extends StatelessWidget {
   final double minWidth;
   final double height;
   final BorderRadius borderRadius;
-  final EdgeInsets padding;
+  final EdgeInsetsGeometry padding;
   final Color? buttonColor;
 
   @override

packages/smooth_app/lib/generic_lib/widgets/smooth_card.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/themes/smooth_theme.dart';
+import 'package:smooth_app/themes/smooth_theme_colors.dart';
+import 'package:smooth_app/themes/theme_provider.dart';
 
 /// Renders a Material card with elevation, shadow, Border radius etc...
 /// Note: If the caller updates BoxDecoration of the [header] or [child] widget,
@@ -100,3 +103,121 @@ class SmoothCard extends StatelessWidget {
           );
   }
 }
+
+class SmoothCardWithRoundedHeader extends StatelessWidget {
+  const SmoothCardWithRoundedHeader({
+    required this.title,
+    required this.child,
+    this.iconTitle,
+  });
+
+  final String title;
+  final Widget? iconTitle;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+    final SmoothColorsThemeExtension extension =
+        context.extension<SmoothColorsThemeExtension>();
+
+    final Color color =
+        context.lightTheme() ? extension.primaryBlack : Colors.black;
+
+    return Column(
+      children: <Widget>[
+        Semantics(
+          label: title,
+          excludeSemantics: true,
+          child: CustomPaint(
+            painter: _SmoothCardWithRoundedHeaderBackgroundPainter(
+              color: color,
+              radius: ROUNDED_RADIUS,
+            ),
+            child: Padding(
+              padding: const EdgeInsetsDirectional.symmetric(
+                vertical: MEDIUM_SPACE,
+                horizontal: LARGE_SPACE,
+              ),
+              child: Row(
+                children: <Widget>[
+                  if (iconTitle != null)
+                    DecoratedBox(
+                      decoration: const BoxDecoration(
+                        color: Colors.white,
+                        shape: BoxShape.circle,
+                      ),
+                      child: Padding(
+                        padding: const EdgeInsetsDirectional.all(SMALL_SPACE),
+                        child: IconTheme(
+                          data: IconThemeData(
+                            color: color,
+                            size: 18.0,
+                          ),
+                          child: iconTitle!,
+                        ),
+                      ),
+                    ),
+                  const SizedBox(width: MEDIUM_SPACE),
+                  Text(
+                    title,
+                    style: themeData.textTheme.displaySmall?.copyWith(
+                      color: Colors.white,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        SmoothCard(
+          margin: EdgeInsets.zero,
+          padding: const EdgeInsetsDirectional.only(
+            top: MEDIUM_SPACE,
+          ),
+          color: context.darkTheme() ? extension.primaryUltraBlack : null,
+          child: child,
+        ),
+      ],
+    );
+  }
+}
+
+class _SmoothCardWithRoundedHeaderBackgroundPainter extends CustomPainter {
+  _SmoothCardWithRoundedHeaderBackgroundPainter({
+    required Color color,
+    required this.radius,
+  }) : _paint = Paint()..color = color;
+
+  final Radius radius;
+  final Paint _paint;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.drawRRect(
+      RRect.fromRectAndCorners(
+        Rect.fromLTWH(
+          0.0,
+          0.0,
+          size.width,
+          size.height + ROUNDED_RADIUS.y,
+        ),
+        topLeft: radius,
+        topRight: radius,
+      ),
+      _paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(
+    _SmoothCardWithRoundedHeaderBackgroundPainter oldDelegate,
+  ) =>
+      false;
+
+  @override
+  bool shouldRebuildSemantics(
+    _SmoothCardWithRoundedHeaderBackgroundPainter oldDelegate,
+  ) =>
+      false;
+}

packages/smooth_app/lib/helpers/product_cards_helper.dart

@@ -310,6 +310,7 @@ Widget addPanelButton(
   final String label, {
   final IconData? iconData,
   final String? textAlign,
+  final EdgeInsetsGeometry? padding,
   required final Function() onPressed,
 }) =>
     Padding(
@@ -319,6 +320,7 @@ Widget addPanelButton(
         icon: iconData ?? Icons.add,
         onPressed: onPressed,
         textAlign: iconData == null ? TextAlign.center : null,
+        padding: padding,
       ),
     );
 

packages/smooth_app/lib/pages/input/smooth_autocomplete_text_field.dart

@@ -20,6 +20,8 @@ class SmoothAutocompleteTextField extends StatefulWidget {
     this.minLengthForSuggestions = 1,
     this.allowEmojis = true,
     this.suffixIcon,
+    this.borderRadius,
+    this.padding,
   });
 
   final FocusNode focusNode;
@@ -31,6 +33,8 @@ class SmoothAutocompleteTextField extends StatefulWidget {
   final AutocompleteManager? manager;
   final bool allowEmojis;
   final Widget? suffixIcon;
+  final BorderRadius? borderRadius;
+  final EdgeInsetsGeometry? padding;
 
   @override
   State<SmoothAutocompleteTextField> createState() =>
@@ -86,14 +90,15 @@ class _SmoothAutocompleteTextFieldState
         decoration: InputDecoration(
           suffixIcon: widget.suffixIcon,
           filled: true,
-          border: const OutlineInputBorder(
-            borderRadius: ANGULAR_BORDER_RADIUS,
+          border: OutlineInputBorder(
+            borderRadius: widget.borderRadius ?? ANGULAR_BORDER_RADIUS,
             borderSide: BorderSide.none,
           ),
-          contentPadding: const EdgeInsets.symmetric(
-            horizontal: SMALL_SPACE,
-            vertical: SMALL_SPACE,
-          ),
+          contentPadding: widget.padding ??
+              const EdgeInsets.symmetric(
+                horizontal: SMALL_SPACE,
+                vertical: SMALL_SPACE,
+              ),
           hintText: widget.hintText,
           suffix: Offstage(
             offstage: !_loading,

packages/smooth_app/lib/pages/product/simple_input_page.dart

@@ -4,7 +4,6 @@ import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/background/background_task_details.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
-import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/helpers/analytics_helper.dart';
 import 'package:smooth_app/helpers/collections_helper.dart';
 import 'package:smooth_app/helpers/product_cards_helper.dart';
@@ -77,26 +76,24 @@ class _SimpleInputPageState extends State<SimpleInputPage> {
           padding: i == 0
               ? EdgeInsets.zero
               : const EdgeInsets.only(top: LARGE_SPACE),
-          child: SmoothCard(
-            // This provider will handle the dispose() call for us
-            child: MultiProvider(
-              providers: <ChangeNotifierProvider<dynamic>>[
-                ChangeNotifierProvider<TextEditingController>(
-                  create: (_) {
-                    _controllers.replace(i, TextEditingController());
-                    return _controllers[i];
-                  },
-                ),
-                ChangeNotifierProvider<AbstractSimpleInputPageHelper>(
-                  create: (_) => widget.helpers[i],
-                ),
-              ],
-              child: SimpleInputWidget(
-                helper: widget.helpers[i],
-                product: widget.product,
-                controller: _controllers[i],
-                displayTitle: widget.helpers.length > 1,
+          // This provider will handle the dispose() call for us
+          child: MultiProvider(
+            providers: <ChangeNotifierProvider<dynamic>>[
+              ChangeNotifierProvider<TextEditingController>(
+                create: (_) {
+                  _controllers.replace(i, TextEditingController());
+                  return _controllers[i];
+                },
+              ),
+              ChangeNotifierProvider<AbstractSimpleInputPageHelper>(
+                create: (_) => widget.helpers[i],
               ),
+            ],
+            child: SimpleInputWidget(
+              helper: widget.helpers[i],
+              product: widget.product,
+              controller: _controllers[i],
+              displayTitle: widget.helpers.length > 1,
             ),
           ),
         ),
@@ -118,15 +115,14 @@ class _SimpleInputPageState extends State<SimpleInputPage> {
                   .extension<SmoothColorsThemeExtension>()!
                   .primaryLight
               : null,
-          body: Padding(
-            padding: const EdgeInsetsDirectional.only(
-              top: SMALL_SPACE,
-              start: SMALL_SPACE,
-              end: SMALL_SPACE,
-            ),
-            child: Scrollbar(
-              child: ListView(children: simpleInputs),
-            ),
+          body: Scrollbar(
+            child: ListView(
+                padding: const EdgeInsetsDirectional.only(
+                  top: MEDIUM_SPACE,
+                  start: MEDIUM_SPACE,
+                  end: MEDIUM_SPACE,
+                ),
+                children: simpleInputs),
           ),
           bottomNavigationBar: ProductBottomButtonsBar(
             onSave: () async => _exitPage(

packages/smooth_app/lib/pages/product/simple_input_page_helpers.dart

@@ -122,11 +122,11 @@ abstract class AbstractSimpleInputPageHelper extends ChangeNotifier {
   ) =>
       Padding(
         padding: const EdgeInsets.symmetric(
-          vertical: VERY_LARGE_SPACE,
+          vertical: SMALL_SPACE,
           horizontal: SMALL_SPACE,
         ),
         child: addPanelButton(
-          title.toUpperCase(),
+          title,
           onPressed: () async => confirmAndUploadNewPicture(
             context,
             imageField: ImageField.OTHER,
@@ -137,6 +137,11 @@ abstract class AbstractSimpleInputPageHelper extends ChangeNotifier {
             isLoggedInMandatory: false,
           ),
           iconData: Icons.add_a_photo,
+          padding: const EdgeInsetsDirectional.only(
+            top: SMALL_SPACE,
+            bottom: SMALL_SPACE,
+            start: VERY_SMALL_SPACE,
+          ),
         ),
       );
 

packages/smooth_app/lib/pages/product/simple_input_text_field.dart

@@ -17,9 +17,11 @@ class SimpleInputTextField extends StatefulWidget {
     this.minLengthForSuggestions = 1,
     this.categories,
     this.shapeProvider,
+    this.margin,
     this.padding,
     required this.productType,
     this.suffixIcon,
+    this.borderRadius,
   });
 
   final FocusNode focusNode;
@@ -32,9 +34,11 @@ class SimpleInputTextField extends StatefulWidget {
   final int minLengthForSuggestions;
   final String? categories;
   final String? Function()? shapeProvider;
+  final EdgeInsetsGeometry? margin;
   final EdgeInsetsGeometry? padding;
   final ProductType? productType;
   final Widget? suffixIcon;
+  final BorderRadius? borderRadius;
 
   @override
   State<SimpleInputTextField> createState() => _SimpleInputTextFieldState();
@@ -68,8 +72,8 @@ class _SimpleInputTextFieldState extends State<SimpleInputTextField> {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: widget.padding ??
-          const EdgeInsetsDirectional.only(start: LARGE_SPACE),
+      padding:
+          widget.margin ?? const EdgeInsetsDirectional.only(start: LARGE_SPACE),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         crossAxisAlignment: CrossAxisAlignment.center,
@@ -84,6 +88,8 @@ class _SimpleInputTextFieldState extends State<SimpleInputTextField> {
               constraints: widget.constraints,
               manager: _manager,
               suffixIcon: widget.suffixIcon,
+              borderRadius: widget.borderRadius,
+              padding: widget.padding,
             ),
           ),
           if (widget.withClearButton)