feat: mobile setting page, trash page and recent file UI with mock da…

…ta (AppFlowy-IO#3734)

frontend/appflowy_flutter/integration_test/auth/auth_test.dart

@@ -25,8 +25,8 @@ void main() {
       await tester.openSettingsPage(SettingsPage.user);
       await tester.tapButton(find.byType(SettingLogoutButton));
 
-      tester.expectToSeeText(LocaleKeys.button_OK.tr());
-      await tester.tapButtonWithName(LocaleKeys.button_OK.tr());
+      tester.expectToSeeText(LocaleKeys.button_ok.tr());
+      await tester.tapButtonWithName(LocaleKeys.button_ok.tr());
 
       // Go to the sign in page again
       await tester.pumpAndSettle(const Duration(seconds: 1));

frontend/appflowy_flutter/integration_test/util/common_operations.dart

@@ -236,7 +236,7 @@ extension CommonOperations on WidgetTester {
     final okButton = find.byWidgetPredicate(
       (widget) =>
           widget is PrimaryTextButton &&
-          widget.label == LocaleKeys.button_OK.tr(),
+          widget.label == LocaleKeys.button_ok.tr(),
     );
     await tapButton(okButton);
   }

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -747,7 +747,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
     final field = find.byWidgetPredicate(
       (widget) =>
           widget is PrimaryTextButton &&
-          widget.label == LocaleKeys.button_OK.tr(),
+          widget.label == LocaleKeys.button_ok.tr(),
     );
     await tapButton(field);
   }
@@ -1432,7 +1432,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
     final field = find.byWidgetPredicate(
       (widget) =>
           widget is PrimaryTextButton &&
-          widget.label == LocaleKeys.button_OK.tr(),
+          widget.label == LocaleKeys.button_ok.tr(),
     );
     await tapButton(field);
   }
@@ -1452,7 +1452,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
     final okButton = find.byWidgetPredicate(
       (widget) =>
           widget is PrimaryTextButton &&
-          widget.label == LocaleKeys.button_OK.tr(),
+          widget.label == LocaleKeys.button_ok.tr(),
     );
     await tapButton(okButton);
   }

frontend/appflowy_flutter/ios/Podfile.lock

@@ -164,7 +164,7 @@ SPEC CHECKSUMS:
   SDWebImage: b9a731e1d6307f44ca703b3976d18c24ca561e84
   shared_preferences_foundation: e2dae3258e06f44cc55f49d42024fd8dd03c590c
   sign_in_with_apple: f3bf75217ea4c2c8b91823f225d70230119b8440
-  super_native_extensions: 49e897b6039bb784226e7354e502a3c68e1659b5
+  super_native_extensions: 4916b3c627a9c7fffdc48a23a9eca0b1ac228fa7
   SwiftyGif: 6c3eafd0ce693cad58bb63d2b2fb9bacb8552780
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   url_launcher_ios: 08a3dfac5fb39e8759aeb0abbd5d9480f30fc8b4

frontend/appflowy_flutter/lib/mobile/application/mobile_theme_data.dart

@@ -1,48 +1,98 @@
 // ThemeData in mobile
+import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
+import 'package:flowy_infra/colorscheme/colorscheme.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 
+const _primaryColor = Color(0xFF2DA2F6); //primary 100
+const _onBackgroundColor = Color(0xff2F3030); // text/title color
+const _onSurfaceColor = Color(0xff676666); // text/body color
+const _onSecondaryColor = Color(0xFFC5C7CB); // text/body2 color
+
+// TODO(yijing): improve theme color before release
 ThemeData getMobileThemeData(
-  Theme theme,
+  Brightness brightness,
+  FlowyColorScheme theme,
+  String fontFamily,
+  String monospaceFontFamily,
 ) {
-  const mobileColorTheme = ColorScheme(
-    brightness: Brightness.light,
-    primary: Color(0xFF2DA2F6), //primary 100
-    onPrimary: Colors.white,
-    // TODO(yijing): add color later
-    secondary: Colors.white,
-    onSecondary: Colors.white,
-    error: Color(0xffFB006D),
-    onError: Color(0xffFB006D),
-    background: Colors.white,
-    onBackground: Color(0xff2F3030), // title text
-    outline: Color(0xffBDC0C5), //caption
-    //Snack bar
-    surface: Colors.white,
-    onSurface: Color(0xff2F3030), // title text
-  );
+  final mobileColorTheme = (brightness == Brightness.light)
+      ? ColorScheme(
+          brightness: brightness,
+          primary: _primaryColor,
+          onPrimary: Colors.white,
+          // TODO(yijing): add color later
+          secondary: Colors.white,
+          onSecondary: _onSecondaryColor,
+          error: const Color(0xffFB006D),
+          onError: const Color(0xffFB006D),
+          background: Colors.white,
+          onBackground: _onBackgroundColor,
+          outline: const Color(0xffBDC0C5), //caption
+          outlineVariant: const Color(0xffCBD5E0).withOpacity(0.24),
+          //Snack bar
+          surface: Colors.white,
+          onSurface: _onSurfaceColor, // text/body color
+        )
+      : ColorScheme(
+          brightness: brightness,
+          primary: _primaryColor,
+          onPrimary: Colors.white,
+          // TODO(yijing): add color later
+          secondary: Colors.black,
+          onSecondary: Colors.white,
+          error: const Color(0xffFB006D),
+          onError: const Color(0xffFB006D),
+          background: const Color(0xff1C1C1E), // BG/Secondary color
+          onBackground: Colors.white,
+          outline: const Color(0xff96989C), //caption
+          outlineVariant: Colors.black,
+          //Snack bar
+          surface: const Color(0xff2F3030),
+          onSurface: const Color(0xffC5C6C7), // text/body color
+        );
+
   return ThemeData(
     // color
     primaryColor: mobileColorTheme.primary, //primary 100
     primaryColorLight: const Color(0xFF57B5F8), //primary 80
     dividerColor: mobileColorTheme.outline, //caption
+    hintColor: mobileColorTheme.outline,
+    disabledColor: mobileColorTheme.outline,
     scaffoldBackgroundColor: mobileColorTheme.background,
     appBarTheme: AppBarTheme(
       foregroundColor: mobileColorTheme.onBackground,
       backgroundColor: mobileColorTheme.background,
-      elevation: 0,
+      elevation: 80,
       centerTitle: false,
       titleTextStyle: TextStyle(
-        fontFamily: 'Poppins',
         color: mobileColorTheme.onBackground,
         fontSize: 18,
         fontWeight: FontWeight.w600,
         letterSpacing: 0.05,
       ),
+      shadowColor: mobileColorTheme.outlineVariant,
+    ),
+    radioTheme: RadioThemeData(
+      fillColor: MaterialStateProperty.resolveWith((states) {
+        if (states.contains(MaterialState.selected)) {
+          return mobileColorTheme.primary;
+        }
+        return mobileColorTheme.outline;
+      }),
     ),
     // button
     elevatedButtonTheme: ElevatedButtonThemeData(
       style: ButtonStyle(
+        fixedSize: MaterialStateProperty.all(const Size.fromHeight(48)),
         elevation: MaterialStateProperty.all(0),
+        textStyle: MaterialStateProperty.all(
+          const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
         shadowColor: MaterialStateProperty.all(null),
         backgroundColor: MaterialStateProperty.resolveWith<Color>(
           (Set<MaterialState> states) {
@@ -57,6 +107,12 @@ ThemeData getMobileThemeData(
     ),
     outlinedButtonTheme: OutlinedButtonThemeData(
       style: ButtonStyle(
+        textStyle: MaterialStateProperty.all(
+          const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+          ),
+        ),
         foregroundColor: MaterialStateProperty.all(
           mobileColorTheme.onBackground,
         ),
@@ -81,52 +137,74 @@ ThemeData getMobileThemeData(
         ),
       ),
     ),
+    textButtonTheme: TextButtonThemeData(
+      style: ButtonStyle(
+        textStyle: MaterialStateProperty.all(
+          const TextStyle(
+            fontFamily: 'Poppins',
+          ),
+        ),
+      ),
+    ),
     // text
     fontFamily: 'Poppins',
-    textTheme: const TextTheme(
-      displayLarge: TextStyle(
+    textTheme: TextTheme(
+      displayLarge: const TextStyle(
         color: Color(0xFF57B5F8),
         fontSize: 32,
         fontWeight: FontWeight.w700,
         height: 1.20,
         letterSpacing: 0.16,
       ),
       displayMedium: TextStyle(
-        color: Color(0xff2F3030),
+        color: mobileColorTheme.onBackground,
         fontSize: 32,
         fontWeight: FontWeight.w600,
         height: 1.20,
         letterSpacing: 0.16,
       ),
       // H1 Semi 26
       displaySmall: TextStyle(
-        color: Color(0xFF2F3030),
-        fontSize: 26,
+        color: mobileColorTheme.onBackground,
         fontWeight: FontWeight.w600,
         height: 1.10,
         letterSpacing: 0.13,
       ),
       // body2 14 Regular
       bodyMedium: TextStyle(
-        color: Colors.black,
+        color: mobileColorTheme.onBackground,
         fontSize: 14,
         fontWeight: FontWeight.w400,
         height: 1.20,
         letterSpacing: 0.07,
       ),
-      // blue text button
+      // Trash empty title
+      labelLarge: TextStyle(
+        color: mobileColorTheme.onBackground,
+        fontSize: 22,
+        fontWeight: FontWeight.w600,
+        letterSpacing: -0.3,
+      ),
+      // setting item title
       labelMedium: TextStyle(
-        color: Color(0xFF2DA2F6),
-        fontSize: 14,
+        color: mobileColorTheme.onSurface,
+        fontSize: 18,
         fontWeight: FontWeight.w500,
-        height: 1.20,
+      ),
+      // setting group title
+      labelSmall: TextStyle(
+        color: mobileColorTheme.onBackground,
+        fontSize: 16,
+        fontWeight: FontWeight.w600,
+        letterSpacing: 0.05,
       ),
     ),
     inputDecorationTheme: InputDecorationTheme(
+      contentPadding: const EdgeInsets.all(8),
       focusedBorder: const OutlineInputBorder(
         borderSide: BorderSide(
           width: 2,
-          color: Color(0xFF2DA2F6), //primary 100
+          color: _primaryColor,
         ),
         borderRadius: BorderRadius.all(Radius.circular(6)),
       ),
@@ -138,13 +216,54 @@ ThemeData getMobileThemeData(
         borderSide: BorderSide(color: mobileColorTheme.error),
         borderRadius: const BorderRadius.all(Radius.circular(6)),
       ),
-      enabledBorder: const OutlineInputBorder(
+      enabledBorder: OutlineInputBorder(
         borderSide: BorderSide(
-          color: Color(0xffBDC0C5), //caption
+          color: mobileColorTheme.outline,
         ),
-        borderRadius: BorderRadius.all(Radius.circular(6)),
+        borderRadius: const BorderRadius.all(Radius.circular(6)),
       ),
     ),
     colorScheme: mobileColorTheme,
+    extensions: [
+      AFThemeExtension(
+        warning: theme.yellow,
+        success: theme.green,
+        tint1: theme.tint1,
+        tint2: theme.tint2,
+        tint3: theme.tint3,
+        tint4: theme.tint4,
+        tint5: theme.tint5,
+        tint6: theme.tint6,
+        tint7: theme.tint7,
+        tint8: theme.tint8,
+        tint9: theme.tint9,
+        textColor: theme.text,
+        greyHover: theme.hoverBG1,
+        greySelect: theme.bg3,
+        lightGreyHover: theme.hoverBG3,
+        toggleOffFill: theme.shader5,
+        progressBarBGColor: theme.progressBarBGColor,
+        toggleButtonBGColor: theme.toggleButtonBGColor,
+        calendarWeekendBGColor: theme.calendarWeekendBGColor,
+        gridRowCountColor: theme.gridRowCountColor,
+        code: getFontStyle(
+          fontFamily: monospaceFontFamily,
+          fontColor: theme.shader3,
+        ),
+        callout: getFontStyle(
+          fontFamily: fontFamily,
+          fontSize: FontSizes.s11,
+          fontColor: theme.shader3,
+        ),
+        calloutBGColor: theme.hoverBG3,
+        tableCellBGColor: theme.surface,
+        caption: getFontStyle(
+          fontFamily: fontFamily,
+          fontSize: FontSizes.s11,
+          fontWeight: FontWeight.w400,
+          fontColor: theme.hint,
+        ),
+      ),
+    ],
   );
 }

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

@@ -50,16 +50,8 @@ enum MobilePaneActionType {
           onPressed: (context) {
             final viewBloc = context.read<ViewBloc>();
             final favoriteBloc = context.read<FavoriteBloc>();
-            showModalBottomSheet(
+            showMobileBottomSheet(
               context: context,
-              isScrollControlled: true,
-              enableDrag: true,
-              shape: const RoundedRectangleBorder(
-                borderRadius: BorderRadius.only(
-                  topLeft: Radius.circular(8.0),
-                  topRight: Radius.circular(8.0),
-                ),
-              ),
               builder: (context) {
                 return MultiBlocProvider(
                   providers: [