1563-grammar-icon-in-light-mode (#1565)

* fix(morph_svgs): fixing light/dark mode coloring

* dart formatting

---------

Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>

lib/pangea/analytics/widgets/analytics_summary/vocab_analytics_popup/vocab_analytics_popup.dart

@@ -211,17 +211,10 @@ class VocabAnalyticsPopupState extends State<VocabAnalyticsPopup> {
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  CircleAvatar(
+                  CustomizedSvg(
-                    backgroundColor:
+                    svgUrl: type.svgURL,
-                        Theme.of(context).brightness == Brightness.light
+                    colorReplacements: const {},
-                            ? Colors.white
+                    errorIcon: Text(type.emoji),
-                            : Colors.black,
-                    radius: 16,
-                    child: CustomizedSvg(
-                      svgUrl: type.svgURL,
-                      colorReplacements: const {},
-                      errorIcon: Text(type.emoji),
-                    ),
                   ),
                   Text(
                     " ${type.xpString} XP",

lib/pangea/common/widgets/customized_svg.dart

@@ -5,8 +5,13 @@ import 'package:get_storage/get_storage.dart';
 import 'package:http/http.dart' as http;
 
 class CustomizedSvg extends StatelessWidget {
+  /// URL of the SVG file
   final String svgUrl;
+
+  /// Map of color replacements
   final Map<String, String> colorReplacements;
+
+  /// Icon to show in case of error
   final Widget errorIcon;
 
   const CustomizedSvg({
@@ -38,6 +43,8 @@ class CustomizedSvg extends StatelessWidget {
   Future<String> _getModifiedSvg() async {
     final svgContent = await _fetchSvg();
     String modifiedSvg = svgContent;
+    // find the white and replace with black
+    // or find black and replace with white
     modifiedSvg = modifiedSvg.replaceAll("fill=\"none\"", '');
     for (final entry in colorReplacements.entries) {
       modifiedSvg = modifiedSvg.replaceAll(entry.key, entry.value);

lib/pangea/toolbar/widgets/practice_activity/emoji_practice_button.dart

@@ -33,6 +33,6 @@ class EmojiPracticeButton extends StatelessWidget {
             isSelected: isSelected,
             onPressed: onPressed,
           )
-        : const SizedBox(width: 40);
+        : const SizedBox(width: 60);
   }
 }

lib/pangea/toolbar/widgets/practice_activity/word_zoom_activity_button.dart

@@ -23,6 +23,7 @@ class WordZoomActivityButton extends StatelessWidget {
     Widget buttonContent = IconButton(
       onPressed: onPressed,
       icon: icon,
+      iconSize: 24,
       color: isSelected ? Theme.of(context).colorScheme.primary : null,
       style: IconButton.styleFrom(
         backgroundColor: isSelected

lib/pangea/toolbar/widgets/word_zoom/morphs/morphological_list_item.dart

@@ -36,12 +36,14 @@ class MorphologicalListItem extends StatelessWidget {
         icon: svgLink != null
             ? CustomizedSvg(
                 svgUrl: svgLink!,
-                colorReplacements: {
+                colorReplacements:
-                  "white": Theme.of(context).cardColor.hexValue.toString(),
+                    Theme.of(context).brightness == Brightness.dark
-                  "black": Theme.of(context).brightness == Brightness.dark
+                        ? {
-                      ? "white"
+                            "white":
-                      : "black",
+                                Theme.of(context).cardColor.hexValue.toString(),
-                },
+                            "black": "white",
+                          }
+                        : {},
                 errorIcon: Icon(icon),
               )
             : Icon(icon),