fix: multiple UI issues (#2249)

* fix: put original borderRadius back to FieldCellButton

* chore: remove the border of card when it is in dark mode

* chore: update NavigatorTextFieldDialog style and organize Insets

* chore: delete unnecessary nullable field

frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart

@@ -292,9 +292,10 @@ class _BoardContentState extends State<BoardContent> {
       color: Theme.of(context).dividerColor,
       width: 1.0,
     );
+    final isLightMode = Theme.of(context).brightness == Brightness.light;
     return BoxDecoration(
       color: Theme.of(context).colorScheme.surface,
-      border: Border.fromBorderSide(borderSide),
+      border: isLightMode ? Border.fromBorderSide(borderSide) : null,
       borderRadius: const BorderRadius.all(Radius.circular(6)),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart

@@ -152,10 +152,12 @@ class FieldCellButton extends StatelessWidget {
   final VoidCallback onTap;
   final FieldPB field;
   final int? maxLines;
+  final BorderRadius? radius;
   const FieldCellButton({
     required this.field,
     required this.onTap,
     this.maxLines = 1,
+    this.radius = BorderRadius.zero,
     Key? key,
   }) : super(key: key);
 
@@ -172,7 +174,7 @@ class FieldCellButton extends StatelessWidget {
       leftIcon: FlowySvg(
         name: field.fieldType.iconName(),
       ),
-      radius: BorderRadius.circular(6),
+      radius: radius,
       text: FlowyText.medium(
         text,
         maxLines: maxLines,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart

@@ -301,6 +301,7 @@ class _PropertyCellState extends State<_PropertyCell> {
                 child: FieldCellButton(
                   field: widget.cellId.fieldInfo.field,
                   onTap: () => popover.show(),
+                  radius: BorderRadius.circular(6),
                 ),
               ),
             ),

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

@@ -10,7 +10,6 @@ import 'package:flowy_infra_ui/style_widget/text_input.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class NavigatorTextFieldDialog extends StatefulWidget {
   final String value;
@@ -43,21 +42,20 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
   Widget build(BuildContext context) {
     return StyledDialog(
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          ...[
+          FlowyText.medium(
-            FlowyText.medium(
+            widget.title,
-              widget.title,
+            color: Theme.of(context).colorScheme.tertiary,
-              color: Theme.of(context).disabledColor,
+            fontSize: FontSizes.s16,
-              fontSize: FontSizes.s16,
+          ),
-            ),
+          VSpace(Insets.m),
-            VSpace(Insets.sm * 1.5),
-          ],
           FlowyFormTextInput(
+            textAlign: TextAlign.center,
             hintText: LocaleKeys.dialogCreatePageNameHint.tr(),
             initialValue: widget.value,
-            textStyle:
+            textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
-                Theme.of(context).textTheme.bodySmall!.size(FontSizes.s24),
+                  fontSize: FontSizes.s16,
+                ),
             autoFocus: true,
             onChanged: (text) {
               newValue = text;
@@ -67,7 +65,7 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
               AppGlobals.nav.pop();
             },
           ),
-          const VSpace(10),
+          VSpace(Insets.xl),
           OkCancelButton(
             onOkPressed: () {
               widget.confirm(newValue);
@@ -206,6 +204,7 @@ class OkCancelButton extends StatelessWidget {
   final String? okTitle;
   final String? cancelTitle;
   final double? minHeight;
+  final MainAxisAlignment alignment;
 
   const OkCancelButton({
     Key? key,
@@ -214,6 +213,7 @@ class OkCancelButton extends StatelessWidget {
     this.okTitle,
     this.cancelTitle,
     this.minHeight,
+    this.alignment = MainAxisAlignment.spaceAround,
   }) : super(key: key);
 
   @override
@@ -221,7 +221,7 @@ class OkCancelButton extends StatelessWidget {
     return SizedBox(
       height: 48,
       child: Row(
-        mainAxisAlignment: MainAxisAlignment.end,
+        mainAxisAlignment: alignment,
         children: <Widget>[
           if (onCancelPressed != null)
             SecondaryTextButton(

frontend/appflowy_flutter/packages/flowy_infra/lib/size.dart

@@ -11,14 +11,8 @@ class PageBreaks {
 }
 
 class Insets {
-  static double gutterScale = 1;
-
-  static double scale = 1;
-
   /// Dynamic insets, may get scaled with the device size
-  static double get mGutter => m * gutterScale;
+  static double scale = 1;
-
-  static double get lGutter => l * gutterScale;
 
   static double get xs => 2 * scale;
 
@@ -29,6 +23,10 @@ class Insets {
   static double get l => 24 * scale;
 
   static double get xl => 36 * scale;
+
+  static double get xxl => 64 * scale;
+
+  static double get xxxl => 80 * scale;
 }
 
 class FontSizes {

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

@@ -15,6 +15,7 @@ class FlowyFormTextInput extends StatelessWidget {
   final String? hintText;
   final EdgeInsets? contentPadding;
   final TextStyle? textStyle;
+  final TextAlign textAlign;
   final int? maxLines;
   final TextEditingController? controller;
   final TextCapitalization? capitalization;
@@ -37,6 +38,7 @@ class FlowyFormTextInput extends StatelessWidget {
       this.contentPadding,
       this.capitalization,
       this.textStyle,
+      this.textAlign = TextAlign.center,
       this.maxLines})
       : super(key: key);
 
@@ -50,6 +52,7 @@ class FlowyFormTextInput extends StatelessWidget {
       onChanged: onChanged,
       onFocusCreated: onFocusCreated,
       style: textStyle ?? Theme.of(context).textTheme.bodyMedium,
+      textAlign: textAlign,
       onEditingComplete: onEditingComplete,
       onFocusChanged: onFocusChanged,
       controller: controller,
@@ -69,6 +72,7 @@ class FlowyFormTextInput extends StatelessWidget {
 class StyledSearchTextInput extends StatefulWidget {
   final String? label;
   final TextStyle? style;
+  final TextAlign textAlign;
   final EdgeInsets? contentPadding;
   final bool? autoFocus;
   final bool? obscureText;
@@ -103,6 +107,7 @@ class StyledSearchTextInput extends StatefulWidget {
     this.autoFocus = false,
     this.obscureText = false,
     this.type = TextInputType.text,
+    this.textAlign = TextAlign.center,
     this.icon,
     this.initialValue = '',
     this.controller,
@@ -201,6 +206,7 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
         enabled: widget.enabled,
         maxLines: widget.maxLines,
         textCapitalization: widget.capitalization ?? TextCapitalization.none,
+        textAlign: widget.textAlign,
         decoration: widget.inputDecoration ??
             InputDecoration(
               prefixIcon: widget.prefixIcon,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart

@@ -49,7 +49,8 @@ class StyledDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Widget innerContent = Container(
-      padding: padding ?? EdgeInsets.all(Insets.lGutter),
+      padding: padding ??
+          EdgeInsets.symmetric(horizontal: Insets.xxl, vertical: Insets.xl),
       color: bgColor ?? Theme.of(context).colorScheme.surface,
       child: child,
     );