fix: calendar UI fixes (#2060)

* chore: add some comments and improve readability

* chore: add a border to the event cards

* fix: improve scrollbar appearance

* fix: remove unused import

* style: code readability

---------

Co-authored-by: Alex Wallen <wallenstephen@outlook.com>

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart

@@ -62,30 +62,31 @@ class CalendarDayCard extends StatelessWidget {
           );
         }).toList();
 
-        final child = Padding(
-          padding: const EdgeInsets.all(8.0),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              _Header(
+        final child = Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: _Header(
                 date: date,
                 isInMonth: isInMonth,
                 isToday: isToday,
                 onCreate: () => onCreateEvent(date),
               ),
-              VSpace(GridSize.typeOptionSeparatorHeight),
-              Flexible(
-                child: ListView.separated(
-                  itemBuilder: (BuildContext context, int index) {
-                    return children[index];
-                  },
-                  itemCount: children.length,
-                  separatorBuilder: (BuildContext context, int index) =>
-                      VSpace(GridSize.typeOptionSeparatorHeight),
-                ),
+            ),
+            VSpace(GridSize.typeOptionSeparatorHeight),
+            Flexible(
+              child: ListView.separated(
+                itemBuilder: (BuildContext context, int index) {
+                  return children[index];
+                },
+                itemCount: children.length,
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                separatorBuilder: (BuildContext context, int index) =>
+                    VSpace(GridSize.typeOptionSeparatorHeight),
               ),
-            ],
-          ),
+            ),
+          ],
         );
 
         return Container(
@@ -94,7 +95,10 @@ class CalendarDayCard extends StatelessWidget {
             cursor: SystemMouseCursors.click,
             onEnter: (p) => notifyEnter(context, true),
             onExit: (p) => notifyEnter(context, false),
-            child: child,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 8.0),
+              child: child,
+            ),
           ),
         );
       }),
@@ -149,6 +153,15 @@ class _DayEventCell extends StatelessWidget {
         onTap: onClick,
         child: Container(
           padding: const EdgeInsets.symmetric(horizontal: 8),
+          decoration: BoxDecoration(
+            border: Border.fromBorderSide(
+              BorderSide(
+                color: Theme.of(context).dividerColor,
+                width: 1.0,
+              ),
+            ),
+            borderRadius: Corners.s6Border,
+          ),
           child: child,
         ),
       ),

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart

@@ -18,6 +18,8 @@ import 'package:protobuf/protobuf.dart';
 
 import 'calendar_setting.dart';
 
+/// Widget that displays a list of settings that alters the appearance of the
+/// calendar
 class CalendarLayoutSetting extends StatefulWidget {
   final CalendarSettingContext settingContext;
   final Function(CalendarLayoutSettingsPB? layoutSettings) onUpdated;
@@ -104,16 +106,7 @@ class _CalendarLayoutSettingState extends State<CalendarLayoutSetting> {
                 },
               );
             default:
-              return ShowWeekends(
-                showWeekends: settings.showWeekends,
-                onUpdated: (showWeekends) {
-                  _updateLayoutSettings(
-                    context,
-                    onUpdated: widget.onUpdated,
-                    showWeekends: showWeekends,
-                  );
-                },
-              );
+              return const SizedBox();
           }
         }).toList();
 

frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_setting.dart

@@ -15,8 +15,8 @@ import 'package:styled_widget/styled_widget.dart';
 import 'calendar_layout_setting.dart';
 
 /// The highest-level widget shown in the popover triggered by clicking the
-/// "Settings" button. By default, shows [AllCalendarSettings] but upon
-/// selecting a category, replaces contents with contents of the submenu.
+/// "Settings" button. Shows [AllCalendarSettings] by default, but replaces its
+/// contents with the submenu when a category is selected.
 class CalendarSetting extends StatelessWidget {
   final CalendarSettingContext settingContext;
   final CalendarLayoutSettingsPB? layoutSettings;