From 4e863bc87fe25c750abf36370e1a99c85d37a94b Mon Sep 17 00:00:00 2001
From: Alex Wallen <wallenstephen@outlook.com>
Date: Tue, 29 Aug 2023 09:03:58 -1000
Subject: [PATCH] feat: add hover color to question bubble like mockup (#3222)

---
 .../widgets/float_bubble/question_bubble.dart | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
index 199d236114..691657ff12 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
@@ -29,9 +29,30 @@ class QuestionBubble extends StatelessWidget {
   }
 }
 
-class BubbleActionList extends StatelessWidget {
+class BubbleActionList extends StatefulWidget {
   const BubbleActionList({Key? key}) : super(key: key);
 
+  @override
+  State<BubbleActionList> createState() => _BubbleActionListState();
+}
+
+class _BubbleActionListState extends State<BubbleActionList> {
+  bool isOpen = false;
+
+  Color get fontColor => isOpen
+      ? Theme.of(context).colorScheme.onPrimary
+      : Theme.of(context).colorScheme.tertiary;
+
+  Color get fillColor => isOpen
+      ? Theme.of(context).colorScheme.primary
+      : Theme.of(context).colorScheme.tertiaryContainer;
+
+  void toggle() {
+    setState(() {
+      isOpen = !isOpen;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final List<PopoverAction> actions = [];
@@ -49,14 +70,18 @@ class BubbleActionList extends StatelessWidget {
           '?',
           tooltip: LocaleKeys.questionBubble_help.tr(),
           fontWeight: FontWeight.w600,
-          fontColor: Theme.of(context).colorScheme.tertiary,
-          fillColor: Theme.of(context).colorScheme.tertiaryContainer,
-          hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
+          fontColor: fontColor,
+          fillColor: fillColor,
+          hoverColor: Theme.of(context).colorScheme.primary,
           mainAxisAlignment: MainAxisAlignment.center,
           radius: Corners.s10Border,
-          onPressed: () => controller.show(),
+          onPressed: () {
+            toggle();
+            controller.show();
+          },
         );
       },
+      onClosed: toggle,
       onSelected: (action, controller) {
         if (action is BubbleActionWrapper) {
           switch (action.inner) {