Fix color of the centered comment FAB in dark mode (#1691)

thunder-app · Feb 18, 2025 · c95b490 · c95b490
1 parent c4c3a28
commit c95b490
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/lib/shared/comment_navigator_fab.dart b/lib/shared/comment_navigator_fab.dart
@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:super_sliver_list/super_sliver_list.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 import 'package:thunder/comment/models/comment_node.dart';
+import 'package:thunder/core/theme/bloc/theme_bloc.dart';
 
 class CommentNavigatorFab extends StatefulWidget {
   /// The [ScrollController] for the scrollable list
@@ -60,6 +62,9 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
 
   @override
   Widget build(BuildContext context) {
+    final bool darkTheme = context.read<ThemeBloc>().state.useDarkTheme;
+    final ThemeData theme = Theme.of(context);
+
     return SizedBox(
       width: 135,
       child: Material(
@@ -73,6 +78,7 @@ class _CommentNavigatorFabState extends State<CommentNavigatorFab> {
                 child: SizedBox(
                   height: 45,
                   child: Material(
+                    color: darkTheme ? theme.colorScheme.primaryContainer : null,
                     borderRadius: BorderRadius.circular(50),
                     child: const InkWell(),
                   ),

diff --git a/lib/shared/gesture_fab.dart b/lib/shared/gesture_fab.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:thunder/core/theme/bloc/theme_bloc.dart';
 
 import '../thunder/bloc/thunder_bloc.dart';
 
@@ -116,6 +117,7 @@ class _GestureFabState extends State<GestureFab> with SingleTickerProviderStateM
             child: Material(
               shape: widget.centered ? null : const CircleBorder(),
               clipBehavior: widget.centered ? Clip.none : Clip.antiAlias,
+              color: Colors.transparent,
               elevation: widget.centered ? 0 : 4,
               child: InkWell(
                 borderRadius: BorderRadius.circular(50),
@@ -195,7 +197,7 @@ class _GestureFabState extends State<GestureFab> with SingleTickerProviderStateM
                     width: 45,
                     height: 45,
                     child: Material(
-                      shape: const CircleBorder(),
+                      shape: widget.centered ? null : const CircleBorder(),
                       clipBehavior: Clip.antiAlias,
                       color: Colors.transparent,
                       child: InkWell(
@@ -249,6 +251,8 @@ class ActionButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
+    final bool darkTheme = context.read<ThemeBloc>().state.useDarkTheme;
+
     return centered
         ? SizedBox(
             width: 160,
@@ -268,6 +272,7 @@ class ActionButton extends StatelessWidget {
                       child: SizedBox(
                         height: 40,
                         child: Material(
+                          color: darkTheme ? theme.colorScheme.primaryContainer : null,
                           borderRadius: BorderRadius.only(
                             topLeft: Radius.circular(first == true ? 20 : 0),
                             topRight: Radius.circular(first == true ? 20 : 0),