From 08126fd38be81e13a359fd090240dbacf5ec992b Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:58:55 -0500
Subject: [PATCH] fix: make learning settings dropdowns stand out against
 background (#1784)

---
 .../pages/settings_learning_view.dart                 |  3 +++
 .../widgets/country_picker_tile.dart                  |  9 +++++++--
 .../widgets/p_language_dropdown.dart                  | 11 +++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/lib/pangea/learning_settings/pages/settings_learning_view.dart b/lib/pangea/learning_settings/pages/settings_learning_view.dart
index 615e8c873..b80b3d2f8 100644
--- a/lib/pangea/learning_settings/pages/settings_learning_view.dart
+++ b/lib/pangea/learning_settings/pages/settings_learning_view.dart
@@ -80,6 +80,9 @@ class SettingsLearningView extends StatelessWidget {
                                   }
                                   return null;
                                 },
+                                backgroundColor: Theme.of(context)
+                                    .colorScheme
+                                    .surfaceContainerHigh,
                               ),
                               PLanguageDropdown(
                                 onChange: (lang) =>
diff --git a/lib/pangea/learning_settings/widgets/country_picker_tile.dart b/lib/pangea/learning_settings/widgets/country_picker_tile.dart
index de3ae56ae..69d3f215a 100644
--- a/lib/pangea/learning_settings/widgets/country_picker_tile.dart
+++ b/lib/pangea/learning_settings/widgets/country_picker_tile.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:country_picker/country_picker.dart';
@@ -46,8 +47,12 @@ class CountryPickerDropdownState extends State<CountryPickerDropdown> {
       decoration: InputDecoration(
         labelText: L10n.of(context).countryInformation,
       ),
-      dropdownStyleData: const DropdownStyleData(
-        maxHeight: 300,
+      dropdownStyleData: DropdownStyleData(
+        maxHeight: kIsWeb ? 500 : null,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(14),
+          color: Theme.of(context).colorScheme.surfaceContainerHigh,
+        ),
       ),
       items: [
         ...countries.map(
diff --git a/lib/pangea/learning_settings/widgets/p_language_dropdown.dart b/lib/pangea/learning_settings/widgets/p_language_dropdown.dart
index 713ca48ce..59fc6f2c2 100644
--- a/lib/pangea/learning_settings/widgets/p_language_dropdown.dart
+++ b/lib/pangea/learning_settings/widgets/p_language_dropdown.dart
@@ -1,5 +1,6 @@
 // Flutter imports:
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:dropdown_button2/dropdown_button2.dart';
@@ -18,6 +19,7 @@ class PLanguageDropdown extends StatefulWidget {
   final String decorationText;
   final String? error;
   final String? Function(LanguageModel?)? validator;
+  final Color? backgroundColor;
 
   const PLanguageDropdown({
     super.key,
@@ -29,6 +31,7 @@ class PLanguageDropdown extends StatefulWidget {
     this.isL2List = false,
     this.error,
     this.validator,
+    this.backgroundColor,
   });
 
   @override
@@ -90,8 +93,12 @@ class PLanguageDropdownState extends State<PLanguageDropdown> {
               : null,
           decoration: InputDecoration(labelText: widget.decorationText),
           isExpanded: true,
-          dropdownStyleData: const DropdownStyleData(
-            maxHeight: 400,
+          dropdownStyleData: DropdownStyleData(
+            maxHeight: kIsWeb ? 500 : null,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(14),
+              color: widget.backgroundColor,
+            ),
           ),
           items: [
             if (widget.showMultilingual)