fix: improve sidebar UI (#5453)

* fix: revert dark main color

* fix: workspace name font size

* fix: only show collapse button when hovering the sidebar

* fix: remove expand button after workspace name

* fix: change settings icon opactiy to 0.7

* chore: replace favorite icon

* chore: add arrow icon after section name

* chore: replace trash bin icon

* chore: adjust collapse icon padding

* feat: redesign question bubble

* fix: replace favorite icon

* fix: remove trash button padding

* chore: replace hover color

* feat: add more padding to tooltip

* feat: add hover effect to arrow icon

* feat: add hover effect to add view button

* fix: view title color

* feat: replace question bubble

* feat: replace default page icon

* fix: header icon size

* fix: add view button padding

* fix: unable to insert default image on desktop

* fix: notification button size issue

* fix: workspace icon size

* feat: add a divider between favorite space and add new page button

frontend/appflowy_flutter/lib/core/frameless_window.dart

@@ -127,7 +127,7 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
         onPressed: () => context
             .read<HomeSettingBloc>()
             .add(const HomeSettingEvent.collapseMenu()),
-        iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+        iconPadding: const EdgeInsets.all(4.0),
         icon: context.read<HomeSettingBloc>().state.isMenuCollapsed
             ? const FlowySvg(FlowySvgs.show_menu_s)
             : const FlowySvg(FlowySvgs.hide_menu_m),

frontend/appflowy_flutter/lib/plugins/database/board/board.dart

@@ -19,7 +19,7 @@ class BoardPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.board_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.board_s;
+  FlowySvgData get icon => FlowySvgs.icon_board_s;
 
   @override
   PluginType get pluginType => PluginType.board;

frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart

@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class CalendarPluginBuilder extends PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class CalendarPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.calendar_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.date_s;
+  FlowySvgData get icon => FlowySvgs.icon_calendar_s;
 
   @override
   PluginType get pluginType => PluginType.calendar;

frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart

@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class GridPluginBuilder implements PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class GridPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.grid_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.grid_s;
+  FlowySvgData get icon => FlowySvgs.icon_grid_s;
 
   @override
   PluginType get pluginType => PluginType.grid;

frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart

@@ -44,7 +44,7 @@ class DatabaseDocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.databaseDocument;

frontend/appflowy_flutter/lib/plugins/document/document.dart

@@ -37,7 +37,7 @@ class DocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.document;
@@ -148,7 +148,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
               ? [
                   DocumentCollaborators(
                     key: ValueKey('collaborators_${view.id}'),
-                    width: 150,
+                    width: 120,
                     height: 32,
                     view: view,
                   ),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart

@@ -1,14 +1,17 @@
 import 'dart:ui';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
 
 const String kLocalImagesKey = 'local_images';
 
 List<String> get builtInAssetImages => [
-      "assets/images/app_flowy_abstract_cover_1.jpg",
+      'assets/images/built_in_cover_images/m_cover_image_1.jpg',
-      "assets/images/app_flowy_abstract_cover_2.jpg",
+      'assets/images/built_in_cover_images/m_cover_image_2.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_3.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_4.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_5.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_6.jpg',
     ];
 
 class ColorOption {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart

@@ -155,7 +155,7 @@ class _DesktopCoverState extends State<DesktopCover> {
         );
       case CoverType.asset:
         return Image.asset(
-          widget.coverDetails!,
+          PageStyleCoverImageType.builtInImagePath(detail),
           fit: BoxFit.cover,
         );
       case CoverType.color:

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart

@@ -28,8 +28,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:string_validator/string_validator.dart';
 
-import 'cover_editor.dart';
-
 const double kCoverHeight = 250.0;
 const double kIconHeight = 60.0;
 const double kToolbarHeight = 40.0; // with padding to the top
@@ -296,7 +294,7 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
           leftIconSize: const Size.square(18),
           onTap: () => widget.onIconOrCoverChanged(
             cover: PlatformExtension.isDesktopOrWeb
-                ? (CoverType.asset, builtInAssetImages.first)
+                ? (CoverType.asset, '1')
                 : (CoverType.color, '0xffe8e0ff'),
           ),
           useIntrinsicWidth: true,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart

@@ -191,7 +191,13 @@ class EditorMigration {
     } else {
       switch (coverType) {
         case CoverType.asset:
-          // The new version does not support the asset cover.
+          extra = {
+            ViewExtKeys.coverKey: {
+              ViewExtKeys.coverTypeKey:
+                  PageStyleCoverImageType.builtInImage.toString(),
+              ViewExtKeys.coverValueKey: coverDetails,
+            },
+          };
           break;
         case CoverType.color:
           extra = {

frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart

@@ -41,10 +41,10 @@ class ViewExtKeys {
 extension ViewExtension on ViewPB {
   Widget defaultIcon() => FlowySvg(
         switch (layout) {
-          ViewLayoutPB.Board => FlowySvgs.board_s,
+          ViewLayoutPB.Board => FlowySvgs.icon_board_s,
-          ViewLayoutPB.Calendar => FlowySvgs.calendar_s,
+          ViewLayoutPB.Calendar => FlowySvgs.icon_calendar_s,
-          ViewLayoutPB.Grid => FlowySvgs.grid_s,
+          ViewLayoutPB.Grid => FlowySvgs.icon_grid_s,
-          ViewLayoutPB.Document => FlowySvgs.document_s,
+          ViewLayoutPB.Document => FlowySvgs.icon_document_s,
           ViewLayoutPB.Chat => FlowySvgs.chat_ai_page_s,
           _ => FlowySvgs.document_s,
         },

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart

@@ -134,15 +134,22 @@ class FavoriteHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
+    return SizedBox(
+      height: HomeSizes.newPageSectionHeight,
+      child: FlowyButton(
         onTap: onPressed,
-      margin: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 7.0),
+        margin: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 3.0),
         leftIcon: const FlowySvg(
-        FlowySvgs.favorite_header_icon_s,
+          FlowySvgs.favorite_header_icon_m,
           blendMode: null,
         ),
-      iconPadding: 10.0,
+        leftIconSize: const Size.square(24.0),
-      text: FlowyText.regular(LocaleKeys.sideBar_favorites.tr()),
+        iconPadding: 8.0,
+        text: FlowyText.regular(
+          LocaleKeys.sideBar_favorites.tr(),
+          lineHeight: 1.15,
+        ),
+      ),
     );
   }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
@@ -11,6 +12,7 @@ class FolderHeader extends StatefulWidget {
     required this.addButtonTooltip,
     required this.onPressed,
     required this.onAdded,
+    required this.isExpanded,
   });
 
   final String title;
@@ -18,6 +20,7 @@ class FolderHeader extends StatefulWidget {
   final String addButtonTooltip;
   final VoidCallback onPressed;
   final VoidCallback onAdded;
+  final bool isExpanded;
 
   @override
   State<FolderHeader> createState() => _FolderHeaderState();
@@ -34,24 +37,42 @@ class _FolderHeaderState extends State<FolderHeader> {
 
   @override
   Widget build(BuildContext context) {
-    return MouseRegion(
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: MouseRegion(
         onEnter: (_) => isHovered.value = true,
         onExit: (_) => isHovered.value = false,
         child: FlowyButton(
           onTap: widget.onPressed,
-        margin: const EdgeInsets.symmetric(horizontal: 6.0),
+          margin: const EdgeInsets.only(left: 6.0, right: 4.0),
           rightIcon: ValueListenableBuilder(
             valueListenable: isHovered,
             builder: (context, onHover, child) =>
                 Opacity(opacity: onHover ? 1 : 0, child: child),
             child: FlowyIconButton(
+              width: 24,
+              iconPadding: const EdgeInsets.all(4.0),
               tooltipText: widget.addButtonTooltip,
               icon: const FlowySvg(FlowySvgs.view_item_add_s),
               onPressed: widget.onAdded,
             ),
           ),
           iconPadding: 10.0,
-        text: FlowyText(widget.title),
+          text: Row(
+            children: [
+              FlowyText(
+                widget.title,
+                lineHeight: 1.15,
+              ),
+              const HSpace(4.0),
+              FlowySvg(
+                widget.isExpanded
+                    ? FlowySvgs.workspace_drop_down_menu_show_s
+                    : FlowySvgs.workspace_drop_down_menu_hide_s,
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart

@@ -76,6 +76,7 @@ class _SectionFolderState extends State<SectionFolder> {
   Widget _buildHeader(BuildContext context) {
     return FolderHeader(
       title: widget.title,
+      isExpanded: context.watch<FolderBloc>().state.isExpanded,
       expandButtonTooltip: widget.expandButtonTooltip,
       addButtonTooltip: widget.addButtonTooltip,
       onPressed: () =>

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart

@@ -1,8 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class SidebarFooter extends StatelessWidget {
@@ -31,12 +35,20 @@ class SidebarTrashButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ValueListenableBuilder(
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: ValueListenableBuilder(
         valueListenable: getIt<MenuSharedState>().notifier,
         builder: (context, value, child) {
-        return MouseRegion(
+          return FlowyButton(
-          cursor: SystemMouseCursors.click,
+            leftIcon: const FlowySvg(FlowySvgs.sidebar_footer_trash_m),
-          child: GestureDetector(
+            leftIconSize: const Size.square(24.0),
+            iconPadding: 8.0,
+            margin: const EdgeInsets.all(4.0),
+            text: FlowyText.regular(
+              LocaleKeys.trash_text.tr(),
+              lineHeight: 1.15,
+            ),
             onTap: () {
               getIt<MenuSharedState>().latestOpenView = null;
               getIt<TabsBloc>().add(
@@ -45,10 +57,9 @@ class SidebarTrashButton extends StatelessWidget {
                 ),
               );
             },
-            child: const FlowySvg(FlowySvgs.sidebar_footer_trash_s),
-          ),
           );
         },
+      ),
     );
   }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart

@@ -23,8 +23,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 class SidebarTopMenu extends StatelessWidget {
   const SidebarTopMenu({
     super.key,
+    required this.isSidebarOnHover,
   });
 
+  final ValueNotifier<bool> isSidebarOnHover;
+
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
@@ -80,19 +83,28 @@ class SidebarTopMenu extends StatelessWidget {
       ],
     );
 
-    return Padding(
+    return ValueListenableBuilder(
-      padding: const EdgeInsets.only(top: 12.0),
+      valueListenable: isSidebarOnHover,
+      builder: (_, value, ___) => Opacity(
+        opacity: value ? 1 : 0,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 12.0, right: 4.0),
           child: FlowyTooltip(
             richMessage: textSpan,
-        child: FlowyIconButton(
+            child: Listener(
-          width: 24,
+              onPointerDown: (_) => context
-          onPressed: () => context
                   .read<HomeSettingBloc>()
                   .add(const HomeSettingEvent.collapseMenu()),
-          iconPadding: const EdgeInsets.all(2),
+              child: FlowyIconButton(
+                width: 24,
+                onPressed: () {},
+                iconPadding: const EdgeInsets.all(4),
                 icon: const FlowySvg(FlowySvgs.hide_menu_s),
               ),
             ),
+          ),
+        ),
+      ),
     );
   }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart

@@ -25,22 +25,21 @@ class SidebarFolder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    const sectionPadding = 16.0;
     return ValueListenableBuilder(
       valueListenable: getIt<MenuSharedState>().notifier,
       builder: (context, value, child) {
         return Column(
           children: [
+            const VSpace(4.0),
             // favorite
             BlocBuilder<FavoriteBloc, FavoriteState>(
               builder: (context, state) {
                 if (state.views.isEmpty) {
                   return const SizedBox.shrink();
                 }
-                return Padding(
+                return FavoriteFolder(
-                  padding: const EdgeInsets.only(top: 16.0, bottom: 10),
-                  child: FavoriteFolder(
                   views: state.views.map((e) => e.item).toList(),
-                  ),
                 );
               },
             ),
@@ -56,18 +55,18 @@ class SidebarFolder extends StatelessWidget {
                   children: isCollaborativeWorkspace
                       ? [
                           // public
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PublicSectionFolder(views: state.section.publicViews),
 
                           // private
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PrivateSectionFolder(
                             views: state.section.privateViews,
                           ),
                         ]
                       : [
                           // personal
-                          const VSpace(10),
+                          const VSpace(sectionPadding),
                           PersonalSectionFolder(
                             views: state.section.publicViews,
                           ),
@@ -75,6 +74,7 @@ class SidebarFolder extends StatelessWidget {
                 );
               },
             ),
+            const VSpace(200),
           ],
         );
       },

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart

@@ -18,20 +18,20 @@ class SidebarNewPageButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 12),
+      padding: const EdgeInsets.symmetric(horizontal: 8),
       height: HomeSizes.newPageSectionHeight,
       child: FlowyButton(
         onTap: () async => _createNewPage(context),
         leftIcon: const FlowySvg(
-          FlowySvgs.new_app_s,
+          FlowySvgs.new_app_m,
           blendMode: null,
         ),
-        iconPadding: 10.0,
+        leftIconSize: const Size.square(24.0),
-        text: SizedBox(
+        margin: const EdgeInsets.only(left: 4.0),
-          height: 18.0,
+        iconPadding: 8.0,
-          child: FlowyText.regular(
+        text: FlowyText.regular(
           LocaleKeys.newPageText.tr(),
-          ),
+          lineHeight: 1.15,
         ),
       ),
     );

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart

@@ -1,12 +1,9 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/af_focus_manager.dart';
-import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/hotkeys.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:appflowy_backend/log.dart';
@@ -16,6 +13,7 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
 
@@ -51,13 +49,15 @@ class UserSettingButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox.square(
-      dimension: HomeSizes.workspaceSectionHeight,
+      dimension: 24.0,
       child: FlowyTooltip(
         message: LocaleKeys.settings_menu_open.tr(),
         child: FlowyButton(
           onTap: () => showSettingsDialog(context, userProfile),
+          margin: EdgeInsets.zero,
           text: const FlowySvg(
             FlowySvgs.settings_s,
+            opacity: 0.7,
           ),
         ),
       ),

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart

@@ -189,7 +189,8 @@ class _Sidebar extends StatefulWidget {
 class _SidebarState extends State<_Sidebar> {
   final _scrollController = ScrollController();
   Timer? _scrollDebounce;
-  bool isScrolling = false;
+  bool _isScrolling = false;
+  final _isHovered = ValueNotifier(false);
 
   @override
   void initState() {
@@ -202,14 +203,18 @@ class _SidebarState extends State<_Sidebar> {
     _scrollDebounce?.cancel();
     _scrollController.removeListener(_onScrollChanged);
     _scrollController.dispose();
+    _isHovered.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 12);
+    const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 8);
     final userState = context.read<UserWorkspaceBloc>().state;
-    return DecoratedBox(
+    return MouseRegion(
+      onEnter: (_) => _isHovered.value = true,
+      onExit: (_) => _isHovered.value = false,
+      child: DecoratedBox(
         decoration: BoxDecoration(
           color: Theme.of(context).colorScheme.surfaceContainerHighest,
           border: Border(
@@ -220,14 +225,20 @@ class _SidebarState extends State<_Sidebar> {
           mainAxisSize: MainAxisSize.min,
           children: [
             // top menu
-          const Padding(padding: menuHorizontalInset, child: SidebarTopMenu()),
+            Padding(
+              padding: menuHorizontalInset,
+              child: SidebarTopMenu(
+                isSidebarOnHover: _isHovered,
+              ),
+            ),
             // user or workspace, setting
             Container(
               height: HomeSizes.workspaceSectionHeight,
               padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
               child:
                   // if the workspaces are empty, show the user profile instead
-                userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty
+                  userState.isCollabWorkspaceOn &&
+                          userState.workspaces.isNotEmpty
                       ? SidebarWorkspace(userProfile: widget.userProfile)
                       : SidebarUser(userProfile: widget.userProfile),
             ),
@@ -239,9 +250,18 @@ class _SidebarState extends State<_Sidebar> {
                 child: const _SidebarSearchButton(),
               ),
             ],
+            const VSpace(6.0),
             // new page button
             const SidebarNewPageButton(),
             // scrollable document list
+            const VSpace(12.0),
+            const Padding(
+              padding: EdgeInsets.symmetric(horizontal: 12.0),
+              child: Divider(
+                color: Color(0x1E1F2329),
+                height: 0.5,
+              ),
+            ),
             Expanded(
               child: Padding(
                 padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
@@ -251,30 +271,33 @@ class _SidebarState extends State<_Sidebar> {
                   physics: const ClampingScrollPhysics(),
                   child: SidebarFolder(
                     userProfile: widget.userProfile,
-                  isHoverEnabled: !isScrolling,
+                    isHoverEnabled: !_isScrolling,
                   ),
                 ),
               ),
             ),
-          const VSpace(10),
+
             // trash
-          const Padding(
+            Padding(
-            padding: menuHorizontalInset,
+              padding: menuHorizontalInset +
-            child: Divider(height: 1.0, color: Color(0x141F2329)),
+                  const EdgeInsets.symmetric(horizontal: 4.0),
+              child: const Divider(height: 1.0, color: Color(0x141F2329)),
+            ),
+            const VSpace(8),
+            Padding(
+              padding: menuHorizontalInset +
+                  const EdgeInsets.symmetric(horizontal: 4.0),
+              child: const SidebarFooter(),
             ),
             const VSpace(14),
-          const Padding(
-            padding: menuHorizontalInset,
-            child: SidebarFooter(),
-          ),
-          const VSpace(10),
           ],
         ),
+      ),
     );
   }
 
   void _onScrollChanged() {
-    setState(() => isScrolling = true);
+    setState(() => _isScrolling = true);
 
     _scrollDebounce?.cancel();
     _scrollDebounce =
@@ -283,7 +306,7 @@ class _SidebarState extends State<_Sidebar> {
 
   void _setScrollStopped() {
     if (mounted) {
-      setState(() => isScrolling = false);
+      setState(() => _isScrolling = false);
     }
   }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart

@@ -15,13 +15,17 @@ class WorkspaceIcon extends StatefulWidget {
     required this.iconSize,
     required this.fontSize,
     required this.onSelected,
+    this.borderRadius = 4,
+    this.emojiSize,
   });
 
   final UserWorkspacePB workspace;
   final double iconSize;
   final bool enableEdit;
   final double fontSize;
+  final double? emojiSize;
   final void Function(EmojiPickerResult) onSelected;
+  final double borderRadius;
 
   @override
   State<WorkspaceIcon> createState() => _WorkspaceIconState();
@@ -38,18 +42,22 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
             alignment: Alignment.center,
             child: FlowyText.emoji(
               widget.workspace.icon,
-              fontSize: widget.iconSize,
+              fontSize: widget.emojiSize ?? widget.iconSize,
             ),
           )
         : Container(
             alignment: Alignment.center,
             width: widget.iconSize,
-            height: min(widget.iconSize, 26),
+            height: min(widget.iconSize, 24),
             decoration: BoxDecoration(
               color: ColorGenerator(widget.workspace.name).toColor(),
-              borderRadius: BorderRadius.circular(4),
+              borderRadius: BorderRadius.circular(widget.borderRadius),
+              border: Border.all(
+                color: const Color(0xa1717171),
+                width: 0.5,
               ),
-            child: FlowyText(
+            ),
+            child: FlowyText.semibold(
               widget.workspace.name.isEmpty
                   ? ''
                   : widget.workspace.name.substring(0, 1),

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart

@@ -1,4 +1,3 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
@@ -49,7 +48,9 @@ class _SidebarWorkspaceState extends State<SidebarWorkspace> {
               ),
             ),
             UserSettingButton(userProfile: widget.userProfile),
+            const HSpace(8.0),
             const NotificationButton(),
+            const HSpace(10.0),
           ],
         );
       },
@@ -203,12 +204,14 @@ class _SidebarSwitchWorkspaceButtonState
           height: 30,
           child: Row(
             children: [
-              const HSpace(6.0),
+              const HSpace(4.0),
               WorkspaceIcon(
                 workspace: widget.currentWorkspace,
-                iconSize: 16,
+                iconSize: 24,
-                fontSize: 10,
+                fontSize: 16,
+                emojiSize: 18,
                 enableEdit: false,
+                borderRadius: 8.0,
                 onSelected: (result) => context.read<UserWorkspaceBloc>().add(
                       UserWorkspaceEvent.updateWorkspaceIcon(
                         widget.currentWorkspace.workspaceId,
@@ -216,23 +219,16 @@ class _SidebarSwitchWorkspaceButtonState
                       ),
                     ),
               ),
-              const HSpace(10),
+              const HSpace(8),
               Flexible(
                 child: FlowyText.medium(
                   widget.currentWorkspace.name,
                   overflow: TextOverflow.ellipsis,
                   withTooltip: true,
+                  fontSize: 15.0,
                 ),
               ),
               const HSpace(4),
-              ValueListenableBuilder(
-                valueListenable: _isWorkSpaceMenuExpanded,
-                builder: (context, value, _) => FlowySvg(
-                  value
-                      ? FlowySvgs.workspace_drop_down_menu_hide_s
-                      : FlowySvgs.workspace_drop_down_menu_show_s,
-                ),
-              ),
             ],
           ),
         ),

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart

@@ -50,10 +50,12 @@ class ViewAddButton extends StatelessWidget {
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.bottomWithLeftAligned,
       actions: _actions,
-      offset: const Offset(0, 4),
+      offset: const Offset(0, 8),
+      constraints: const BoxConstraints(
+        minWidth: 200,
+      ),
       buildChild: (popover) {
         return FlowyIconButton(
-          hoverColor: Colors.transparent,
           width: 24,
           icon: const FlowySvg(FlowySvgs.view_item_add_s),
           onPressed: () {
@@ -122,7 +124,7 @@ class ViewImportActionWrapper extends ActionCell {
   final DocumentPluginBuilder pluginBuilder;
 
   @override
-  Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.import_s);
+  Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.icon_import_s);
 
   @override
   String get name => LocaleKeys.moreAction_import.tr();

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart

@@ -422,20 +422,19 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
 
   Widget _buildViewItem(bool onHover, [bool isSelected = false]) {
     final children = [
+      const HSpace(2),
       // expand icon or placeholder
       widget.leftIconBuilder?.call(context, widget.view) ?? _buildLeftIcon(),
+      const HSpace(2),
       // icon
       _buildViewIconButton(),
       const HSpace(6),
-      // const SizedBox(
-      //   width: 6.0,
-      //   height: 1,
-      // ),
       // title
       Expanded(
         child: FlowyText.regular(
           widget.view.name,
           overflow: TextOverflow.ellipsis,
+          lineHeight: 1.1,
         ),
       ),
     ];
@@ -447,10 +446,10 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
       } else {
         // ··· more action button
         children.add(_buildViewMoreActionButton(context));
-        children.add(const HSpace(8.0));
         // only support add button for document layout
         if (widget.view.layout == ViewLayoutPB.Document) {
           // + button
+          children.add(const HSpace(8.0));
           children.add(_buildViewAddButton(context));
         }
         children.add(const HSpace(4.0));
@@ -500,8 +499,9 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
         ? FlowyText.emoji(
             widget.view.icon.value,
             fontSize: 16.0,
+            lineHeight: 1.4,
           )
-        : widget.view.defaultIcon();
+        : Opacity(opacity: 0.6, child: widget.view.defaultIcon());
 
     return AppFlowyPopover(
       offset: const Offset(20, 0),
@@ -545,7 +545,8 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
       return HSpace(widget.leftPadding);
     }
 
-    final child = GestureDetector(
+    final child = FlowyHover(
+      child: GestureDetector(
         child: FlowySvg(
           widget.isExpanded
               ? FlowySvgs.view_item_expand_s
@@ -555,6 +556,7 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
         onTap: () => context
             .read<ViewBloc>()
             .add(ViewEvent.setIsExpanded(!widget.isExpanded)),
+      ),
     );
 
     if (widget.isHovered != null) {

frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart

@@ -91,16 +91,19 @@ class FlowyNavigation extends StatelessWidget {
               turns: const AlwaysStoppedAnimation(180 / 360),
               child: FlowyTooltip(
                 richMessage: textSpan,
-                child: FlowyIconButton(
+                child: Listener(
-                  width: 24,
+                  onPointerDown: (event) => context
-                  onPressed: () => context
                       .read<HomeSettingBloc>()
                       .add(const HomeSettingEvent.collapseMenu()),
-                  iconPadding: const EdgeInsets.all(2),
+                  child: FlowyIconButton(
+                    width: 24,
+                    onPressed: () {},
+                    iconPadding: const EdgeInsets.all(4),
                     icon: const FlowySvg(FlowySvgs.hide_menu_s),
                   ),
                 ),
               ),
+            ),
           );
         }
 

frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart

@@ -4,7 +4,6 @@ import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/settings/notifications/notification_settings_cubit.dart';
-import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/notifications/notification_dialog.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -43,9 +42,10 @@ class NotificationButton extends StatelessWidget {
                       popupBuilder: (_) =>
                           NotificationDialog(views: views, mutex: mutex),
                       child: SizedBox.square(
-                        dimension: HomeSizes.workspaceSectionHeight,
+                        dimension: 24.0,
                         child: FlowyButton(
                           useIntrinsicWidth: true,
+                          margin: EdgeInsets.zero,
                           text:
                               _buildNotificationIcon(context, state.hasUnreads),
                         ),
@@ -62,8 +62,11 @@ class NotificationButton extends StatelessWidget {
   Widget _buildNotificationIcon(BuildContext context, bool hasUnreads) {
     return Stack(
       children: [
-        const FlowySvg(
+        const Center(
+          child: FlowySvg(
             FlowySvgs.notification_s,
+            opacity: 0.7,
+          ),
         ),
         if (hasUnreads)
           Positioned(

frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart

@@ -33,8 +33,9 @@ class ViewFavoriteButton extends StatelessWidget {
               child: Padding(
                 padding: const EdgeInsets.all(6),
                 child: FlowySvg(
-                  isFavorite ? FlowySvgs.unfavorite_s : FlowySvgs.favorite_s,
+                  isFavorite ? FlowySvgs.favorited_s : FlowySvgs.favorite_s,
                   size: const Size.square(18),
+                  blendMode: null,
                 ),
               ),
             ),

frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart

@@ -2,14 +2,14 @@ import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/tasks/rust_sdk.dart';
+import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:device_info_plus/device_info_plus.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -21,9 +21,8 @@ class QuestionBubble extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const SizedBox(
+    return const SizedBox.square(
-      width: 30,
+      dimension: 36.0,
-      height: 30,
       child: BubbleActionList(),
     );
   }
@@ -61,24 +60,55 @@ class _BubbleActionListState extends State<BubbleActionList> {
     );
     actions.add(FlowyVersionDescription());
 
+    final (color, borderColor, shadowColor, iconColor) =
+        Theme.of(context).isLightMode
+            ? (
+                Colors.white,
+                const Color(0x2D454849),
+                const Color(0x14000000),
+                Colors.black,
+              )
+            : (
+                const Color(0xFF242B37),
+                const Color(0x2DFFFFFF),
+                const Color(0x14000000),
+                Colors.white,
+              );
+
     return PopoverActionList<PopoverAction>(
       direction: PopoverDirection.topWithRightAligned,
       actions: actions,
       offset: const Offset(0, -8),
       buildChild: (controller) {
-        return FlowyTextButton(
+        return FlowyTooltip(
-          '?',
+          message: LocaleKeys.questionBubble_help.tr(),
-          tooltip: LocaleKeys.questionBubble_help.tr(),
+          child: MouseRegion(
-          fontWeight: FontWeight.w600,
+            cursor: SystemMouseCursors.click,
-          fontColor: fontColor,
+            child: GestureDetector(
-          fillColor: fillColor,
+              child: Container(
-          hoverColor: Theme.of(context).colorScheme.primary,
+                padding: const EdgeInsets.all(10.0),
-          mainAxisAlignment: MainAxisAlignment.center,
+                decoration: ShapeDecoration(
-          radius: Corners.s10Border,
+                  color: color,
-          onPressed: () {
+                  shape: RoundedRectangleBorder(
-            toggle();
+                    side: BorderSide(width: 0.50, color: borderColor),
-            controller.show();
+                    borderRadius: BorderRadius.circular(18),
-          },
+                  ),
+                  shadows: [
+                    BoxShadow(
+                      color: shadowColor,
+                      blurRadius: 20,
+                      offset: const Offset(0, 8),
+                    ),
+                  ],
+                ),
+                child: FlowySvg(
+                  FlowySvgs.help_center_s,
+                  color: iconColor,
+                ),
+              ),
+              onTap: () => controller.show(),
+            ),
+          ),
         );
       },
       onClosed: toggle,

frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart

@@ -245,9 +245,10 @@ class HoverButton extends StatelessWidget {
                 HSpace(ActionListSizes.itemHPadding),
               ],
               Expanded(
-                child: FlowyText.medium(
+                child: FlowyText.regular(
                   name,
                   overflow: TextOverflow.visible,
+                  lineHeight: 1.15,
                 ),
               ),
               if (rightIcon != null) ...[

frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart

@@ -33,6 +33,7 @@ class ViewTitleBar extends StatelessWidget {
             return const SizedBox.shrink();
           }
           return SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
             child: SizedBox(
               height: 24,
               child: Row(children: _buildViewTitles(context, ancestors)),
@@ -165,11 +166,14 @@ class _ViewTitleState extends State<_ViewTitle> {
   Widget _buildUnEditableViewTitle(BuildContext context, ViewTitleState state) {
     return Listener(
       onPointerDown: (_) => context.read<TabsBloc>().openPlugin(widget.view),
+      child: SizedBox(
+        height: 32.0,
         child: FlowyButton(
           useIntrinsicWidth: true,
           margin: const EdgeInsets.symmetric(horizontal: 6.0),
           onTap: () {},
-        text: _buildIconAndName(state),
+          text: _buildIconAndName(state, false),
+        ),
       ),
     );
   }
@@ -194,15 +198,18 @@ class _ViewTitleState extends State<_ViewTitle> {
           emoji: state.icon,
         );
       },
+      child: SizedBox(
+        height: 32.0,
         child: FlowyButton(
           useIntrinsicWidth: true,
           margin: const EdgeInsets.symmetric(horizontal: 6.0),
-        text: _buildIconAndName(state),
+          text: _buildIconAndName(state, true),
+        ),
       ),
     );
   }
 
-  Widget _buildIconAndName(ViewTitleState state) {
+  Widget _buildIconAndName(ViewTitleState state, bool isEditable) {
     return SingleChildScrollView(
       child: Row(
         children: [
@@ -211,10 +218,10 @@ class _ViewTitleState extends State<_ViewTitle> {
               state.icon,
               fontSize: 14.0,
             ),
-            const HSpace(6.0),
+            const HSpace(4.0),
           ],
-          ConstrainedBox(
+          Opacity(
-            constraints: const BoxConstraints(),
+            opacity: isEditable ? 1.0 : 0.5,
             child: FlowyText.regular(
               state.name,
               overflow: TextOverflow.ellipsis,

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart

@@ -6,19 +6,19 @@ const _white = Color(0xFFFFFFFF);
 const _lightHover = Color(0xFFe0f8FF);
 const _lightSelector = Color(0xFFf2fcFF);
 const _lightBg1 = Color(0xFFf7f8fc);
-const _lightBg2 = Color(0xFFedeef2);
+const _lightBg2 = Color(0x0F1F2329);
 const _lightShader1 = Color(0xFF333333);
 const _lightShader3 = Color(0xFF828282);
 const _lightShader5 = Color(0xFFe0e0e0);
 const _lightShader6 = Color(0xFFf2f2f2);
 const _lightMain1 = Color(0xFF00bcf0);
 const _lightTint9 = Color(0xFFe1fbFF);
-const _darkShader1 = Color(0xE5FFFFFF);
+const _darkShader1 = Color(0xFF131720);
 const _darkShader2 = Color(0xFF1A202C);
 const _darkShader3 = Color(0xFF363D49);
 const _darkShader5 = Color(0xFFBBC3CD);
 const _darkShader6 = Color(0xFFF2F2F2);
-const _darkMain1 = Color(0x19FFFFFF);
+const _darkMain1 = Color(0xFF00BCF0);
 const _darkMain2 = Color(0xFF00BCF0);
 const _darkInput = Color(0xFF282E3A);
 

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

@@ -166,7 +166,6 @@ class FlowyText extends StatelessWidget {
         text,
         maxLines: maxLines,
         textAlign: textAlign,
-        strutStyle: strutStyle,
         style: textStyle,
       );
     } else {

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart

@@ -25,6 +25,7 @@ class FlowyTooltip extends StatelessWidget {
     final isLightMode = Theme.of(context).brightness == Brightness.light;
     return Tooltip(
       margin: margin,
+      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
       decoration: BoxDecoration(
         color: isLightMode ? const Color(0xE5171717) : const Color(0xE5E5E5E5),
         borderRadius: BorderRadius.circular(8.0),

frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart

@@ -23,6 +23,7 @@ class FlowySvg extends StatelessWidget {
     this.size,
     this.color,
     this.blendMode = BlendMode.srcIn,
+    this.opacity = 1.0,
   });
 
   /// The data for the flowy svg. Will be generated by the generator in this
@@ -46,11 +47,16 @@ class FlowySvg extends StatelessWidget {
   /// svg widget.
   final BlendMode? blendMode;
 
+  /// The opacity of the svg
+  ///
+  /// The default value is 1.0
+  final double opacity;
+
   @override
   Widget build(BuildContext context) {
-    final iconColor = color ?? Theme.of(context).iconTheme.color;
+    final iconColor =
+        (color ?? Theme.of(context).iconTheme.color)?.withOpacity(opacity);
     final textScaleFactor = MediaQuery.textScalerOf(context).scale(1);
-
     return Transform.scale(
       scale: textScaleFactor,
       child: SizedBox(

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

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2967 2.63248L11.6167 5.27248C11.7967 5.63998 12.2767 5.99248 12.6817 6.05998L15.0742 6.45748C16.6042 6.71248 16.9642 7.82248 15.8617 8.91748L14.0017 10.7775C13.6867 11.0925 13.5142 11.7 13.6117 12.135L14.1442 14.4375C14.5642 16.26 13.5967 16.965 11.9842 16.0125L9.7417 14.685C9.3367 14.445 8.6692 14.445 8.2567 14.685L6.0142 16.0125C4.4092 16.965 3.4342 16.2525 3.8542 14.4375L4.3867 12.135C4.4842 11.7 4.3117 11.0925 3.9967 10.7775L2.1367 8.91748C1.0417 7.82248 1.3942 6.71248 2.9242 6.45748L5.3167 6.05998C5.7142 5.99248 6.1942 5.63998 6.3742 5.27248L7.6942 2.63248C8.4142 1.19998 9.5842 1.19998 10.2967 2.63248Z" fill="#FFBA00"/>
+</svg>

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

@@ -0,0 +1,11 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_859_40861)">
+<path d="M8.00207 15.9668C3.84348 15.9668 0.472656 12.596 0.472656 8.43737C0.472656 4.27878 3.84348 0.907959 8.00207 0.907959C12.1607 0.907959 15.5315 4.27878 15.5315 8.43737C15.5315 12.596 12.1607 15.9668 8.00207 15.9668ZM8.00207 15.0256C11.6407 15.0256 14.5903 12.076 14.5903 8.43737C14.5903 4.79878 11.6407 1.84914 8.00207 1.84914C4.36348 1.84914 1.41383 4.79878 1.41383 8.43737C1.41383 12.076 4.36348 15.0256 8.00207 15.0256Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
+<path d="M7.96863 12.6016C7.78728 12.6016 7.61337 12.5295 7.48513 12.4013C7.3569 12.2731 7.28486 12.0992 7.28486 11.9178C7.28486 11.7365 7.3569 11.5626 7.48513 11.4343C7.61337 11.3061 7.78728 11.2341 7.96863 11.2341C8.14997 11.2341 8.32389 11.3061 8.45212 11.4343C8.58035 11.5626 8.65239 11.7365 8.65239 11.9178C8.65239 12.0992 8.58035 12.2731 8.45212 12.4013C8.32389 12.5295 8.14997 12.6016 7.96863 12.6016ZM6.12016 7.2157C6.05257 7.21522 5.98585 7.20044 5.92438 7.17233C5.86292 7.14423 5.80809 7.10344 5.76351 7.05263C5.71893 7.00183 5.68561 6.94217 5.66572 6.87757C5.64584 6.81297 5.63986 6.7449 5.64816 6.67782C5.67922 6.41194 5.72863 6.19453 5.79639 6.02559C5.91127 5.74558 6.08998 5.49629 6.31828 5.29759C6.55006 5.08809 6.82166 4.92741 7.11686 4.82512C7.41609 4.72254 7.73043 4.671 8.04675 4.67265C8.70557 4.67265 9.25381 4.86653 9.69239 5.25476C10.131 5.64159 10.3507 6.15829 10.3507 6.803C10.3507 7.09288 10.2943 7.35547 10.1813 7.59076C10.0693 7.82653 9.83028 8.12017 9.46463 8.47123C9.09804 8.82276 8.85616 9.07265 8.73616 9.22135C8.61183 9.3793 8.51973 9.56014 8.4651 9.75359C8.43216 9.86229 8.40863 9.99076 8.39592 10.1385C8.37334 10.3879 8.17286 10.5856 7.92251 10.5856C7.85592 10.5852 7.79014 10.5709 7.72937 10.5436C7.66861 10.5164 7.6142 10.4768 7.5696 10.4273C7.52501 10.3778 7.49122 10.3196 7.47039 10.2564C7.44956 10.1931 7.44215 10.1262 7.44863 10.0599C7.4651 9.88865 7.49004 9.73947 7.52486 9.61241C7.58933 9.37006 7.68722 9.15829 7.81804 8.97712C7.94839 8.79547 8.18369 8.52912 8.52392 8.17759C8.86463 7.82653 9.08392 7.57053 9.18275 7.41194C9.27969 7.25241 9.38181 6.99312 9.38181 6.67782C9.38181 6.36253 9.21569 6.10606 8.99216 5.86323C8.76722 5.62041 8.4411 5.49853 8.01333 5.49853C7.17851 5.49853 6.7051 5.92817 6.59404 6.78747C6.56251 7.02935 6.3658 7.2157 6.12204 7.2157H6.12016Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
+</g>
+<defs>
+<clipPath id="clip0_859_40861">
+<rect width="16" height="16" fill="white" transform="translate(0 0.4375)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.89999 13.8666L5.89999 3.36531L5.89999 2.1333H3.59999C2.49542 2.1333 1.59999 3.02874 1.59999 4.1333L1.59999 11.8666C1.59999 12.9712 2.49542 13.8666 3.59999 13.8666H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.89999 2.1333V12.6346V13.8666H10.2V12.6346V2.1333H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2 2.1333V12.6346V13.8666H12.5C13.6046 13.8666 14.5 12.9712 14.5 11.8666V4.1333C14.5 3.02873 13.6046 2.1333 12.5 2.1333H10.2Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5522 1.33329C11.5522 1.02954 11.3059 0.783295 11.0022 0.783295C10.6984 0.783295 10.4522 1.02954 10.4522 1.33329V2.01127H5.75V1.33341C5.75 1.02965 5.50376 0.783409 5.2 0.783409C4.89624 0.783409 4.65 1.02965 4.65 1.33341V2.01127H3.66667C2.19391 2.01127 1 3.20518 1 4.67794V12C1 13.4727 2.19391 14.6666 3.66667 14.6666H12.3333C13.8061 14.6666 15 13.4727 15 12V4.67794C15 3.20518 13.8061 2.01127 12.3333 2.01127H11.5522V1.33329ZM10.4522 3.11127V3.48019C10.4522 3.78394 10.6984 4.03019 11.0022 4.03019C11.3059 4.03019 11.5522 3.78394 11.5522 3.48019V3.11127H12.3333C13.1986 3.11127 13.9 3.81269 13.9 4.67794V5.85763H2.1V4.67794C2.1 3.81269 2.80142 3.11127 3.66667 3.11127H4.65V3.4803C4.65 3.78406 4.89624 4.0303 5.2 4.0303C5.50376 4.0303 5.75 3.78406 5.75 3.4803V3.11127H10.4522ZM2.1 6.95763V12C2.1 12.8652 2.80142 13.5666 3.66667 13.5666H12.3333C13.1986 13.5666 13.9 12.8652 13.9 12V6.95763H2.1Z" fill="#171717"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9024 6.7V10.2122C13.9024 13.6321 13.0245 15 10.0489 15H5.84803C2.87244 15 2 13.6321 2 10.2122V6.10841C2 2.68856 3.19024 1.32062 6.16583 1.32062H8.78861" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8503 6.6332C13.9081 6.69759 13.8624 6.8 13.7759 6.8H11.419C9.63363 6.8 8.79428 6.02268 8.79428 3.95962V1.52225C8.79428 1.33882 9.0206 1.25215 9.14312 1.38866L13.8503 6.6332Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 2.6H12.8C13.4075 2.6 13.9 3.09249 13.9 3.7V5.31699H6.75V2.6ZM6.75 6.41699H13.9V9.58256H6.75V6.41699ZM5.65 9.58256V6.41699H2.1V9.58256H5.65ZM2.1 10.6826H5.65V13.4H3.2C2.59249 13.4 2.1 12.9075 2.1 12.3V10.6826ZM6.75 10.6826H13.9V12.3C13.9 12.9075 13.4075 13.4 12.8 13.4H6.75V10.6826ZM5.65 2.6V5.31699H2.1V3.7C2.1 3.09249 2.59249 2.6 3.2 2.6H5.65ZM1 3.7C1 2.48497 1.98497 1.5 3.2 1.5H12.8C14.015 1.5 15 2.48497 15 3.7V12.3C15 13.515 14.015 14.5 12.8 14.5H3.2C1.98497 14.5 1 13.515 1 12.3V3.7Z" fill="#171717"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2701 5.93359C13.9185 6.14536 15 7.40916 15 10.1758V10.2646C15 13.3182 13.6831 14.5411 10.3946 14.5411H5.60536C2.31687 14.5411 1 13.3182 1 10.2646V10.1758C1 7.42965 2.06674 6.16586 4.67105 5.94043" stroke="#171717" stroke-width="1.0247" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 1.33334V9.92001" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2323 8.43359L7.99896 10.6669L5.76562 8.43359" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -1,8 +1,3 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1_598_58130" maskUnits="userSpaceOnUse" x="1.33203" y="3" width="8" height="5" fill="black">
+<path d="M5.25 9.5L8.67929 6.07071C8.71834 6.03166 8.71834 5.96834 8.67929 5.92929L5.25 2.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
-<rect fill="white" x="1.33203" y="3" width="8" height="5"/>
-<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z"/>
-</mask>
-<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z" fill="#171717"/>
-<path d="M7.62074 7.62796L7.67966 7.56904L7.62074 7.62796ZM8.20999 7.62796L8.15107 7.56904H8.15107L8.20999 7.62796ZM4.9987 5.00592L4.93977 4.947C4.9554 4.93137 4.9766 4.92259 4.9987 4.92259C5.0208 4.92259 5.042 4.93137 5.05762 4.947L4.9987 5.00592ZM2.37666 7.62796L2.31773 7.56904L2.37666 7.62796ZM1.7874 7.62796L1.84633 7.56904L1.7874 7.62796ZM1.7874 7.03871L1.84633 7.09763L1.7874 7.03871ZM4.70407 4.12204L4.64514 4.06311V4.06311L4.70407 4.12204ZM5.29333 4.12204L5.2344 4.18096L5.2344 4.18096L5.29333 4.12204ZM8.20999 7.03871L8.26892 6.97978L8.20999 7.03871ZM7.67966 7.56904C7.80984 7.69921 8.02089 7.69921 8.15107 7.56904L8.26892 7.68689C8.07366 7.88215 7.75707 7.88215 7.56181 7.68689L7.67966 7.56904ZM5.05762 4.947L7.67966 7.56904L7.56181 7.68689L4.93977 5.06485L5.05762 4.947ZM2.31773 7.56904L4.93977 4.947L5.05762 5.06485L2.43558 7.68689L2.31773 7.56904ZM1.84633 7.56904C1.9765 7.69921 2.18756 7.69921 2.31773 7.56904L2.43558 7.68689C2.24032 7.88215 1.92374 7.88215 1.72848 7.68689L1.84633 7.56904ZM1.84633 7.09763C1.71615 7.22781 1.71615 7.43886 1.84633 7.56904L1.72848 7.68689C1.53322 7.49163 1.53322 7.17504 1.72848 6.97978L1.84633 7.09763ZM4.763 4.18096L1.84633 7.09763L1.72848 6.97978L4.64514 4.06311L4.763 4.18096ZM4.9987 4.08333C4.91029 4.08333 4.82551 4.11845 4.763 4.18096L4.64514 4.06311C4.73891 3.96935 4.86609 3.91667 4.9987 3.91667V4.08333ZM5.2344 4.18096C5.17189 4.11845 5.0871 4.08333 4.9987 4.08333V3.91667C5.13131 3.91667 5.25848 3.96935 5.35225 4.06311L5.2344 4.18096ZM8.15107 7.09763L5.2344 4.18096L5.35225 4.06311L8.26892 6.97978L8.15107 7.09763ZM8.15107 7.56904C8.28124 7.43886 8.28124 7.22781 8.15107 7.09763L8.26892 6.97978C8.46418 7.17504 8.46418 7.49163 8.26892 7.68689L8.15107 7.56904Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_598_58130)"/>
 </svg>

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

@@ -1,8 +1,3 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1_628_27017" maskUnits="userSpaceOnUse" x="0.667969" y="4" width="8" height="5" fill="black">
+<path d="M2.5 5.5L5.92929 8.92929C5.96834 8.96834 6.03166 8.96834 6.07071 8.92929L9.5 5.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
-<rect fill="white" x="0.667969" y="4" width="8" height="5"/>
-<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z"/>
-</mask>
-<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z" fill="#171717"/>
-<path d="M2.37926 4.37204L2.32034 4.43096L2.37926 4.37204ZM1.79001 4.37204L1.84893 4.43096H1.84893L1.79001 4.37204ZM5.0013 6.99408L5.06023 7.053C5.0446 7.06863 5.0234 7.07741 5.0013 7.07741C4.9792 7.07741 4.958 7.06863 4.94238 7.053L5.0013 6.99408ZM7.62334 4.37204L7.68227 4.43096L7.62334 4.37204ZM8.2126 4.37204L8.15367 4.43096L8.2126 4.37204ZM8.2126 4.96129L8.15367 4.90237L8.2126 4.96129ZM5.29593 7.87796L5.35486 7.93689V7.93689L5.29593 7.87796ZM4.70667 7.87796L4.7656 7.81904L4.7656 7.81904L4.70667 7.87796ZM1.79001 4.96129L1.73108 5.02022L1.79001 4.96129ZM2.32034 4.43096C2.19016 4.30079 1.97911 4.30079 1.84893 4.43096L1.73108 4.31311C1.92634 4.11785 2.24293 4.11785 2.43819 4.31311L2.32034 4.43096ZM4.94238 7.053L2.32034 4.43096L2.43819 4.31311L5.06023 6.93515L4.94238 7.053ZM7.68227 4.43096L5.06023 7.053L4.94238 6.93515L7.56442 4.31311L7.68227 4.43096ZM8.15367 4.43096C8.0235 4.30079 7.81244 4.30079 7.68227 4.43096L7.56442 4.31311C7.75968 4.11785 8.07626 4.11785 8.27152 4.31311L8.15367 4.43096ZM8.15367 4.90237C8.28385 4.77219 8.28385 4.56114 8.15367 4.43096L8.27152 4.31311C8.46678 4.50837 8.46678 4.82496 8.27152 5.02022L8.15367 4.90237ZM5.237 7.81904L8.15367 4.90237L8.27152 5.02022L5.35486 7.93689L5.237 7.81904ZM5.0013 7.91667C5.08971 7.91667 5.17449 7.88155 5.237 7.81904L5.35486 7.93689C5.26109 8.03065 5.13391 8.08333 5.0013 8.08333V7.91667ZM4.7656 7.81904C4.82811 7.88155 4.9129 7.91667 5.0013 7.91667V8.08333C4.86869 8.08333 4.74152 8.03065 4.64775 7.93689L4.7656 7.81904ZM1.84893 4.90237L4.7656 7.81904L4.64775 7.93689L1.73108 5.02022L1.84893 4.90237ZM1.84893 4.43096C1.71876 4.56114 1.71876 4.77219 1.84893 4.90237L1.73108 5.02022C1.53582 4.82496 1.53582 4.50837 1.73108 4.31311L1.84893 4.43096Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_628_27017)"/>
 </svg>

frontend/resources/flowy_icons/24x/favorite_header_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2967 5.63248L14.6167 8.27248C14.7967 8.63998 15.2767 8.99248 15.6817 9.05998L18.0742 9.45748C19.6042 9.71248 19.9642 10.8225 18.8617 11.9175L17.0017 13.7775C16.6867 14.0925 16.5142 14.7 16.6117 15.135L17.1442 17.4375C17.5642 19.26 16.5967 19.965 14.9842 19.0125L12.7417 17.685C12.3367 17.445 11.6692 17.445 11.2567 17.685L9.0142 19.0125C7.4092 19.965 6.4342 19.2525 6.8542 17.4375L7.3867 15.135C7.4842 14.7 7.3117 14.0925 6.9967 13.7775L5.1367 11.9175C4.0417 10.8225 4.3942 9.71248 5.9242 9.45748L8.3167 9.05998C8.7142 8.99248 9.1942 8.63998 9.3742 8.27248L10.6942 5.63248C11.4142 4.19998 12.5842 4.19998 13.2967 5.63248Z" fill="#FFBA00"/>
+</svg>

frontend/resources/flowy_icons/24x/new_app.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.75" y="3.75" width="16.5" height="16.5" rx="8.25" fill="#00BCF0"/>
+<rect x="11.3984" y="7.5" width="1.3" height="9" rx="0.65" fill="white"/>
+<rect x="16.5" y="11.4" width="1.3" height="9" rx="0.65" transform="rotate(90 16.5 11.4)" fill="white"/>
+</svg>

frontend/resources/flowy_icons/24x/sidebar_footer_trash.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M18 8.48665C15.78 8.26665 13.5467 8.15332 11.32 8.15332C10 8.15332 8.68 8.21999 7.36 8.35332L6 8.48665" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.66797 7.81325L9.81464 6.93992C9.9213 6.30659 10.0013 5.83325 11.128 5.83325H12.8746C14.0013 5.83325 14.088 6.33325 14.188 6.94659L14.3346 7.81325" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5669 10.5933L16.1336 17.3066C16.0603 18.3533 16.0003 19.1666 14.1403 19.1666H9.86026C8.00026 19.1666 7.94026 18.3533 7.86693 17.3066L7.43359 10.5933" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.8867 15.5H13.1067" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.332 12.8333H13.6654" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>