feat: refactor app bar (#4539)

* feat: refactor appbar

* fix: flutter analyze

frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart

@@ -0,0 +1,64 @@
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+enum FlowyAppBarLeadingType {
+  back,
+  close,
+  cancel;
+
+  Widget getWidget(VoidCallback? onTap) {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return AppBarBackButton(onTap: onTap);
+      case FlowyAppBarLeadingType.close:
+        return AppBarCloseButton(onTap: onTap);
+      case FlowyAppBarLeadingType.cancel:
+        return AppBarCancelButton(onTap: onTap);
+    }
+  }
+
+  double? get width {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return 40.0;
+      case FlowyAppBarLeadingType.close:
+        return 40.0;
+      case FlowyAppBarLeadingType.cancel:
+        return 120;
+    }
+  }
+}
+
+class FlowyAppBar extends AppBar {
+  FlowyAppBar({
+    super.key,
+    super.actions,
+    Widget? title,
+    String? titleText,
+    FlowyAppBarLeadingType leadingType = FlowyAppBarLeadingType.back,
+    super.centerTitle,
+    VoidCallback? onTapLeading,
+    bool showDivider = true,
+  }) : super(
+          title: title ??
+              FlowyText(
+                titleText ?? '',
+                fontSize: 15.0,
+                fontWeight: FontWeight.w500,
+              ),
+          titleSpacing: 0,
+          elevation: 0,
+          leading: leadingType.getWidget(onTapLeading),
+          leadingWidth: leadingType.width,
+          toolbarHeight: 44.0,
+          bottom: showDivider
+              ? const PreferredSize(
+                  preferredSize: Size.fromHeight(0.5),
+                  child: Divider(
+                    height: 0.5,
+                  ),
+                )
+              : null,
+        );
+}

frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -15,7 +16,9 @@ class AppBarBackButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return AppBarButton(
       onTap: onTap ?? () => Navigator.pop(context),
-      child: const Icon(Icons.arrow_back_ios_new),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_back_s,
+      ),
     );
   }
 }
@@ -24,24 +27,17 @@ class AppBarCloseButton extends StatelessWidget {
   const AppBarCloseButton({
     super.key,
     this.onTap,
-    this.margin = const EdgeInsets.symmetric(
-      horizontal: 16.0,
-      vertical: 12.0,
-    ),
   });
 
   final VoidCallback? onTap;
-  final EdgeInsets margin;
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
+    return AppBarButton(
-      useIntrinsicWidth: true,
-      text: const Icon(
-        Icons.close,
-      ),
-      margin: margin,
       onTap: onTap ?? () => Navigator.pop(context),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_close_s,
+      ),
     );
   }
 }
@@ -49,17 +45,18 @@ class AppBarCloseButton extends StatelessWidget {
 class AppBarCancelButton extends StatelessWidget {
   const AppBarCancelButton({
     super.key,
-    required this.onTap,
+    this.onTap,
   });
 
-  final VoidCallback onTap;
+  final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
-      onTap: onTap,
+      onTap: onTap ?? () => Navigator.pop(context),
       child: FlowyText(
         LocaleKeys.button_cancel.tr(),
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }
@@ -76,16 +73,13 @@ class AppBarDoneButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
+      isActionButton: true,
       onTap: onTap,
-      extent: 0.0,
+      child: FlowyText(
-      child: Padding(
+        LocaleKeys.button_Done.tr(),
-        padding: const EdgeInsets.only(right: 8.0),
+        color: Theme.of(context).colorScheme.primary,
-        child: FlowyText(
+        fontWeight: FontWeight.w500,
-          LocaleKeys.button_Done.tr(),
+        textAlign: TextAlign.right,
-          color: Theme.of(context).colorScheme.primary,
-          fontWeight: FontWeight.w500,
-          textAlign: TextAlign.right,
-        ),
       ),
     );
   }
@@ -102,11 +96,9 @@ class AppBarMoreButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
+      isActionButton: true,
       onTap: () => onTap(context),
-      child: const Icon(
+      child: const FlowySvg(FlowySvgs.three_dots_s),
-        // replace with flowy icon
-        Icons.more_horiz_sharp,
-      ),
     );
   }
 }
@@ -114,27 +106,28 @@ class AppBarMoreButton extends StatelessWidget {
 class AppBarButton extends StatelessWidget {
   const AppBarButton({
     super.key,
-    this.extent = 16.0,
+    this.isActionButton = false,
     required this.onTap,
     required this.child,
   });
 
-  // used to extend the hit area of the more button
+  static const defaultWidth = 40.0;
-  final double extent;
 
   final VoidCallback onTap;
   final Widget child;
+  final bool isActionButton;
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return GestureDetector(
-      borderRadius: BorderRadius.circular(28),
-      splashColor: Colors.transparent,
-      focusColor: Colors.transparent,
-      highlightColor: Colors.transparent,
       onTap: onTap,
       child: Padding(
-        padding: EdgeInsets.all(extent),
+        padding: EdgeInsets.only(
+          top: 12.0,
+          bottom: 12.0,
+          left: 12.0,
+          right: isActionButton ? 12.0 : 8.0,
+        ),
         child: child,
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
@@ -116,15 +117,12 @@ class _MobileViewPageState extends State<MobileViewPage> {
 
   Widget _buildApp(ViewPB? view, List<Widget> actions, Widget child) {
     final icon = view?.icon.value;
-    final elevation = (view?.layout.isDatabaseView ?? false) ? 0.0 : null;
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
-        elevation: elevation,
         title: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            if (icon != null)
+            if (icon != null && icon.isNotEmpty)
               EmojiText(
                 emoji: '$icon ',
                 fontSize: 22.0,
@@ -138,7 +136,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
             ),
           ],
         ),
-        leading: const AppBarBackButton(),
         actions: actions,
       ),
       body: SafeArea(child: child),

frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart

@@ -43,7 +43,7 @@ class OptionColorList extends StatelessWidget {
               alignment: Alignment.center,
               child: isSelected
                   ? const FlowySvg(
-                      FlowySvgs.blue_check_s,
+                      FlowySvgs.m_blue_check_s,
                       size: Size.square(28.0),
                       blendMode: null,
                     )

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart

@@ -27,7 +27,6 @@ class BottomSheetHeader extends StatelessWidget {
             child: Align(
               alignment: Alignment.centerLeft,
               child: AppBarCloseButton(
-                margin: EdgeInsets.zero,
                 onTap: onClose,
               ),
             ),

frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart

@@ -151,12 +151,7 @@ class _Header extends StatelessWidget {
             if (showCloseButton)
               const Align(
                 alignment: Alignment.centerLeft,
-                child: Padding(
+                child: AppBarCloseButton(),
-                  padding: EdgeInsets.only(left: 16),
-                  child: AppBarCloseButton(
-                    margin: EdgeInsets.zero,
-                  ),
-                ),
               ),
             Align(
               child: FlowyText(
@@ -168,11 +163,8 @@ class _Header extends StatelessWidget {
             if (showDoneButton)
               Align(
                 alignment: Alignment.centerRight,
-                child: Padding(
+                child: AppBarDoneButton(
-                  padding: const EdgeInsets.only(right: 16),
+                  onTap: () => Navigator.pop(context),
-                  child: AppBarDoneButton(
-                    onTap: () => Navigator.pop(context),
-                  ),
                 ),
               ),
           ],

frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart

@@ -1,7 +1,10 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
+import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
@@ -14,7 +17,6 @@ import 'package:appflowy/plugins/database/grid/application/row/row_detail_bloc.d
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
-import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_property.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -77,7 +79,14 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
     return BlocProvider.value(
       value: _bloc,
       child: Scaffold(
-        appBar: _buildAppBar(),
+        appBar: FlowyAppBar(
+          leadingType: FlowyAppBarLeadingType.close,
+          actions: [
+            AppBarMoreButton(
+              onTap: (_) => _showCardActions(context),
+            ),
+          ],
+        ),
         body: BlocBuilder<MobileRowDetailBloc, MobileRowDetailState>(
           buildWhen: (previous, current) =>
               previous.rowInfos.length != current.rowInfos.length,
@@ -118,27 +127,6 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
     );
   }
 
-  AppBar _buildAppBar() {
-    return AppBar(
-      elevation: 0,
-      leading: IconButton(
-        onPressed: () => context.pop(),
-        icon: const Icon(Icons.close),
-      ),
-      actions: [
-        IconButton(
-          iconSize: 40,
-          icon: const FlowySvg(
-            FlowySvgs.details_horizontal_s,
-            size: Size.square(20),
-          ),
-          padding: EdgeInsets.zero,
-          onPressed: () => _showCardActions(context),
-        ),
-      ],
-    );
-  }
-
   void _showCardActions(BuildContext context) {
     showMobileBottomSheet(
       context,

frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart

@@ -1,16 +1,15 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/date_cell_editor_bloc.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/mobile_appflowy_date_picker.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileDateCellEditScreen extends StatefulWidget {
@@ -43,7 +42,7 @@ class _MobileDateCellEditScreenState extends State<MobileDateCellEditScreen> {
 
   Widget _buildFullScreen() {
     return Scaffold(
-      appBar: AppBar(title: FlowyText.medium(LocaleKeys.titleBar_date.tr())),
+      appBar: FlowyAppBar(titleText: LocaleKeys.titleBar_date.tr()),
       body: _buildDatePicker(),
     );
   }

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
@@ -44,23 +44,10 @@ class _MobileNewPropertyScreenState extends State<MobileNewPropertyScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
         centerTitle: true,
-        title: FlowyText.medium(
+        titleText: LocaleKeys.grid_field_newProperty.tr(),
-          LocaleKeys.grid_field_newProperty.tr(),
+        leadingType: FlowyAppBarLeadingType.cancel,
-        ),
-        leading: AppBarCancelButton(
-          onTap: () => context.pop(),
-        ),
-        leadingWidth: 120,
-        elevation: 0,
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(1),
-          child: Divider(
-            height: 1,
-            thickness: 1,
-          ),
-        ),
         actions: [
           _SaveButton(
             onSave: () {

frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart

@@ -1,14 +1,12 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/plugins/database/application/field/field_backend_service.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/field/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 class MobileEditPropertyScreen extends StatefulWidget {
@@ -56,22 +54,8 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
         }
       },
       child: Scaffold(
-        appBar: AppBar(
+        appBar: FlowyAppBar(
-          centerTitle: true,
+          titleText: LocaleKeys.grid_field_editProperty.tr(),
-          title: FlowyText.medium(
-            LocaleKeys.grid_field_editProperty.tr(),
-          ),
-          elevation: 0,
-          bottom: const PreferredSize(
-            preferredSize: Size.fromHeight(1),
-            child: Divider(
-              height: 1,
-              thickness: 1,
-            ),
-          ),
-          leading: AppBarBackButton(
-            onTap: () => context.pop(_fieldOptionValues),
-          ),
         ),
         body: MobileFieldEditor(
           mode: FieldOptionMode.edit,

frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart

@@ -1,5 +1,4 @@
-import 'package:flutter/material.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
-
 import 'package:appflowy/mobile/presentation/database/mobile_calendar_events_empty.dart';
 import 'package:appflowy/plugins/database/application/row/row_cache.dart';
 import 'package:appflowy/plugins/database/calendar/application/calendar_bloc.dart';
@@ -8,6 +7,7 @@ import 'package:calendar_view/calendar_view.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileCalendarEventsScreen extends StatefulWidget {
@@ -56,10 +56,9 @@ class _MobileCalendarEventsScreenState
             widget.calendarBloc.add(CalendarEvent.createEvent(widget.date)),
         child: const Text('+'),
       ),
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        title: Text(
+        titleText: DateFormat.yMMMMd(context.locale.toLanguageTag())
-          DateFormat.yMMMMd(context.locale.toLanguageTag()).format(widget.date),
+            .format(widget.date),
-        ),
       ),
       body: BlocProvider<CalendarBloc>.value(
         value: widget.calendarBloc,

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart

@@ -106,7 +106,6 @@ class MobileDatabaseViewListButton extends StatelessWidget {
       onPressed: () {
         showMobileBottomSheet(
           context,
-          padding: EdgeInsets.zero,
           showDragHandle: true,
           builder: (_) {
             return BlocProvider<ViewBloc>(
@@ -126,7 +125,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           const FlowySvg(
-            FlowySvgs.blue_check_s,
+            FlowySvgs.m_blue_check_s,
             size: Size.square(20),
             blendMode: BlendMode.dst,
           ),

frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart

@@ -44,7 +44,7 @@ class _MobileDatabaseViewQuickActionsState
   Widget _quickActions(BuildContext context, ViewPB view) {
     final isInline = view.childViews.isNotEmpty;
     return Padding(
-      padding: const EdgeInsets.only(top: 8, bottom: 38),
+      padding: const EdgeInsets.only(top: 8),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [

frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/cloud/cloud_setting_group.dart';
 import 'package:appflowy/mobile/presentation/setting/user_session_setting_group.dart';
@@ -42,8 +43,8 @@ class _MobileHomeSettingPageState extends State<MobileHomeSettingPage> {
         });
 
         return Scaffold(
-          appBar: AppBar(
+          appBar: FlowyAppBar(
-            title: Text(LocaleKeys.settings_title.tr()),
+            titleText: LocaleKeys.settings_title.tr(),
           ),
           body: userProfile == null
               ? _buildErrorWidget(errorMsg)

frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart

@@ -1,2 +1 @@
 export 'about_setting_group.dart';
-export 'user_agreement_page.dart';

frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart

@@ -1,22 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-class UserAgreementPage extends StatelessWidget {
-  const UserAgreementPage({super.key});
-
-  static const routeName = '/UserAgreementPage';
-
-  @override
-  Widget build(BuildContext context) {
-    // TODO(yijing): implement page
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_mobile_userAgreement.tr()),
-      ),
-      body: const Center(
-        child: Text('🪜 Under construction'),
-      ),
-    );
-  }
-}

frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_cloud.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -12,8 +13,8 @@ class AppFlowyCloudPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        title: Text(LocaleKeys.settings_menu_cloudSettings.tr()),
+        titleText: LocaleKeys.settings_menu_cloudSettings.tr(),
       ),
       body: Padding(
         padding: const EdgeInsets.all(20.0),

frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart

@@ -1,10 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
@@ -47,58 +46,48 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
     final selectedFontFamilyName =
         context.watch<AppearanceSettingsCubit>().state.font;
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
+        titleText: LocaleKeys.titleBar_font.tr(),
-        elevation: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_font.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(0.5),
-          child: Divider(
-            height: 0.5,
-          ),
-        ),
       ),
       body: SafeArea(
-        child: ListView.separated(
+        child: Scrollbar(
-          itemBuilder: (context, index) {
+          child: ListView.builder(
-            if (index == 0) {
+            itemBuilder: (context, index) {
-              // search bar
+              if (index == 0) {
-              return Padding(
+                // search bar
-                padding: const EdgeInsets.all(8.0),
+                return Padding(
-                child: FlowyMobileSearchTextField(
+                  padding: const EdgeInsets.symmetric(
-                  onChanged: (keyword) {
+                    vertical: 8.0,
-                    setState(() {
+                    horizontal: 12.0,
-                      availableFonts = _availableFonts
+                  ),
-                          .where(
+                  child: FlowyMobileSearchTextField(
-                            (element) => parseFontFamilyName(element)
+                    onChanged: (keyword) {
-                                .toLowerCase()
+                      setState(() {
-                                .contains(keyword.toLowerCase()),
+                        availableFonts = _availableFonts
-                          )
+                            .where(
-                          .toList();
+                              (element) => parseFontFamilyName(element)
-                    });
+                                  .toLowerCase()
-                  },
+                                  .contains(keyword.toLowerCase()),
-                ),
+                            )
+                            .toList();
+                      });
+                    },
+                  ),
+                );
+              }
+              final fontFamilyName = availableFonts[index - 1];
+              final displayName = parseFontFamilyName(fontFamilyName);
+              return FlowyOptionTile.checkbox(
+                text: displayName,
+                isSelected: selectedFontFamilyName == fontFamilyName,
+                showTopBorder: false,
+                onTap: () => context.pop(fontFamilyName),
+                fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
+                backgroundColor: Colors.transparent,
               );
-            }
+            },
-            final fontFamilyName = availableFonts[index - 1];
+            itemCount: availableFonts.length + 1, // with search bar
-            final displayName = parseFontFamilyName(fontFamilyName);
-            return FlowyOptionTile.checkbox(
-              text: displayName,
-              isSelected: selectedFontFamilyName == fontFamilyName,
-              showTopBorder: index == 0,
-              onTap: () => context.pop(fontFamilyName),
-              fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
-              backgroundColor: Colors.transparent,
-            );
-          },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
           ),
-          itemCount: availableFonts.length + 1, // with search bar
         ),
       ),
     );

frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart

@@ -1,8 +1,8 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/language.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -29,49 +29,21 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
   Widget build(BuildContext context) {
     final supportedLocales = EasyLocalization.of(context)!.supportedLocales;
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
+        titleText: LocaleKeys.titleBar_language.tr(),
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
       ),
       body: SafeArea(
-        child: ListView.separated(
+        child: ListView.builder(
           itemBuilder: (context, index) {
             final locale = supportedLocales[index];
-            return SizedBox(
+            return FlowyOptionTile.checkbox(
-              height: 48.0,
+              text: languageFromLocale(locale),
-              child: InkWell(
+              isSelected: EasyLocalization.of(context)!.locale == locale,
-                onTap: () => context.pop(locale),
+              showTopBorder: false,
-                child: Padding(
+              onTap: () => context.pop(locale),
-                  padding: const EdgeInsets.symmetric(
+              backgroundColor: Colors.transparent,
-                    horizontal: 4.0,
-                    vertical: 12.0,
-                  ),
-                  child: Row(
-                    children: [
-                      const HSpace(12.0),
-                      FlowyText(
-                        languageFromLocale(locale),
-                      ),
-                      const Spacer(),
-                      if (EasyLocalization.of(context)!.locale == locale)
-                        const Icon(
-                          Icons.check,
-                          size: 16,
-                        ),
-                      const HSpace(12.0),
-                    ],
-                  ),
-                ),
-              ),
             );
           },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
-          ),
           itemCount: supportedLocales.length,
         ),
       ),

frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/self_host_setting_group.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
@@ -18,8 +19,8 @@ class MobileLaunchSettingsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     context.watch<AppearanceSettingsCubit>();
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        title: Text(LocaleKeys.settings_title.tr()),
+        titleText: LocaleKeys.settings_title.tr(),
       ),
       body: SingleChildScrollView(
         child: Padding(

frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart

@@ -51,6 +51,7 @@ class PersonalInfoSettingGroup extends StatelessWidget {
                     showCloseButton: true,
                     showDragHandle: true,
                     showDivider: false,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
                     builder: (_) {
                       return EditUsernameBottomSheet(
                         context,

frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart

@@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/color/color_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -17,13 +16,8 @@ class MobileColorPickerScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
       ),
       body: SafeArea(
         child: FlowyMobileColorPicker(

frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart

@@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class IconPickerPage extends StatelessWidget {
@@ -18,13 +17,8 @@ class IconPickerPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
       ),
       body: SafeArea(
         child: FlowyIconPicker(

frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
@@ -61,10 +62,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
               mainAxisSize: MainAxisSize.min,
               children: [
                 const DragHandler(),
-                Padding(
+                _buildHeader(context),
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: _buildHeader(context),
-                ),
                 const Divider(height: 0.5),
                 Expanded(
                   child: Padding(
@@ -83,20 +81,14 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
   }
 
   Widget _buildHeader(BuildContext context) {
-    const iconWidth = 36.0;
     const height = 44.0;
     return Stack(
       children: [
         Align(
           alignment: Alignment.centerLeft,
-          child: FlowyIconButton(
+          child: showMoreOptions
-            icon: FlowySvg(
+              ? AppBarBackButton(onTap: _popOrBack)
-              showMoreOptions ? FlowySvgs.arrow_left_s : FlowySvgs.close_s,
+              : AppBarCloseButton(onTap: _popOrBack),
-              size: const Size.square(iconWidth),
-            ),
-            width: iconWidth,
-            onPressed: () => _popOrBack(),
-          ),
         ),
         SizedBox(
           height: 44.0,
@@ -473,6 +465,7 @@ class _MoreOptionsState extends State<_MoreOptions> {
     return ConstrainedBox(
       constraints: const BoxConstraints.tightFor(height: 52.0),
       child: FlowyOptionTile.textField(
+        showTopBorder: false,
         onTextChanged: (name) => widget.onUpdate(name, null),
         controller: widget.controller,
       ),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -15,13 +15,8 @@ class MobileCodeLanguagePickerScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        titleSpacing: 0,
+        titleText: LocaleKeys.titleBar_language.tr(),
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
       ),
       body: SafeArea(
         child: ListView.separated(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart

@@ -221,7 +221,7 @@ class _BackgroundColorItem extends StatelessWidget {
         alignment: Alignment.center,
         child: isSelected
             ? const FlowySvg(
-                FlowySvgs.blue_check_s,
+                FlowySvgs.m_blue_check_s,
                 size: Size.square(28.0),
                 blendMode: null,
               )

frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart

@@ -50,7 +50,6 @@ GoRouter generateRouter(Widget child) {
       if (PlatformExtension.isMobile) ...[
         // settings
         _mobileHomeSettingPageRoute(),
-        _mobileSettingUserAgreementPageRoute(),
         _mobileCloudSettingAppFlowyCloudPageRoute(),
         _mobileLaunchSettingsPageRoute(),
 
@@ -209,16 +208,6 @@ GoRoute _mobileCloudSettingAppFlowyCloudPageRoute() {
   );
 }
 
-GoRoute _mobileSettingUserAgreementPageRoute() {
-  return GoRoute(
-    parentNavigatorKey: AppGlobals.rootNavKey,
-    path: UserAgreementPage.routeName,
-    pageBuilder: (context, state) {
-      return const MaterialPage(child: UserAgreementPage());
-    },
-  );
-}
-
 GoRoute _mobileLaunchSettingsPageRoute() {
   return GoRoute(
     parentNavigatorKey: AppGlobals.rootNavKey,

frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart

@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -16,13 +16,11 @@ class MobileLoadingScreen extends StatelessWidget {
     const double spacing = 16;
 
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
-        leading: AppBarCloseButton(
+        showDivider: false,
-          onTap: () => context.read<SignInBloc>().add(
+        onTapLeading: () => context.read<SignInBloc>().add(
-                const SignInEvent.cancel(),
+              const SignInEvent.cancel(),
-              ),
+            ),
-        ),
-        elevation: 0,
       ),
       body: Center(
         child: Column(

frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart

@@ -1,10 +1,8 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 
 const _height = 44.0;
 
@@ -15,18 +13,11 @@ class MobileDateHeader extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       color: Theme.of(context).colorScheme.surface,
-      padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: Stack(
         children: [
-          Align(
+          const Align(
             alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
+            child: AppBarCloseButton(),
-              icon: const FlowySvg(
-                FlowySvgs.close_s,
-                size: Size.square(_height),
-              ),
-              onPressed: () => context.pop(),
-            ),
           ),
           Align(
             child: FlowyText.medium(

frontend/resources/flowy_icons/16x/m_app_bar_back.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_left_outlined">
+<path id="Union" d="M13.5774 1.9107C13.9028 2.23614 13.9028 2.76378 13.5774 3.08921L6.66667 9.99996L13.5774 16.9107C13.9028 17.2361 13.9028 17.7638 13.5774 18.0892C13.252 18.4147 12.7243 18.4147 12.3989 18.0892L5.48816 11.1785C4.83728 10.5276 4.83728 9.47232 5.48816 8.82145L12.3989 1.9107C12.7243 1.58527 13.252 1.58527 13.5774 1.9107Z" fill="#2B2F36"/>
+</g>
+</svg>

frontend/resources/flowy_icons/16x/m_app_bar_close.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#133;&#179;&#233;&#151;&#173;_close 1">
+<path id="Union" d="M5.13807 4.19526C4.87772 3.93491 4.45561 3.93491 4.19526 4.19526C3.93491 4.45561 3.93491 4.87772 4.19526 5.13807L9.05719 10L4.19526 14.8619C3.93491 15.1223 3.93491 15.5444 4.19526 15.8047C4.45561 16.0651 4.87772 16.0651 5.13807 15.8047L10 10.9428L14.8619 15.8047C15.1223 16.0651 15.5444 16.0651 15.8047 15.8047C16.0651 15.5444 16.0651 15.1223 15.8047 14.8619L10.9428 10L15.8047 5.13807C16.0651 4.87772 16.0651 4.45561 15.8047 4.19526C15.5444 3.93491 15.1223 3.93491 14.8619 4.19526L10 9.05719L5.13807 4.19526Z" fill="#1F2329" stroke="#1F2329" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>