fix: switch vocab / grammar buttons to use icon and text (#1888)

Author: ggurdin

lib/pangea/analytics_details_popup/analytics_details_popup.dart

@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 
-import 'package:fluffychat/config/app_config.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
 import 'package:fluffychat/pangea/analytics_details_popup/morph_analytics_view.dart';
 import 'package:fluffychat/pangea/analytics_details_popup/morph_details_view.dart';
 import 'package:fluffychat/pangea/analytics_details_popup/vocab_analytics_view.dart';
 import 'package:fluffychat/pangea/analytics_details_popup/vocab_details_view.dart';
-import 'package:fluffychat/pangea/analytics_misc/analytics_constants.dart';
 import 'package:fluffychat/pangea/analytics_misc/construct_identifier.dart';
 import 'package:fluffychat/pangea/analytics_misc/construct_type_enum.dart';
 import 'package:fluffychat/pangea/analytics_summary/progress_indicators_enum.dart';
@@ -63,38 +64,40 @@ class AnalyticsPopupWrapperState extends State<AnalyticsPopupWrapper> {
                 : () => setConstructZoom(null),
           ),
           actions: [
-            Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: SizedBox(
-                height: 30.0,
-                width: 30.0,
-                child: InkWell(
-                  child: Image.network(
-                    '${AppConfig.assetsBaseURL}/${AnalyticsConstants.vocabIconFileName}',
-                  ),
-                  onTap: () => setState(() {
-                    localView = ConstructTypeEnum.vocab;
-                    localConstructZoom = null;
-                  }),
+            TextButton.icon(
+              style: TextButton.styleFrom(
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(10.0),
                 ),
+                backgroundColor: localView == ConstructTypeEnum.vocab
+                    ? Theme.of(context).colorScheme.primary.withAlpha(50)
+                    : Theme.of(context).colorScheme.surface,
               ),
+              label: Text(L10n.of(context).vocab),
+              icon: const Icon(Symbols.dictionary),
+              onPressed: () => setState(() {
+                localView = ConstructTypeEnum.vocab;
+                localConstructZoom = null;
+              }),
             ),
-            Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: SizedBox(
-                height: 30.0,
-                width: 30.0,
-                child: InkWell(
-                  child: Image.network(
-                    '${AppConfig.assetsBaseURL}/${AnalyticsConstants.morphIconFileName}',
-                  ),
-                  onTap: () => setState(() {
-                    localView = ConstructTypeEnum.morph;
-                    localConstructZoom = null;
-                  }),
+            const SizedBox(width: 4.0),
+            TextButton.icon(
+              style: TextButton.styleFrom(
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(10.0),
                 ),
+                backgroundColor: localView == ConstructTypeEnum.morph
+                    ? Theme.of(context).colorScheme.primary.withAlpha(50)
+                    : Theme.of(context).colorScheme.surface,
               ),
+              label: Text(L10n.of(context).grammar),
+              icon: const Icon(Symbols.toys_and_games),
+              onPressed: () => setState(() {
+                localView = ConstructTypeEnum.morph;
+                localConstructZoom = null;
+              }),
             ),
+            const SizedBox(width: 4.0),
           ],
         ),
         body: localView == ConstructTypeEnum.morph

lib/pangea/analytics_summary/progress_indicator.dart

@@ -38,6 +38,13 @@ class ProgressIndicatorBadge extends StatelessWidget {
             child: Row(
               mainAxisSize: MainAxisSize.min,
               children: [
+                Icon(
+                  size: 14,
+                  indicator.icon,
+                  color: indicator.color(context),
+                  weight: 1000,
+                ),
+                const SizedBox(width: 4.0),
                 Text(
                   indicator.tooltip(context),
                   style: TextStyle(
@@ -46,7 +53,7 @@ class ProgressIndicatorBadge extends StatelessWidget {
                     color: indicator.color(context),
                   ),
                 ),
-                const SizedBox(width: 5),
+                const SizedBox(width: 4.0),
                 !loading
                     ? Text(
                         points.toString(),