fix: improve quick start layout (#2136)

* fix: improve quick start layout

Closes: #2105

* fix: amend padding for quick start button

frontend/appflowy_flutter/assets/translations/en.json

@@ -188,10 +188,10 @@
       "exportDatabase": "Export database",
       "selectFiles": "Select the files that need to be export",
       "createNewFolder": "Create a new folder",
-      "createNewFolderDesc": "Tell us where you want to store your data ...",
+      "createNewFolderDesc": "Tell us where you want to store your data",
       "open": "Open",
       "openFolder": "Open an existing folder",
-      "openFolderDesc": "Read and write it to your existing AppFlowy folder ...",
+      "openFolderDesc": "Read and write it to your existing AppFlowy folder",
       "folderHintText": "folder name",
       "location": "Creating a new folder",
       "locationDesc": "Pick a name for your AppFlowy data folder",
@@ -383,7 +383,6 @@
         "imageSavingFailed": "Image Saving Failed",
         "addIcon": "Add Icon"
       }
-
     }
   },
   "board": {

frontend/appflowy_flutter/lib/user/presentation/folder/folder_widget.dart

@@ -2,9 +2,7 @@ import 'dart:io';
 
 import 'package:appflowy/util/file_picker/file_picker_service.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/style_widget/text_field.dart';
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
@@ -36,10 +34,7 @@ class _FolderWidgetState extends State<FolderWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return _mapIndexToWidget(context);
-      height: 250,
-      child: _mapIndexToWidget(context),
-    );
   }
 
   Widget _mapIndexToWidget(BuildContext context) {
@@ -86,37 +81,24 @@ class FolderOptionsWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
+    return Column(
-      shrinkWrap: true,
+      children: [
-      children: <Widget>[
+        _FolderCard(
-        Card(
+          title: LocaleKeys.settings_files_createNewFolder.tr(),
-          child: ListTile(
+          subtitle: LocaleKeys.settings_files_createNewFolderDesc.tr(),
-            title: FlowyText.medium(
+          trailing: _buildTextButton(
-              LocaleKeys.settings_files_createNewFolder.tr(),
+            context,
-            ),
+            LocaleKeys.settings_files_create.tr(),
-            subtitle: FlowyText.regular(
+            onPressedCreate,
-              LocaleKeys.settings_files_createNewFolderDesc.tr(),
-            ),
-            trailing: _buildTextButton(
-              context,
-              LocaleKeys.settings_files_create.tr(),
-              onPressedCreate,
-            ),
           ),
         ),
-        Card(
+        _FolderCard(
-          child: ListTile(
+          title: LocaleKeys.settings_files_openFolder.tr(),
-            title: FlowyText.medium(
+          subtitle: LocaleKeys.settings_files_openFolderDesc.tr(),
-              LocaleKeys.settings_files_openFolder.tr(),
+          trailing: _buildTextButton(
-            ),
+            context,
-            subtitle: FlowyText.regular(
+            LocaleKeys.settings_files_open.tr(),
-              LocaleKeys.settings_files_openFolderDesc.tr(),
+            onPressedOpen,
-            ),
-            trailing: _buildTextButton(
-              context,
-              LocaleKeys.settings_files_open.tr(),
-              onPressedOpen,
-            ),
           ),
         ),
       ],
@@ -164,56 +146,55 @@ class CreateFolderWidgetState extends State<CreateFolderWidget> {
             label: const Text('Back'),
           ),
         ),
-        Card(
+        _FolderCard(
-          child: ListTile(
+          title: LocaleKeys.settings_files_location.tr(),
-            title: FlowyText.medium(
+          subtitle: LocaleKeys.settings_files_locationDesc.tr(),
-              LocaleKeys.settings_files_location.tr(),
+          trailing: SizedBox(
-            ),
+            width: 120,
-            subtitle: FlowyText.regular(
+            child: FlowyTextField(
-              LocaleKeys.settings_files_locationDesc.tr(),
+              hintText: LocaleKeys.settings_files_folderHintText.tr(),
-            ),
+              onChanged: (name) => _folderName = name,
-            trailing: SizedBox(
+              onSubmitted: (name) => setState(
-              width: 100,
+                () => _folderName = name,
-              height: 36,
-              child: FlowyTextField(
-                hintText: LocaleKeys.settings_files_folderHintText.tr(),
-                onChanged: (name) {
-                  _folderName = name;
-                },
-                onSubmitted: (name) {
-                  setState(() {
-                    _folderName = name;
-                  });
-                },
               ),
             ),
           ),
         ),
-        Card(
+        _FolderCard(
-          child: ListTile(
+          title: LocaleKeys.settings_files_folderPath.tr(),
-            title: FlowyText.medium(LocaleKeys.settings_files_folderPath.tr()),
+          subtitle: _path,
-            subtitle: FlowyText.regular(_path),
+          trailing: _buildTextButton(
-            trailing: _buildTextButton(
+            context,
-                context, LocaleKeys.settings_files_browser.tr(), () async {
+            LocaleKeys.settings_files_browser.tr(),
+            () async {
               final dir = await getIt<FilePickerService>().getDirectoryPath();
               if (dir != null) {
-                setState(() {
+                setState(() => directory = dir);
-                  directory = dir;
-                });
               }
-            }),
+            },
           ),
         ),
-        Card(
+        const VSpace(4.0),
-          child: _buildTextButton(
+        Padding(
-              context, LocaleKeys.settings_files_create.tr(), () async {
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
-            if (_path.isEmpty) {
+          child: Row(
-              _showToast(LocaleKeys.settings_files_locationCannotBeEmpty.tr());
+            children: [
-            } else {
+              _buildTextButton(
-              await getIt<SettingsLocationCubit>().setLocation(_path);
+                context,
-              await widget.onPressedCreate();
+                LocaleKeys.settings_files_create.tr(),
-            }
+                () async {
-          }),
+                  if (_path.isEmpty) {
+                    _showToast(
+                      LocaleKeys.settings_files_locationCannotBeEmpty.tr(),
+                    );
+                  } else {
+                    await getIt<SettingsLocationCubit>().setLocation(_path);
+                    await widget.onPressedCreate();
+                  }
+                },
+              ),
+            ],
+          ),
         )
       ],
     );
@@ -240,12 +221,70 @@ class CreateFolderWidgetState extends State<CreateFolderWidget> {
 
 Widget _buildTextButton(
     BuildContext context, String title, VoidCallback onPressed) {
-  return SizedBox(
+  return FlowyTextButton(
-    width: 70,
+    title,
-    height: 36,
+    onPressed: onPressed,
-    child: RoundedTextButton(
+    fillColor: Theme.of(context).colorScheme.primary,
-      title: title,
+    fontColor: Theme.of(context).colorScheme.onPrimary,
-      onPressed: onPressed,
+    hoverColor: Theme.of(context).colorScheme.primaryContainer,
-    ),
   );
 }
+
+class _FolderCard extends StatelessWidget {
+  const _FolderCard({
+    Key? key,
+    required this.title,
+    required this.subtitle,
+    this.trailing,
+  }) : super(key: key);
+
+  final String title;
+
+  final String subtitle;
+
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: 4.0,
+          horizontal: 16.0,
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  FlowyText.medium(
+                    title,
+                  ),
+                  Row(
+                    children: [
+                      Flexible(
+                        child: Text(
+                          subtitle,
+                          overflow: TextOverflow.ellipsis,
+                          style:
+                              Theme.of(context).textTheme.bodyMedium!.copyWith(
+                                    fontWeight: FontWeight.w400,
+                                  ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            if (trailing != null) ...[
+              const HSpace(40),
+              trailing!,
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/user/presentation/skip_log_in_screen.dart

@@ -1,9 +1,8 @@
+import 'package:appflowy/core/frameless_window.dart';
 import 'package:dartz/dartz.dart' as dartz;
 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/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:appflowy_backend/dispatch/dispatch.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
@@ -39,6 +38,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: const _SkipLoginMoveWindow(),
       body: Center(
         child: _renderBody(context),
       ),
@@ -54,9 +54,13 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
           logoSize: const Size.square(60),
         ),
         const VSpace(40),
-        SizedBox(
+        Row(
-          width: 250,
+          mainAxisAlignment: MainAxisAlignment.center,
-          child: GoButton(onPressed: () => _autoRegister(context)),
+          children: [
+            GoButton(
+              onPressed: () => _autoRegister(context),
+            ),
+          ],
         ),
         const VSpace(20),
         SizedBox(
@@ -72,18 +76,15 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
             },
           ),
         ),
-        const VSpace(20),
+        const Spacer(),
-        SizedBox(
+        _buildSubscribeButtons(context),
-          width: 400,
-          child: _buildSubscribeButtons(context),
-        ),
       ],
     );
   }
 
   Row _buildSubscribeButtons(BuildContext context) {
     return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      mainAxisAlignment: MainAxisAlignment.center,
       children: [
         FlowyTextButton(
           LocaleKeys.githubStarText.tr(),
@@ -95,6 +96,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
           onPressed: () =>
               _launchURL('https://github.com/AppFlowy-IO/appflowy'),
         ),
+        const HSpace(20),
         FlowyTextButton(
           LocaleKeys.subscribeNewsletterText.tr(),
           fontWeight: FontWeight.w500,
@@ -149,19 +151,41 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
 
 class GoButton extends StatelessWidget {
   final VoidCallback onPressed;
+
   const GoButton({
-    Key? key,
+    super.key,
     required this.onPressed,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
-    return RoundedTextButton(
+    return FlowyTextButton(
-      title: LocaleKeys.letsGoButtonText.tr(),
+      LocaleKeys.letsGoButtonText.tr(),
       fontSize: FontSizes.s16,
-      height: 50,
+      padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 12.0),
-      borderRadius: Corners.s10Border,
       onPressed: onPressed,
+      fillColor: Theme.of(context).colorScheme.primary,
+      fontColor: Theme.of(context).colorScheme.onPrimary,
+      hoverColor: Theme.of(context).colorScheme.primaryContainer,
     );
   }
 }
+
+class _SkipLoginMoveWindow extends StatelessWidget
+    implements PreferredSizeWidget {
+  const _SkipLoginMoveWindow();
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: const [
+        Expanded(
+          child: MoveWindowDetector(),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(55.0);
+}