fix: grid theming to bottom row count number (#3510)

* fix: theming to bottom count number

* refactor: Row to RichText

frontend/appflowy_flutter/integration_test/util/database_test_op.dart

@@ -899,9 +899,7 @@ extension AppFlowyDatabaseTest on WidgetTester {
   }
 
   Future<void> assertRowCountInGridPage(int num) async {
-    final text = find.byWidgetPredicate(
-      (widget) => widget is FlowyText && widget.text == rowCountString(num),
-    );
+    final text = find.text('${rowCountString()} $num',findRichText: true);
     expect(text, findsOneWidget);
   }
 

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/grid_page.dart

@@ -5,10 +5,10 @@ import 'package:appflowy/plugins/database_view/tar_bar/setting_menu.dart';
 import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scroll_bar.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_scrollview.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -410,14 +410,21 @@ class _GridFooter extends StatelessWidget {
       builder: (context, rowCount) {
         return Padding(
           padding: GridSize.contentInsets,
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              FlowyText.medium(
-                rowCountString(rowCount),
-                color: Theme.of(context).hintColor,
-              ),
-            ],
+          child: RichText(
+            text: TextSpan(
+              text: rowCountString(),
+              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                    color: Theme.of(context).hintColor,
+                  ),
+              children: [
+                TextSpan(
+                  text: ' $rowCount',
+                  style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                        color: AFThemeExtension.of(context).gridRowCountColor,
+                      ),
+                ),
+              ],
+            ),
           ),
         );
       },
@@ -425,6 +432,6 @@ class _GridFooter extends StatelessWidget {
   }
 }
 
-String rowCountString(int count) {
-  return '${LocaleKeys.grid_row_count.tr()} : $count';
+String rowCountString() {
+  return '${LocaleKeys.grid_row_count.tr()} :';
 }

frontend/appflowy_flutter/lib/workspace/application/appearance.dart

@@ -434,6 +434,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
           progressBarBGColor: theme.progressBarBGColor,
           toggleButtonBGColor: theme.toggleButtonBGColor,
           calendarWeekendBGColor: theme.calendarWeekendBGColor,
+          gridRowCountColor: theme.gridRowCountColor,
           code: _getFontStyle(
             fontFamily: monospaceFontFamily,
             fontColor: theme.shader3,

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

@@ -86,6 +86,8 @@ class FlowyColorScheme {
   final Color toolbarColor;
   final Color toggleButtonBGColor;
   final Color calendarWeekendBGColor;
+  //grid bottom count color
+  final Color gridRowCountColor;
 
   const FlowyColorScheme({
     required this.surface,
@@ -135,6 +137,7 @@ class FlowyColorScheme {
     required this.toolbarColor,
     required this.toggleButtonBGColor,
     required this.calendarWeekendBGColor,
+    required this.gridRowCountColor,
   });
 
   factory FlowyColorScheme.fromJson(Map<String, dynamic> json) =>

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

@@ -73,6 +73,7 @@ class DandelionColorScheme extends FlowyColorScheme {
           toolbarColor: _lightShader1,
           toggleButtonBGColor: _lightShader5,
           calendarWeekendBGColor: const Color(0xFFFBFBFC),
+          gridRowCountColor: _black,
         );
 
   const DandelionColorScheme.dark()
@@ -124,5 +125,6 @@ class DandelionColorScheme extends FlowyColorScheme {
           toolbarColor: _darkInput,
           toggleButtonBGColor: _darkShader1,
           calendarWeekendBGColor: const Color(0xff121212),
+          gridRowCountColor: _darkMain1,
         );
 }

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

@@ -71,6 +71,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           toolbarColor: _lightShader1,
           toggleButtonBGColor: _lightShader5,
           calendarWeekendBGColor: const Color(0xFFFBFBFC),
+          gridRowCountColor: const Color(0xff000000),
         );
 
   const DefaultColorScheme.dark()
@@ -122,5 +123,6 @@ class DefaultColorScheme extends FlowyColorScheme {
           toolbarColor: _darkInput,
           toggleButtonBGColor: _darkShader1,
           calendarWeekendBGColor: const Color(0xff121212),
+          gridRowCountColor: _darkMain1,
         );
 }

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

@@ -74,6 +74,7 @@ class LavenderColorScheme extends FlowyColorScheme {
           toolbarColor: _lightShader1,
           toggleButtonBGColor: _lightSelector,
           calendarWeekendBGColor: const Color(0xFFFBFBFC),
+          gridRowCountColor: _black,
         );
 
   const LavenderColorScheme.dark()
@@ -125,5 +126,6 @@ class LavenderColorScheme extends FlowyColorScheme {
           toolbarColor: _darkInput,
           toggleButtonBGColor: _darkShader1,
           calendarWeekendBGColor: const Color(0xff121212),
+          gridRowCountColor: _darkMain1,
         );
 }

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

@@ -25,6 +25,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final Color calloutBGColor;
   final Color tableCellBGColor;
   final Color calendarWeekendBGColor;
+  final Color gridRowCountColor;
 
   final TextStyle code;
   final TextStyle callout;
@@ -55,6 +56,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     required this.caption,
     required this.progressBarBGColor,
     required this.toggleButtonBGColor,
+    required this.gridRowCountColor,
   });
 
   static AFThemeExtension of(BuildContext context) {
@@ -84,6 +86,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     Color? progressBarBGColor,
     Color? toggleButtonBGColor,
     Color? calendarWeekendBGColor,
+    Color? gridRowCountColor,
     TextStyle? code,
     TextStyle? callout,
     TextStyle? caption,
@@ -111,6 +114,7 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
       toggleButtonBGColor: toggleButtonBGColor ?? this.toggleButtonBGColor,
       calendarWeekendBGColor:
           calendarWeekendBGColor ?? this.calendarWeekendBGColor,
+      gridRowCountColor: gridRowCountColor ?? this.gridRowCountColor,
       code: code ?? this.code,
       callout: callout ?? this.callout,
       caption: caption ?? this.caption,
@@ -149,6 +153,8 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
           Color.lerp(toggleButtonBGColor, other.toggleButtonBGColor, t)!,
       calendarWeekendBGColor:
           Color.lerp(calendarWeekendBGColor, other.calendarWeekendBGColor, t)!,
+      gridRowCountColor: Color.lerp(
+          gridRowCountColor, other.gridRowCountColor, t)!,
       code: other.code,
       callout: other.callout,
       caption: other.caption,