chore: date editor ui polish (#3367)

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart

@@ -10,7 +10,6 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
 
-import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra/time/duration.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -51,7 +50,7 @@ class _DateCellEditor extends State<DateCellEditor> {
         if (snapshot.hasData) {
           return _buildWidget(snapshot);
         } else {
-          return const SizedBox();
+          return const SizedBox.shrink();
         }
       },
     );
@@ -67,7 +66,7 @@ class _DateCellEditor extends State<DateCellEditor> {
       },
       (err) {
         Log.error(err);
-        return const SizedBox();
+        return const SizedBox.shrink();
       },
     );
   }
@@ -108,10 +107,6 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
       child: BlocBuilder<DateCellCalendarBloc, DateCellCalendarState>(
         builder: (context, state) {
           final List<Widget> children = [
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 12.0),
-              child: _buildCalendar(context),
-            ),
             AnimatedSwitcher(
               duration: const Duration(milliseconds: 300),
               child: state.includeTime
@@ -121,11 +116,13 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
                     )
                   : const SizedBox.shrink(),
             ),
-            const TypeOptionSeparator(spacing: 12.0),
+            const DatePicker(),
+            const VSpace(8.0),
+            const TypeOptionSeparator(spacing: 8.0),
             const _IncludeTimeButton(),
-            const TypeOptionSeparator(spacing: 12.0),
+            const TypeOptionSeparator(spacing: 8.0),
             DateTypeOptionButton(popoverMutex: popoverMutex),
-            const TypeOptionSeparator(spacing: 12.0),
+            VSpace(GridSize.typeOptionSeparatorHeight),
             const ClearDateButton(),
           ];
 
@@ -134,7 +131,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
             controller: ScrollController(),
             itemCount: children.length,
             itemBuilder: (BuildContext context, int index) => children[index],
-            padding: const EdgeInsets.symmetric(vertical: 12.0),
+            padding: const EdgeInsets.only(top: 18.0, bottom: 12.0),
           );
         },
       ),
@@ -146,23 +143,29 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
     popoverMutex.dispose();
     super.dispose();
   }
+}
 
-  Widget _buildCalendar(BuildContext context) {
+class DatePicker extends StatelessWidget {
+  const DatePicker({super.key});
+
+  @override
+  Widget build(BuildContext context) {
     return BlocBuilder<DateCellCalendarBloc, DateCellCalendarState>(
       builder: (context, state) {
         final textStyle = Theme.of(context).textTheme.bodyMedium!;
         final boxDecoration = BoxDecoration(
           color: Theme.of(context).colorScheme.surface,
-          shape: BoxShape.rectangle,
-          borderRadius: Corners.s6Border,
+          shape: BoxShape.circle,
         );
-        return TableCalendar(
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: TableCalendar(
             firstDay: kFirstDay,
             lastDay: kLastDay,
             focusedDay: state.focusedDay,
-          rowHeight: GridSize.popoverItemHeight,
+            rowHeight: 26.0 + 7.0,
             calendarFormat: state.format,
-          daysOfWeekHeight: GridSize.popoverItemHeight,
+            daysOfWeekHeight: 17.0 + 8.0,
             headerStyle: HeaderStyle(
               formatButtonVisible: false,
               titleCentered: true,
@@ -179,22 +182,19 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
                 FlowySvgs.arrow_right_s,
                 color: Theme.of(context).iconTheme.color,
               ),
-            headerMargin: const EdgeInsets.only(bottom: 8.0),
-          ),
-          daysOfWeekStyle: DaysOfWeekStyle(
-            dowTextFormatter: (date, locale) =>
-                DateFormat.E(locale).format(date).toUpperCase(),
-            weekdayStyle: AFThemeExtension.of(context).caption,
-            weekendStyle: AFThemeExtension.of(context).caption,
+              headerMargin: EdgeInsets.zero,
+              headerPadding: const EdgeInsets.only(bottom: 8.0),
             ),
             calendarStyle: CalendarStyle(
-            cellMargin: const EdgeInsets.all(3),
+              cellMargin: const EdgeInsets.all(3.5),
               defaultDecoration: boxDecoration,
               selectedDecoration: boxDecoration.copyWith(
                 color: Theme.of(context).colorScheme.primary,
               ),
               todayDecoration: boxDecoration.copyWith(
-              color: AFThemeExtension.of(context).lightGreyHover,
+                color: Colors.transparent,
+                border:
+                    Border.all(color: Theme.of(context).colorScheme.primary),
               ),
               weekendDecoration: boxDecoration,
               outsideDecoration: boxDecoration,
@@ -208,6 +208,21 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
                 color: Theme.of(context).disabledColor,
               ),
             ),
+            calendarBuilders: CalendarBuilders(
+              dowBuilder: (context, day) {
+                final locale = context.locale.toLanguageTag();
+                final label = DateFormat.E(locale).format(day).substring(0, 2);
+                return Padding(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Center(
+                    child: Text(
+                      label,
+                      style: AFThemeExtension.of(context).caption,
+                    ),
+                  ),
+                );
+              },
+            ),
             selectedDayPredicate: (day) => isSameDay(state.dateTime, day),
             onDaySelected: (selectedDay, focusedDay) {
               context.read<DateCellCalendarBloc>().add(
@@ -224,6 +239,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
                   .read<DateCellCalendarBloc>()
                   .add(DateCellCalendarEvent.setFocusedDay(focusedDay));
             },
+          ),
         );
       },
     );
@@ -295,11 +311,8 @@ class _TimeTextFieldState extends State<_TimeTextField> {
     return BlocConsumer<DateCellCalendarBloc, DateCellCalendarState>(
       listener: (context, state) => _textController.text = state.time ?? "",
       builder: (context, state) {
-        return Column(
-          children: [
-            const VSpace(12),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 18.0),
           child: FlowyTextField(
             text: state.time ?? "",
             focusNode: _focusNode,
@@ -313,8 +326,6 @@ class _TimeTextFieldState extends State<_TimeTextField> {
                   .add(DateCellCalendarEvent.setTime(timeStr));
             },
           ),
-            ),
-          ],
         );
       },
     );
@@ -349,7 +360,6 @@ class DateTypeOptionButton extends StatelessWidget {
               height: GridSize.popoverItemHeight,
               child: FlowyButton(
                 text: FlowyText.medium(title),
-                margin: GridSize.typeOptionContentInsets,
                 rightIcon: const FlowySvg(FlowySvgs.more_s),
               ),
             ),
@@ -461,8 +471,6 @@ class ClearDateButton extends StatelessWidget {
                 .add(const DateCellCalendarEvent.clearDate());
             PopoverContainer.of(context).close();
           },
-          leftIcon: const FlowySvg(FlowySvgs.delete_s),
-          margin: GridSize.typeOptionContentInsets,
         ),
       ),
     );

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -100,7 +100,7 @@ class FlowyButton extends StatelessWidget {
       decoration: decoration,
       child: Padding(
         padding:
-            margin ?? const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
+            margin ?? const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
         child: child,
       ),
     );

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text_field.dart

@@ -105,18 +105,18 @@ class FlowyTextFieldState extends State<FlowyTextField> {
       maxLines: widget.maxLines,
       maxLength: widget.maxLength,
       maxLengthEnforcement: MaxLengthEnforcement.truncateAfterCompositionEnds,
-      style: Theme.of(context).textTheme.bodyMedium,
+      style: Theme.of(context).textTheme.bodySmall,
       decoration: InputDecoration(
-        contentPadding:
-            const EdgeInsets.symmetric(horizontal: 10, vertical: 13),
+        constraints: const BoxConstraints(maxHeight: 32),
+        contentPadding: const EdgeInsets.symmetric(horizontal: 12),
         enabledBorder: OutlineInputBorder(
           borderSide: BorderSide(
             color: Theme.of(context).colorScheme.outline,
             width: 1.0,
           ),
-          borderRadius: Corners.s10Border,
+          borderRadius: Corners.s8Border,
         ),
-        isDense: true,
+        isDense: false,
         hintText: widget.hintText,
         errorText: widget.errorText,
         hintStyle: Theme.of(context)
@@ -130,21 +130,21 @@ class FlowyTextFieldState extends State<FlowyTextField> {
             color: Theme.of(context).colorScheme.primary,
             width: 1.0,
           ),
-          borderRadius: Corners.s10Border,
+          borderRadius: Corners.s8Border,
         ),
         errorBorder: OutlineInputBorder(
           borderSide: BorderSide(
             color: Theme.of(context).colorScheme.error,
             width: 1.0,
           ),
-          borderRadius: Corners.s10Border,
+          borderRadius: Corners.s8Border,
         ),
         focusedErrorBorder: OutlineInputBorder(
           borderSide: BorderSide(
             color: Theme.of(context).colorScheme.error,
             width: 1.0,
           ),
-          borderRadius: Corners.s10Border,
+          borderRadius: Corners.s8Border,
         ),
       ),
     );