From 5af7bfb581b4a7737690c1154746dfb74138e2c2 Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:04:18 -0500
Subject: [PATCH] updates to level bar popup design (#1238)

---
 lib/pangea/enum/construct_use_type_enum.dart  | 45 +++++++++-----
 .../analytics_summary/level_bar_popup.dart    | 62 +++++++++++++------
 2 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/lib/pangea/enum/construct_use_type_enum.dart b/lib/pangea/enum/construct_use_type_enum.dart
index 9f45e63bd..ccce37f9e 100644
--- a/lib/pangea/enum/construct_use_type_enum.dart
+++ b/lib/pangea/enum/construct_use_type_enum.dart
@@ -110,30 +110,45 @@ extension ConstructUseTypeExtension on ConstructUseTypeEnum {
 
   IconData get icon {
     switch (this) {
-      case ConstructUseTypeEnum.wa:
-        return Icons.thumb_up_sharp;
-
-      case ConstructUseTypeEnum.corIt:
+      // all minus for wrong answer
       case ConstructUseTypeEnum.incIt:
-      case ConstructUseTypeEnum.ignIt:
-        return Icons.translate;
-
-      case ConstructUseTypeEnum.ignIGC:
       case ConstructUseTypeEnum.incIGC:
       case ConstructUseTypeEnum.incPA:
-      case ConstructUseTypeEnum.ignPA:
-      case ConstructUseTypeEnum.ignWL:
       case ConstructUseTypeEnum.incWL:
       case ConstructUseTypeEnum.incHWL:
-      case ConstructUseTypeEnum.ignHWL:
-        return Icons.close;
+        return Icons.dangerous_outlined;
 
-      case ConstructUseTypeEnum.ga:
-      case ConstructUseTypeEnum.corIGC:
+      // correct in word meaning
       case ConstructUseTypeEnum.corPA:
+        return Icons.add_task_outlined;
+
+      // correct in audio practice
       case ConstructUseTypeEnum.corWL:
       case ConstructUseTypeEnum.corHWL:
-        return Icons.check;
+        return Icons.volume_up_outlined;
+
+      // correct in translation
+      case ConstructUseTypeEnum.corIt:
+        return Icons.translate_outlined;
+
+      // written correctly without help
+      case ConstructUseTypeEnum.wa:
+        return Icons.thumb_up_outlined;
+
+      // correct in grammar correction
+      case ConstructUseTypeEnum.corIGC:
+        return Icons.spellcheck_outlined;
+
+      // ignored
+      case ConstructUseTypeEnum.ignIt:
+      case ConstructUseTypeEnum.ignIGC:
+      case ConstructUseTypeEnum.ignPA:
+      case ConstructUseTypeEnum.ignWL:
+      case ConstructUseTypeEnum.ignHWL:
+        return Icons.block_outlined;
+
+      case ConstructUseTypeEnum.ga:
+        return Icons.edit_outlined;
 
       case ConstructUseTypeEnum.unk:
       case ConstructUseTypeEnum.nan:
diff --git a/lib/pangea/widgets/chat_list/analytics_summary/level_bar_popup.dart b/lib/pangea/widgets/chat_list/analytics_summary/level_bar_popup.dart
index 4bb02619c..fdf556820 100644
--- a/lib/pangea/widgets/chat_list/analytics_summary/level_bar_popup.dart
+++ b/lib/pangea/widgets/chat_list/analytics_summary/level_bar_popup.dart
@@ -121,28 +121,54 @@ class LevelBarPopup extends StatelessWidget {
                             ) ??
                             use.lemma;
                       }
-                      return ListTile(
-                        leading: Icon(use.useType.icon),
-                        title: Text(
-                          "\"$lemmaCopy\" - ${use.useType.description(context)}",
-                          style: const TextStyle(fontSize: 14),
+                      return Padding(
+                        padding: const EdgeInsets.symmetric(
+                          vertical: 12,
+                          horizontal: 16,
                         ),
-                        trailing: Container(
-                          alignment: Alignment.centerRight,
-                          width: 60,
+                        child: IntrinsicHeight(
                           child: Row(
-                            mainAxisSize: MainAxisSize.min,
+                            crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              Text(
-                                "${use.pointValue > 0 ? '+' : ''}${use.pointValue}",
+                              Align(
+                                alignment: Alignment.centerLeft,
+                                child: Container(
+                                  width: 40,
+                                  alignment: Alignment.centerLeft,
+                                  child: Icon(use.useType.icon),
+                                ),
                               ),
-                              const SizedBox(width: 5),
-                              const CircleAvatar(
-                                radius: 10,
-                                child: Icon(
-                                  size: 12,
-                                  Icons.star,
-                                  color: Colors.white,
+                              const SizedBox(width: 10),
+                              Expanded(
+                                child: Text(
+                                  "\"$lemmaCopy\" - ${use.useType.description(context)}",
+                                  style: const TextStyle(fontSize: 14),
+                                ),
+                              ),
+                              Container(
+                                alignment: Alignment.topRight,
+                                width: 60,
+                                child: Row(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    Text(
+                                      "${use.pointValue > 0 ? '+' : ''}${use.pointValue}",
+                                      style: const TextStyle(
+                                        fontSize: 16,
+                                        height: 1,
+                                      ),
+                                    ),
+                                    const SizedBox(width: 5),
+                                    const CircleAvatar(
+                                      radius: 8,
+                                      child: Icon(
+                                        size: 10,
+                                        Icons.star,
+                                        color: Colors.white,
+                                      ),
+                                    ),
+                                  ],
                                 ),
                               ),
                             ],