feat: improve upgrade space toast (#5543)

* fix: divider color

* feat: improve upgrade space toast

frontend/appflowy_flutter/lib/mobile/presentation/home/favorite_folder/favorite_space.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/mobile/presentation/home/shared/empty_placeholder.dart';
 import 'package:appflowy/mobile/presentation/home/shared/mobile_view_card.dart';
+import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart';
 import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
 import 'package:appflowy/workspace/application/user/prelude.dart';
@@ -92,6 +93,9 @@ class _FavoriteViews extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final borderColor = Theme.of(context).isLightMode
+        ? const Color(0xFFE9E9EC)
+        : const Color(0x1AFFFFFF);
     return Scrollbar(
       child: ListView.separated(
         key: const PageStorageKey('favorite_views_page_storage_key'),
@@ -108,7 +112,7 @@ class _FavoriteViews extends StatelessWidget {
             decoration: BoxDecoration(
               border: Border(
                 bottom: BorderSide(
-                  color: Theme.of(context).dividerColor,
+                  color: borderColor,
                   width: 0.5,
                 ),
               ),

frontend/appflowy_flutter/lib/mobile/presentation/home/recent_folder/recent_space.dart

@@ -65,7 +65,7 @@ class _RecentViews extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final borderColor = Theme.of(context).isLightMode
-        ? const Color(0x00e2e2e4)
+        ? const Color(0xFFE9E9EC)
         : const Color(0x1AFFFFFF);
     return SlidableAutoCloseBehavior(
       child: Scrollbar(

frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart

@@ -52,15 +52,15 @@ class MobileBottomNavigationBar extends StatelessWidget {
     final isLightMode = Theme.of(context).isLightMode;
     final backgroundColor = isLightMode
         ? Colors.white.withOpacity(0.95)
-        : const Color(0x0023262b).withOpacity(0.95);
+        : const Color(0xFF23262B).withOpacity(0.95);
     return Scaffold(
       body: navigationShell,
       extendBody: true,
       bottomNavigationBar: ClipRRect(
         child: BackdropFilter(
           filter: ImageFilter.blur(
-            sigmaX: 2,
+            sigmaX: 3,
-            sigmaY: 2,
+            sigmaY: 3,
           ),
           child: DecoratedBox(
             decoration: BoxDecoration(

frontend/appflowy_flutter/lib/workspace/application/sidebar/space/space_bloc.dart

@@ -82,7 +82,7 @@ class SpaceBloc extends Bloc<SpaceEvent, SpaceState> {
             );
 
             if (shouldShowUpgradeDialog) {
-              add(const SpaceEvent.migrate());
+              // add(const SpaceEvent.migrate());
             }
           },
           create: (name, icon, iconColor, permission) async {

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

@@ -23,6 +23,7 @@ import 'package:appflowy/workspace/presentation/home/menu/sidebar/header/sidebar
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_migration.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/workspace.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart'
@@ -304,8 +305,6 @@ class _SidebarState extends State<_Sidebar> {
 
             _renderFolderOrSpace(menuHorizontalInset),
 
-            _renderUpgradeSpaceButton(menuHorizontalInset),
-
             // trash
             Padding(
               padding: menuHorizontalInset +
@@ -313,6 +312,8 @@ class _SidebarState extends State<_Sidebar> {
               child: const Divider(height: 0.5, color: Color(0x141F2329)),
             ),
             const VSpace(8),
+            _renderUpgradeSpaceButton(menuHorizontalInset),
+            const VSpace(8),
             Padding(
               padding: menuHorizontalInset +
                   const EdgeInsets.symmetric(horizontal: 4.0),
@@ -368,24 +369,14 @@ class _SidebarState extends State<_Sidebar> {
     return !spaceState.shouldShowUpgradeDialog ||
             !workspaceState.isCollabWorkspaceOn
         ? const SizedBox.shrink()
-        : Container(
+        : Padding(
-            height: 40,
+            padding: menuHorizontalInset +
-            padding: menuHorizontalInset,
+                const EdgeInsets.only(
-            child: FlowyButton(
+                  left: 4.0,
-              onTap: () {
+                  right: 4.0,
-                context.read<SpaceBloc>().add(const SpaceEvent.migrate());
+                  top: 8.0,
-              },
+                ),
-              leftIcon: const Icon(
+            child: const SpaceMigration(),
-                Icons.upgrade_rounded,
-                color: Colors.red,
-              ),
-              leftIconSize: const Size.square(20),
-              iconPadding: 12.0,
-              text: FlowyText.regular(
-                LocaleKeys.space_enableSpacesForYourWorkspace.tr(),
-                overflow: TextOverflow.ellipsis,
-              ),
-            ),
           );
   }
 

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

@@ -0,0 +1,169 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.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 SpaceMigration extends StatefulWidget {
+  const SpaceMigration({super.key});
+
+  @override
+  State<SpaceMigration> createState() => _SpaceMigrationState();
+}
+
+class _SpaceMigrationState extends State<SpaceMigration> {
+  bool _isExpanded = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(12),
+      clipBehavior: Clip.antiAlias,
+      decoration: ShapeDecoration(
+        color: const Color(0x66F5EAFF),
+        shape: RoundedRectangleBorder(
+          side: const BorderSide(
+            strokeAlign: BorderSide.strokeAlignOutside,
+            color: Color(0x339327FF),
+          ),
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+      child: _isExpanded
+          ? _buildExpandedMigrationContent()
+          : _buildCollapsedMigrationContent(),
+    );
+  }
+
+  Widget _buildExpandedMigrationContent() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _MigrationTitle(
+          onClose: () => setState(() => _isExpanded = false),
+        ),
+        const VSpace(6.0),
+        Opacity(
+          opacity: 0.7,
+          child: FlowyText.regular(
+            LocaleKeys.space_upgradeSpaceDescription.tr(),
+            maxLines: null,
+            fontSize: 13.0,
+            lineHeight: 1.3,
+          ),
+        ),
+        const VSpace(12.0),
+        _ExpandedUpgradeButton(
+          onUpgrade: () =>
+              context.read<SpaceBloc>().add(const SpaceEvent.migrate()),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildCollapsedMigrationContent() {
+    const linearGradient = LinearGradient(
+      begin: Alignment.bottomLeft,
+      end: Alignment.bottomRight,
+      colors: [
+        Color(0xFF8032FF),
+        Color(0xFFEF35FF),
+      ],
+      stops: [
+        0.1545,
+        0.8225,
+      ],
+    );
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: () => setState(() => _isExpanded = true),
+      child: Row(
+        children: [
+          const FlowySvg(
+            FlowySvgs.upgrade_s,
+            blendMode: null,
+          ),
+          const HSpace(8.0),
+          Expanded(
+            child: ShaderMask(
+              shaderCallback: (Rect bounds) =>
+                  linearGradient.createShader(bounds),
+              blendMode: BlendMode.srcIn,
+              child: FlowyText(
+                LocaleKeys.space_upgradeYourSpace.tr(),
+              ),
+            ),
+          ),
+          const FlowySvg(
+            FlowySvgs.space_arrow_right_s,
+            blendMode: null,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _MigrationTitle extends StatelessWidget {
+  const _MigrationTitle({required this.onClose});
+
+  final VoidCallback? onClose;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const FlowySvg(
+          FlowySvgs.upgrade_s,
+          blendMode: null,
+        ),
+        const HSpace(8.0),
+        Expanded(
+          child: FlowyText(
+            LocaleKeys.space_upgradeSpaceTitle.tr(),
+            maxLines: 3,
+            lineHeight: 1.2,
+          ),
+        ),
+        GestureDetector(
+          onTap: onClose,
+          child: const Padding(
+            padding: EdgeInsets.only(top: 3.0),
+            child: FlowySvg(FlowySvgs.upgrade_close_s),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ExpandedUpgradeButton extends StatelessWidget {
+  const _ExpandedUpgradeButton({required this.onUpgrade});
+
+  final VoidCallback? onUpgrade;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: onUpgrade,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
+        decoration: ShapeDecoration(
+          color: const Color(0xFFA44AFD),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
+        ),
+        child: FlowyText(
+          LocaleKeys.space_upgrade.tr(),
+          color: Colors.white,
+          fontSize: 12.0,
+          strutStyle: const StrutStyle(forceStrutHeight: true),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.25 11.4375L9.1875 7.5L5.25 3.5625" stroke="#EF36FF" stroke-width="1.05" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,14 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_976_49073)">
+<path d="M9.91623 15.7344L9.73114 15.955L7.60354 13.2904C6.97459 13.7044 5.9561 13.571 5.18287 12.9222C4.40883 12.2727 4.10131 11.2921 4.41484 10.5829L1.45567 8.94727L1.64075 8.7267C2.69183 7.47407 3.79922 6.8651 5.22414 6.77362C7.94561 2.9683 11.4489 2.0479 13.8059 2.45559L13.9445 2.47891L13.9907 2.61062C14.8023 4.86171 14.4847 8.45521 11.2286 11.8133C11.4055 13.2489 10.998 14.4452 9.91623 15.7344ZM10.3028 8.4636C11.1522 8.42323 11.8226 7.69864 11.7829 6.84839C11.7425 5.99896 11.0195 5.32841 10.1692 5.3681C9.31977 5.40848 8.64867 6.13388 8.68905 6.98332C8.72875 7.83357 9.45333 8.50398 10.3028 8.4636ZM4.76008 14.641C4.31206 15.1749 3.02602 15.5092 3.02602 15.5092C3.02602 15.5092 3.17912 14.13 3.58071 13.6514C3.92082 13.2461 4.45599 13.1306 4.78807 13.4093C5.12015 13.6879 5.10019 14.2357 4.76008 14.641Z" fill="url(#paint0_linear_976_49073)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_976_49073" x1="1.47153" y1="12.1874" x2="11.756" y2="15.6845" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8032FF"/>
+<stop offset="1" stop-color="#EF35FF"/>
+</linearGradient>
+<clipPath id="clip0_976_49073">
+<rect width="17" height="17" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_close_outlined" opacity="0.8">
+<path id="Union" d="M10.9708 11.4727C11.1824 11.2612 11.1839 10.9198 10.9724 10.7082L7.26476 7.00066L10.9723 3.29309C11.1839 3.08156 11.1823 2.74012 10.9708 2.52859C10.7593 2.31706 10.4178 2.31552 10.2063 2.52706C9.99476 2.73859 6.49873 6.23462 6.49873 6.23462L2.79113 2.52703C2.5796 2.31549 2.23817 2.31703 2.02663 2.52856C1.8151 2.74009 1.81357 3.08152 2.0251 3.29306L5.7327 7.00066L2.02507 10.7083C1.81354 10.9198 1.81507 11.2612 2.02661 11.4728C2.23814 11.6843 2.57957 11.6858 2.79111 11.4743L6.49873 7.76669L10.2063 11.4743C10.4179 11.6858 10.7593 11.6843 10.9708 11.4727Z" fill="#473E69"/>
+</g>
+</svg>

frontend/resources/translations/en.json

@@ -1914,6 +1914,10 @@
     "unableToDeleteSpaceNotCreatedByYou": "Cannot delete a space created by others",
     "enableSpacesForYourWorkspace": "Enable spaces for your workspace",
     "title": "Spaces",
-    "defaultSpaceName": "General"
+    "defaultSpaceName": "General",
+    "upgradeSpaceTitle": "Enable Spaces for your workspace",
+    "upgradeSpaceDescription": "Create multiple public and private spaces to better organize your work.",
+    "upgrade": "Upgrade",
+    "upgradeYourSpace": "Upgrade your space"
   }
 }