From 2205b12af22ab177ee1378cc4722d8ef4cb9328e Mon Sep 17 00:00:00 2001
From: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
Date: Wed, 12 Apr 2023 08:58:07 +0800
Subject: [PATCH] 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>
---
 .../calendar/presentation/calendar_day.dart   | 51 ++++++++++++-------
 .../toolbar/calendar_layout_setting.dart      | 13 ++---
 .../toolbar/calendar_setting.dart             |  4 +-
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
index 72c3655a16..c2b008fd3b 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
+++ b/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,
         ),
       ),
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart
index c946fa64c2..85cfe0825f 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart
+++ b/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();
 
diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_setting.dart b/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_setting.dart
index d9777ebba8..a1af44d306 100644
--- a/frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_setting.dart
+++ b/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;